Outline paint order issue. In Blink, outlines on regular column content (but not on spanners) are painted on top of the outlines of the multicol container. This is the opposite of what we do in other situations, and it makes the ref in the test render differently.

Looks like it happens because of the paint layer that we establish for the flow thread. Putting position:relative on a child of a regular (non-multicol) container has the same effect.

We're very incompatible with Gecko for outline paint order. Maybe that's what we need to address.

Green square in Gecko, red square in Blink.
<div style="width:100px; outline:solid red;">
  <div style="height:100px; outline:solid green;"></div>
</div>

Not sure if this should be treated as a multicol issue at all.

Maybe this should be treated as a dup of issue 577282?

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

commit 828b621cc379a0301d62fc6039958da24d1207ee
Author: Morten Stenshorne <mstensho@chromium.org>
Date: Mon Dec 31 11:11:51 2018

Dedicated bug for multicol-span-all-005.html

This is an outline paint order issue.

TBR=chrishtr@chromium.org

Bug:  915204 
Change-Id: I604b741d18b8c4806ac4020d97ce2b2478ef10e2
Reviewed-on: https://chromium-review.googlesource.com/c/1392184
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#619304}
[modify] https://crrev.com/828b621cc379a0301d62fc6039958da24d1207ee/third_party/blink/web_tests/TestExpectations

I think we can merge the bugs if we want the Gecko behavior, then we'll change the outline paint order in common cases, following the spec about paint order of block-level outlines. Otherwise we'd better track multicol and table row separately as different special cases. I'm not sure but inclined to the former.

Is the spec clear enough, and does Gecko already do it right? Then, are there any good reasons for us not to do the same?

The spec (https://www.w3.org/TR/CSS21/zindex.html) seems clear enough.

It gives two implementation choices:

Choice 1:
7. Paint in tree order
   7.3: For in-flow, non-positioned, block-level descendants, block-level descendants, outlines are painted in tree order (ancestors before descendants);
   7.2.2 and 7.3: In-flow, non-positioned outlines under inline boxes are painted before the containing block's outlines.

Choice 2 (recommended):
10. Paint outlines from a stacking context after painting all other things of the stacking context. The spec doesn't say about the order, but I guess the order is still described in 7. The difference from choice 1 seems that outlines of in-flow elements will be painted above backgrounds of positioned elements.

Based on test results of https://jsbin.com/wucomug, neither blink nor Gecko uses choice 2. Blink is inconsistent in different cases. Gecko always paints ancestor outlines before descendant outlines, following the spec for block-level elements, but not for inline-level elements.

I think we should at least make order of block-level outlines consistent. I don't see any good reason not to follow the spec. Not so good reasons might be backward compatibility and risk of new bugs (e.g. we need to be careful about compositing which may create decoration layer for outlines [1]).

[1] https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/paint/compositing/composited_layer_mapping.h?rcl=bd08adef4416310ef4227216d8bf3007eeaf0223&l=637

I'll merge the bugs. Split again if it turns out that this wasn't the right thing to do. :)

 Issue 918765  has been merged into this issue.