diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index 47020c40f..82fb0d51c 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -225,7 +225,7 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
     this.highlighter_.drawRightSideRow(row);
   }
   this.steps_.push('H', this.info_.startX + row.width);
-  this.steps_.push('v', row.height);
+  this.steps_.push('V', this.info_.startY + row.yPos + row.height);
 };
 
 
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index 3a4e0ff2f..41b2b7c1a 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -84,7 +84,7 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
       this.steps_.push(this.notchPaths_.pathLeft);
     } else if (elem.type === 'hat') {
       this.steps_.push(this.startPaths_.path(this.RTL_));
-    } else if (elem.isSpacer()) {
+    } else if (elem.isSpacer() && elem.width != 0) {
       // The end point of the spacer needs to be offset by the highlight amount.
       // So instead of using the spacer's width for a relative horizontal, use
       // its width and position for an absolute horizontal move.
@@ -151,7 +151,8 @@ Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
   }
   if (this.RTL_) {
     this.steps_.push('H', rightEdge);
-    this.steps_.push('v', row.height - this.highlightOffset_);
+    this.steps_.push('V',
+        this.info_.startY + row.yPos + row.height - this.highlightOffset_);
   }
 };
 
@@ -195,10 +196,16 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
   }
 
   if (!this.RTL_) {
-    if (this.info_.topRow.elements[0].isSquareCorner()) {
-      this.steps_.push('V', this.info_.startY + this.highlightOffset_);
-    } else {
+    var topRow = this.info_.topRow;
+    if (topRow.elements[0].isRoundedCorner()) {
       this.steps_.push('V', this.info_.startY + this.outsideCornerPaths_.height);
+    } else if (topRow.elements.length >= 3 && topRow.elements[2].type === 'hat'){
+      this.steps_.push('V',
+          this.info_.startY +
+          Blockly.blockRendering.constants.START_HAT.height +
+          this.highlightOffset_);
+    } else {
+      this.steps_.push('V', this.info_.startY + this.highlightOffset_);
     }
   }
 };
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index 1f08e5729..c23c8462e 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -226,7 +226,9 @@ Blockly.blockRendering.RenderInfo.prototype.createTopRow_ = function() {
   }
 
   if (hasHat) {
-    this.topRow.elements.push(new Blockly.blockRendering.Hat());
+    var hat = new Blockly.blockRendering.Hat();
+    this.topRow.elements.push(hat);
+    //this.startY = hat.height;
   } else if (hasPrevious) {
     this.topRow.elements.push(new Blockly.blockRendering.PreviousConnection());
   }
@@ -701,11 +703,14 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
     row.yPos = yCursor + this.startY;
     yCursor += row.height;
     // Add padding to the bottom row if block height is less than minimum
+    var heightWithoutHat =
+        this.block_.hat ? yCursor - Blockly.blockRendering.constants.START_HAT.height : yCursor;
     if (row == this.bottomRow &&
-        yCursor < Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT) {
-      this.bottomRow.height +=
-          Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT - yCursor;
-      yCursor = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT;
+        heightWithoutHat < Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT) {
+      // But the hat height shouldn't be part of this.
+      var diff = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT - heightWithoutHat;
+      this.bottomRow.height += diff;
+      yCursor += diff;
     }
     if (!(row.isSpacer())) {
       var xCursor = this.startX;
diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
index 690d747dd..e2901234e 100644
--- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js
+++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
@@ -176,6 +176,7 @@ Blockly.blockRendering.constants.START_HAT = (function() {
   var width = Blockly.blockRendering.constants.START_HAT_WIDTH;
 
   var mainPath =
+      Blockly.utils.svgPaths.moveBy(0, height) +
       Blockly.utils.svgPaths.curve('c',
           [
             Blockly.utils.svgPaths.point(30, -height),
diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js
index c557e13bc..264d535c5 100644
--- a/core/renderers/block_rendering_rewrite/highlight_constants.js
+++ b/core/renderers/block_rendering_rewrite/highlight_constants.js
@@ -209,7 +209,9 @@ Blockly.blockRendering.highlightConstants.JAGGED_TEETH = (function() {
 })();
 
 Blockly.blockRendering.highlightConstants.START_HAT = (function() {
+  var hatHeight = Blockly.blockRendering.constants.START_HAT.height;
   var pathRtl =
+      Blockly.utils.svgPaths.moveBy(0, hatHeight) +
       Blockly.utils.svgPaths.moveBy(25, -8.7) +
       Blockly.utils.svgPaths.curve('c',
           [
@@ -219,13 +221,14 @@ Blockly.blockRendering.highlightConstants.START_HAT = (function() {
           ]);
 
   var pathLtr =
+      Blockly.utils.svgPaths.moveBy(0, hatHeight) +
       Blockly.utils.svgPaths.curve('c',
           [
             Blockly.utils.svgPaths.point(17.8, -9.2),
             Blockly.utils.svgPaths.point(45.3, -14.9),
             Blockly.utils.svgPaths.point(75, -8.7)
           ]) +
-      Blockly.utils.svgPaths.moveTo(100.5, 0.5);
+      Blockly.utils.svgPaths.moveTo(100.5, hatHeight + 0.5);
   return {
     path: function(rtl) {
       return rtl ? pathRtl : pathLtr;
diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js
index e781afb0c..c4a2ebe65 100644
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -378,7 +378,7 @@ goog.inherits(Blockly.blockRendering.NextConnection, Blockly.blockRendering.Meas
 Blockly.blockRendering.Hat = function() {
   Blockly.blockRendering.Hat.superClass_.constructor.call(this);
   this.type = 'hat';
-  this.height = Blockly.blockRendering.constants.NO_PADDING;
+  this.height = Blockly.blockRendering.constants.START_HAT.height;
   this.width = Blockly.blockRendering.constants.START_HAT.width;
 
 };
@@ -537,6 +537,19 @@ Blockly.blockRendering.TopRow.prototype.getPreviousConnection = function() {
   return null;
 };
 
+Blockly.blockRendering.TopRow.prototype.measure = function() {
+  for (var e = 0; e < this.elements.length; e++) {
+    var elem = this.elements[e];
+    this.width += elem.width;
+    if (!(elem.isSpacer())) {
+      if (elem.type == 'hat') {
+        this.height = elem.height + this.height;
+      }
+      this.height = Math.max(this.height, elem.height);
+    }
+  }
+  this.widthWithConnectedBlocks = this.width;
+};
 Blockly.blockRendering.BottomRow = function(block) {
   Blockly.blockRendering.BottomRow.superClass_.constructor.call(this);
   this.type = 'bottom row';