mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-13 05:15:45 +00:00
Bug 1497182 - Flexbox justify-content incorrectly drawn when using flex-direction: row-reverse r=gl
Differential Revision: https://phabricator.services.mozilla.com/D7999 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
5a62defc27
commit
9a4efbbdcc
@ -165,6 +165,8 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
||||
this.clearCache();
|
||||
|
||||
this.flexData = null;
|
||||
this.crossAxisDirection = null;
|
||||
this.mainAxisDirection = null;
|
||||
|
||||
AutoRefreshHighlighter.prototype.destroy.call(this);
|
||||
}
|
||||
@ -301,8 +303,12 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
||||
this.computedStyle = getComputedStyle(this.currentNode);
|
||||
}
|
||||
|
||||
const flex = this.currentNode.getAsFlexContainer();
|
||||
this.crossAxisDirection = flex.crossAxisDirection;
|
||||
this.mainAxisDirection = flex.mainAxisDirection;
|
||||
|
||||
const oldFlexData = this.flexData;
|
||||
this.flexData = getFlexData(this.currentNode.getAsFlexContainer(), this.win);
|
||||
this.flexData = getFlexData(flex, this.win);
|
||||
const hasFlexDataChanged = compareFlexData(oldFlexData, this.flexData);
|
||||
|
||||
const oldAlignItems = this.alignItemsValue;
|
||||
@ -588,50 +594,74 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
||||
this.ctx.strokeStyle = this.color;
|
||||
|
||||
const { bounds } = this.currentQuads.content[0];
|
||||
const isColumn = this.flexDirection.startsWith("column");
|
||||
const options = { matrix: this.currentMatrix };
|
||||
|
||||
for (const flexLine of this.flexData.lines) {
|
||||
const { crossStart, crossSize } = flexLine;
|
||||
|
||||
if (isColumn) {
|
||||
clearRect(this.ctx, crossStart, 0, crossStart + crossSize, bounds.height,
|
||||
this.currentMatrix);
|
||||
switch (this.mainAxisDirection) {
|
||||
case "horizontal-lr":
|
||||
case "horizontal-rl":
|
||||
clearRect(this.ctx, 0, crossStart, bounds.width, crossStart + crossSize,
|
||||
this.currentMatrix);
|
||||
|
||||
// Avoid drawing the start flex line when they overlap with the flex container.
|
||||
if (crossStart != 0) {
|
||||
drawLine(this.ctx, crossStart, 0, crossStart, bounds.height, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
// Avoid drawing the start flex line when they overlap with the flex container.
|
||||
if (crossStart != 0) {
|
||||
drawLine(this.ctx, 0, crossStart, bounds.width, crossStart, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
|
||||
// Avoid drawing the end flex line when they overlap with the flex container.
|
||||
if (bounds.width - crossStart - crossSize >= lineWidth) {
|
||||
drawLine(this.ctx, crossStart + crossSize, 0, crossStart + crossSize,
|
||||
bounds.height, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
} else {
|
||||
clearRect(this.ctx, 0, crossStart, bounds.width, crossStart + crossSize,
|
||||
this.currentMatrix);
|
||||
// Avoid drawing the end flex line when they overlap with the flex container.
|
||||
if (bounds.height - crossStart - crossSize >= lineWidth) {
|
||||
drawLine(this.ctx, 0, crossStart + crossSize, bounds.width,
|
||||
crossStart + crossSize, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
break;
|
||||
case "vertical-tb":
|
||||
clearRect(this.ctx, crossStart, 0, crossStart + crossSize, bounds.height,
|
||||
this.currentMatrix);
|
||||
|
||||
// Avoid drawing the start flex line when they overlap with the flex container.
|
||||
if (crossStart != 0) {
|
||||
drawLine(this.ctx, 0, crossStart, bounds.width, crossStart, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
// Avoid drawing the start flex line when they overlap with the flex container.
|
||||
if (crossStart != 0) {
|
||||
drawLine(this.ctx, crossStart, 0, crossStart, bounds.height, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
|
||||
// Avoid drawing the end flex line when they overlap with the flex container.
|
||||
if (bounds.height - crossStart - crossSize >= lineWidth) {
|
||||
drawLine(this.ctx, 0, crossStart + crossSize, bounds.width,
|
||||
crossStart + crossSize, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
// Avoid drawing the end flex line when they overlap with the flex container.
|
||||
if (bounds.width - crossStart - crossSize >= lineWidth) {
|
||||
drawLine(this.ctx, crossStart + crossSize, 0, crossStart + crossSize,
|
||||
bounds.height, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
break;
|
||||
case "vertical-bt":
|
||||
clearRect(this.ctx, bounds.width - crossStart, 0,
|
||||
bounds.width - crossStart - crossSize, bounds.height, this.currentMatrix);
|
||||
|
||||
// Avoid drawing the start flex line when they overlap with the flex container.
|
||||
if (crossStart != 0) {
|
||||
drawLine(this.ctx, bounds.width - crossStart, 0, bounds.width - crossStart,
|
||||
bounds.height, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
|
||||
// Avoid drawing the end flex line when they overlap with the flex container.
|
||||
if (bounds.width - crossStart - crossSize >= lineWidth) {
|
||||
drawLine(this.ctx, bounds.width - crossStart - crossSize, 0,
|
||||
bounds.width - crossStart - crossSize, bounds.height, options);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear the whole alignment container along the main axis for each flex item.
|
||||
*/
|
||||
renderJustifyContent() {
|
||||
if (!this.flexData || !this.currentQuads.content || !this.currentQuads.content[0]) {
|
||||
return;
|
||||
@ -639,11 +669,12 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
||||
|
||||
const zoom = getCurrentZoom(this.win);
|
||||
const { bounds } = this.currentQuads.content[0];
|
||||
const isColumn = this.flexDirection.startsWith("column");
|
||||
|
||||
// Draw a justify content pattern over the whole flex container.
|
||||
this.drawJustifyContent(0, 0, bounds.width, bounds.height, this.currentMatrix);
|
||||
|
||||
for (const flexLine of this.flexData.lines) {
|
||||
const { crossStart, crossSize } = flexLine;
|
||||
let mainStart = 0;
|
||||
|
||||
for (const flexItem of flexLine.items) {
|
||||
const quads = flexItem.quads;
|
||||
@ -658,23 +689,23 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
||||
const right = Math.round(flexItemBounds.right / zoom - bounds.left);
|
||||
const bottom = Math.round(flexItemBounds.bottom / zoom - bounds.top);
|
||||
|
||||
if (isColumn) {
|
||||
this.drawJustifyContent(crossStart, mainStart, crossStart + crossSize, top);
|
||||
mainStart = bottom;
|
||||
} else {
|
||||
this.drawJustifyContent(mainStart, crossStart, left, crossStart + crossSize);
|
||||
mainStart = right;
|
||||
// Clear a rectangular are covering the alignment container.
|
||||
switch (this.mainAxisDirection) {
|
||||
case "horizontal-lr":
|
||||
case "horizontal-rl":
|
||||
clearRect(this.ctx, left, Math.round(crossStart) + 2, right,
|
||||
Math.round(crossStart + crossSize) - 2, this.currentMatrix);
|
||||
break;
|
||||
case "vertical-tb":
|
||||
clearRect(this.ctx, Math.round(crossStart) + 1, top,
|
||||
Math.round(crossStart + crossSize), bottom, this.currentMatrix);
|
||||
break;
|
||||
case "vertical-bt":
|
||||
clearRect(this.ctx, Math.round(bounds.width - crossStart - crossSize) + 1,
|
||||
top, Math.round(bounds.width - crossStart), bottom, this.currentMatrix);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Draw the last justify-content area after the last flex item.
|
||||
if (isColumn) {
|
||||
this.drawJustifyContent(crossStart, mainStart, crossStart + crossSize,
|
||||
bounds.height);
|
||||
} else {
|
||||
this.drawJustifyContent(mainStart, crossStart, bounds.width,
|
||||
crossStart + crossSize);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user