Bug 1368535 - translate the matrix also by element's borders; r=gl
MozReview-Commit-ID: 6otecA8D18y
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1049,31 +1049,34 @@ CssGridHighlighter.prototype = extend(Au
updateCurrentMatrix() {
let origin = getNodeTransformOrigin(this.currentNode);
let bounds = getNodeBounds(this.win, this.currentNode);
let nodeMatrix = getNodeTransformationMatrix(this.currentNode);
let computedStyle = this.currentNode.ownerGlobal.getComputedStyle(this.currentNode);
let paddingTop = parseFloat(computedStyle.paddingTop);
let paddingLeft = parseFloat(computedStyle.paddingLeft);
+ let borderTop = parseFloat(computedStyle.borderTopWidth);
+ let borderLeft = parseFloat(computedStyle.borderLeftWidth);
- // Subtract padding values to compensate for top/left being moved by padding.
- let ox = origin[0] - paddingLeft;
- let oy = origin[1] - paddingTop;
+ // Subtract padding and border values to compensate for top/left being moved by
+ // padding and / or borders.
+ let ox = origin[0] - paddingLeft - borderLeft;
+ let oy = origin[1] - paddingTop - borderTop;
let m = identity();
// First, we scale based on the display's current pixel ratio.
m = multiply(m, scale(getDisplayPixelRatio(this.win)));
// Then we translate the origin to the node's top left corner.
m = multiply(m, translate(bounds.p1.x, bounds.p1.y));
// And scale based on the current zoom factor.
m = multiply(m, scale(getCurrentZoom(this.win)));
- // Then translate the origin based on the node's padding values.
- m = multiply(m, translate(paddingLeft, paddingTop));
+ // Then translate the origin based on the node's padding and border values.
+ m = multiply(m, translate(paddingLeft + borderLeft, paddingTop + borderTop));
// Finally, we can apply the current node's transformation matrix, taking in account
// the `transform-origin` property and the node's top and left padding.
if (nodeMatrix) {
m = multiply(m, translate(ox, oy));
m = multiply(m, nodeMatrix);
m = multiply(m, translate(-ox, -oy));
this.hasNodeTransformations = true;
} else {