New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 874124 link

Starred by 10 users

Issue metadata

Status: Fixed
Owner:
Closed: Aug 31
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Bug



Sign in to add a comment

Multicol painting wide content should not clip to column

Project Member Reported by vmp...@chromium.org, Aug 14

Issue description

Consider:

<!doctype HTML>
<style>
#container {
  width: 200px;
  height: 150px;
  columns: 2;
  column-fill: balance;
  background: yellow;
}
#contained {
  width: 150px;
  height: 100px;
  background: blue;
  border: 5px solid red;
}
</style>

<div id="container">
  <div id="contained"></div>
  lorem ipsum dolor lorem ipsum dolor
  lorem ipsum dolor lorem ipsum dolor
  lorem ipsum dolor lorem ipsum dolor
</div>


According to https://www.w3.org/TR/css-multicol-1/#overflow:
"""
Except for cases where this would cause a column break, content that extends outside column boxes visibly overflows and is not clipped to the column box.
"""

What we get instead is a clipped div, see attached.
 
multicoloverflow.png
6.5 KB View Download
Project Member

Comment 1 by bugdroid1@chromium.org, Aug 27

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1

commit a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1
Author: Vladimir Levin <vmpstr@chromium.org>
Date: Mon Aug 27 18:18:54 2018

Expand multicol column clip to include column overflow.

This patch adds overflow to column fragment clips, since content
should be able to overflow the column.

This is a recent spec change, listed under
https://www.w3.org/TR/css-multicol-1/#changes-from-20110412

Previously, we were required to clip the way we used to
see https://www.w3.org/TR/2011/CR-css3-multicol-20110412/#overflow-inside-multicol-elements

This patch aligns us with the new behavior.

R=chrishtr@chromium.org

Bug:  874124 
Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel
Change-Id: I18399eed397482a13955bc5687c12560aa37fb38
Reviewed-on: https://chromium-review.googlesource.com/1175101
Commit-Queue: vmpstr <vmpstr@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#586319}
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/fast/multicol/balance-repeating-table-headers.html
[delete] https://crrev.com/229c8737a637b6d9b82e6fc2748c5574a16b27f1/third_party/WebKit/LayoutTests/fast/multicol/newmulticol/clipping-expected.html
[delete] https://crrev.com/229c8737a637b6d9b82e6fc2748c5574a16b27f1/third_party/WebKit/LayoutTests/fast/multicol/newmulticol/clipping.html
[delete] https://crrev.com/229c8737a637b6d9b82e6fc2748c5574a16b27f1/third_party/WebKit/LayoutTests/fast/multicol/span/adjacent-spanners-expected.html
[delete] https://crrev.com/229c8737a637b6d9b82e6fc2748c5574a16b27f1/third_party/WebKit/LayoutTests/fast/multicol/span/adjacent-spanners.html
[delete] https://crrev.com/229c8737a637b6d9b82e6fc2748c5574a16b27f1/third_party/WebKit/LayoutTests/fast/multicol/span/spanner-inline-block-expected.html
[delete] https://crrev.com/229c8737a637b6d9b82e6fc2748c5574a16b27f1/third_party/WebKit/LayoutTests/fast/multicol/span/spanner-inline-block.html
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/flag-specific/enable-slimming-paint-v2/paint/invalidation/multicol/multicol-with-overflowing-block-rl-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/paint/invalidation/multicol/multicol-as-paint-container-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/paint/invalidation/multicol/multicol-with-overflowing-block-rl-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/fast/forms/select/menulist-appearance-rtl-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/fast/text/letter-spacing-leading-and-trailing-expected.png
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/fragmentation/transformed-clip-before-second-column-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/images/rendering-broken-0px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/images/rendering-broken-0px-images-quirk-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/images/rendering-broken-10px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/images/rendering-broken-16px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/images/rendering-broken-1px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/images/rendering-broken-block-flow-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/images/rendering-broken-images-empty-alt-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/images/rendering-broken-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/paint/invalidation/table/single-line-cells-repeating-thead-break-inside-on-thead-only-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/printing/thead-under-multicol-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/exotic-color-space/images/rendering-broken-0px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/exotic-color-space/images/rendering-broken-0px-images-quirk-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/exotic-color-space/images/rendering-broken-10px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/exotic-color-space/images/rendering-broken-16px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/exotic-color-space/images/rendering-broken-1px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/exotic-color-space/images/rendering-broken-block-flow-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/exotic-color-space/images/rendering-broken-images-empty-alt-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/exotic-color-space/images/rendering-broken-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/images/rendering-broken-0px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/images/rendering-broken-0px-images-quirk-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/images/rendering-broken-10px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/images/rendering-broken-16px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/images/rendering-broken-1px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/images/rendering-broken-block-flow-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/images/rendering-broken-images-empty-alt-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/images/rendering-broken-images-expected.txt
[add] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/layout_ng_experimental/fragmentation/transformed-clip-before-second-column-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/linux/virtual/threaded/printing/thead-under-multicol-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/letter-spacing-leading-and-trailing-expected.png
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fragmentation/outline-crossing-columns-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac-mac10.10/virtual/layout_ng_experimental/fragmentation/outline-crossing-columns-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac-mac10.11/fragmentation/outline-crossing-columns-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac-mac10.11/virtual/layout_ng_experimental/fragmentation/outline-crossing-columns-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac-mac10.12/fast/text/letter-spacing-leading-and-trailing-expected.png
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac-mac10.12/paint/invalidation/multicol/multicol-with-block-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac-mac10.12/paint/invalidation/multicol/multicol-with-inline-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac-mac10.12/paint/invalidation/multicol/multicol-with-text-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/fast/text/letter-spacing-leading-and-trailing-expected.png
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/fragmentation/outline-crossing-columns-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/fragmentation/transformed-clip-before-second-column-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/images/rendering-broken-0px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/images/rendering-broken-0px-images-quirk-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/images/rendering-broken-10px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/images/rendering-broken-16px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/images/rendering-broken-1px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/images/rendering-broken-block-flow-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/images/rendering-broken-images-empty-alt-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/images/rendering-broken-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/multicol/multicol-with-block-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/multicol/multicol-with-inline-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/multicol/multicol-with-text-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/table/single-line-cells-repeating-thead-break-inside-on-thead-only-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/printing/thead-under-multicol-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/virtual/layout_ng_experimental/fragmentation/outline-crossing-columns-expected.txt
[add] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/mac/virtual/layout_ng_experimental/fragmentation/transformed-clip-before-second-column-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/fast/forms/select/menulist-appearance-rtl-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/fast/text/letter-spacing-leading-and-trailing-expected.png
[rename] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/fragmentation/outline-crossing-columns-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/fragmentation/transformed-clip-before-second-column-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/images/rendering-broken-0px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/images/rendering-broken-0px-images-quirk-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/images/rendering-broken-10px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/images/rendering-broken-16px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/images/rendering-broken-1px-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/images/rendering-broken-block-flow-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/images/rendering-broken-images-empty-alt-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/images/rendering-broken-images-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/paint/invalidation/table/single-line-cells-repeating-thead-break-inside-on-thead-only-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win/printing/thead-under-multicol-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win7/fast/forms/select/menulist-appearance-rtl-expected.txt
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/WebKit/LayoutTests/platform/win7/fast/text/letter-spacing-leading-and-trailing-expected.png
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/blink/renderer/core/layout/fragmentainer_iterator.cc
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/blink/renderer/core/layout/fragmentainer_iterator.h
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/blink/renderer/core/layout/layout_flow_thread.cc
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/blink/renderer/core/layout/multi_column_fragmentainer_group.cc
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/blink/renderer/core/layout/multi_column_fragmentainer_group.h
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/blink/renderer/core/paint/paint_layer_clipper_test.cc
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/blink/renderer/core/paint/paint_property_tree_builder_test.cc
[modify] https://crrev.com/a249ec0e1e4fd7eb5c85f13c63c925d78c5dcfd1/third_party/blink/renderer/core/paint/paint_property_tree_update_tests.cc

Status: Fixed (was: Assigned)
Project Member

Comment 3 by bugdroid1@chromium.org, Oct 8

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/6714262b74a4f0151115a8d1288290a6ee3d7c12

commit 6714262b74a4f0151115a8d1288290a6ee3d7c12
Author: Morten Stenshorne <mstensho@chromium.org>
Date: Mon Oct 08 11:28:51 2018

multicol-span-none-001.xht passes.

Corrected ref imported in
https://chromium-review.googlesource.com/c/chromium/src/+/1259943

Fixed by aethanyc@gmail.com in
https://bugzilla.mozilla.org/show_bug.cgi?id=1495875

TBR=vmpstr@chromium.org

Bug:  874124 
Change-Id: I58d7b2117217197b6240655a1d4b32b34b120895
Reviewed-on: https://chromium-review.googlesource.com/c/1268137
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#597529}
[modify] https://crrev.com/6714262b74a4f0151115a8d1288290a6ee3d7c12/third_party/WebKit/LayoutTests/TestExpectations

Cc: mstensho@chromium.org kkaluri@chromium.org rnimmagadda@chromium.org nyerramilli@chromium.org sdayala@chromium.org
 Issue 776051  has been merged into this issue.

Sign in to add a comment