Invalidate column rules when the width of a multicol container changes.
BUG=587794
Review URL: https://codereview.chromium.org/1892793002
Cr-Commit-Position: refs/heads/master@{#387624}
diff --git a/third_party/WebKit/LayoutTests/fast/multicol/resize-container-with-column-rule-child-expected.html b/third_party/WebKit/LayoutTests/fast/multicol/resize-container-with-column-rule-child-expected.html
new file mode 100644
index 0000000..89866af4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/multicol/resize-container-with-column-rule-child-expected.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<p>There should be two black vertical lines below.</p>
+<div style="width:604px; height:100px;">
+ <div style="float:left; width:200px; height:100%; background:white; border-right:2px solid;"></div>
+ <div style="float:left; width:200px; height:100%; background:white; border-right:2px solid;"></div>
+ <div style="float:left; width:200px; height:100%; background:white;"></div>
+</div>
diff --git a/third_party/WebKit/LayoutTests/fast/multicol/resize-container-with-column-rule-child.html b/third_party/WebKit/LayoutTests/fast/multicol/resize-container-with-column-rule-child.html
new file mode 100644
index 0000000..c6a9945
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/multicol/resize-container-with-column-rule-child.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<script src="../../resources/run-after-layout-and-paint.js"></script>
+<p>There should be two black vertical lines below.</p>
+<div id="container" style="width:304px;">
+ <div style="columns:3; column-rule:2px solid; column-gap:2px; column-fill:auto; height:100px;">
+ <div style="height:300px; background:white;"></div>
+ </div>
+</div>
+<script>
+ runAfterLayoutAndPaint(function() {
+ document.getElementById("container").style.width = "604px";
+ }, true);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/multicol/resize-with-column-rule-expected.html b/third_party/WebKit/LayoutTests/fast/multicol/resize-with-column-rule-expected.html
new file mode 100644
index 0000000..89866af4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/multicol/resize-with-column-rule-expected.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<p>There should be two black vertical lines below.</p>
+<div style="width:604px; height:100px;">
+ <div style="float:left; width:200px; height:100%; background:white; border-right:2px solid;"></div>
+ <div style="float:left; width:200px; height:100%; background:white; border-right:2px solid;"></div>
+ <div style="float:left; width:200px; height:100%; background:white;"></div>
+</div>
diff --git a/third_party/WebKit/LayoutTests/fast/multicol/resize-with-column-rule.html b/third_party/WebKit/LayoutTests/fast/multicol/resize-with-column-rule.html
new file mode 100644
index 0000000..0f568df
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/multicol/resize-with-column-rule.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<script src="../../resources/run-after-layout-and-paint.js"></script>
+<p>There should be two black vertical lines below.</p>
+<div id="multicol" style="columns:3; column-rule:2px solid; column-gap:2px; column-fill:auto; width:304px; height:100px;">
+ <div style="height:300px; background:white;"></div>
+</div>
+<script>
+ runAfterLayoutAndPaint(function() {
+ document.getElementById("multicol").style.width = "604px";
+ }, true);
+</script>
diff --git a/third_party/WebKit/Source/core/layout/LayoutMultiColumnSet.cpp b/third_party/WebKit/Source/core/layout/LayoutMultiColumnSet.cpp
index 8d5cfab0..1ad819f 100644
--- a/third_party/WebKit/Source/core/layout/LayoutMultiColumnSet.cpp
+++ b/third_party/WebKit/Source/core/layout/LayoutMultiColumnSet.cpp
@@ -342,6 +342,20 @@
m_fragmentainerGroups.last().setLogicalBottomInFlowThread(offsetInFlowThread);
}
+void LayoutMultiColumnSet::styleDidChange(StyleDifference diff, const ComputedStyle* oldStyle)
+{
+ LayoutBlockFlow::styleDidChange(diff, oldStyle);
+
+ // column-rule is specified on the parent (the multicol container) of this object, but it's the
+ // column sets that are in charge of painting them. A column rule is pretty much like any other
+ // box decoration, like borders. We need to say that we have box decorations here, so that the
+ // columnn set is invalidated when it gets laid out. We cannot check here whether the multicol
+ // container actually has a visible column rule or not, because we may not have been inserted
+ // into the tree yet. Painting a column set is cheap anyway, because the only thing it can
+ // paint is the column rule, while actual multicol content is handled by the flow thread.
+ setHasBoxDecorationBackground(true);
+}
+
void LayoutMultiColumnSet::layout()
{
if (recalculateColumnHeight())
diff --git a/third_party/WebKit/Source/core/layout/LayoutMultiColumnSet.h b/third_party/WebKit/Source/core/layout/LayoutMultiColumnSet.h
index 2274ab5..a67b9e0 100644
--- a/third_party/WebKit/Source/core/layout/LayoutMultiColumnSet.h
+++ b/third_party/WebKit/Source/core/layout/LayoutMultiColumnSet.h
@@ -148,6 +148,7 @@
// set or spanner.
void endFlow(LayoutUnit offsetInFlowThread);
+ void styleDidChange(StyleDifference, const ComputedStyle* oldStyle) override;
void layout() override;
void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const final;
