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

Issue 850872 link

Starred by 2 users

Issue metadata

Status: ExternalDependency
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: 2019-03-01
OS: Windows
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Fallback rendering for OBJECT exposes UA shadow implementation through SLOT inheritance

Reported by ar...@anonymousads.com, Jun 8 2018

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0

Steps to reproduce the problem:
Visit http://acceptable.a-ads.com/1

What is the expected behavior?
<div class="text-container customizable-background"></div> must have height 100% (inherited)

What went wrong?
height:inherited is not applied.

All other web browsers, including previous Google Chrome versions render this element correctly.

Did this work before? Yes 66

Does this work in other browsers? Yes

Chrome version: 67.0.3396.79  Channel: stable
OS Version: 10.0
Flash Version: N/A
 
3.html
18.2 KB View Download

Comment 1 by woxxom@gmail.com, Jun 8 2018

Bisected to r540772 = 822be90274eab3c047fea8cf2d7dd35cd5d0db49
"Enable slot-in-flat-tree flag in stable."
Landed in 67.0.3362.0

Confirmed by disabling the CL via command line and observing the bug is gone:
--disable-blink-features=SlotInFlatTree


Comment 2 Deleted

Yeah, this is because <object> in Blink uses a UA shadow root. Since <slot> is part of the flat tree now, the <div> inherits from the <slot> instead of the <object>.

I wonder if UA ShadowRoots should have:

  slot { all: inherit; display: contents; }

Specifically. Otherwise they become observable.
Cc: futhark@chromium.org
Status: Available (was: Unconfirmed)
+rune since he did the <slot> in flat tree work and may have opinions in #3.
I guess you could still observe it with `display: inherit`... Oh well.
Also tracked by https://github.com/whatwg/html/issues/3748 (thanks Emilio!).
<meter> with -webkit-appearance:none has a slot wrapped in a div in Chrome.

This does not give a green border on the first one even with SlotInFlatTree disabled.

<!DOCTYPE html>
<p>Both borders green?</p>
<meter style="border-color:green; -webkit-appearance:none">
  <div style="border-style:solid; border-width:10px; border-color:inherit">Meter</div>
  <div style="border-style:solid; border-width:10px; border-color:green">Meter</div>
</meter>

The other element in Chrome I found with slot not as a direct child of the UA root is <marquee>.

Comment 8 by hayato@chromium.org, Jun 11 2018

Owner: kochi@chromium.org
Status: Assigned (was: Available)
slot-in-flat-tree is not a direct cause. It just reveals the fundamental issue, I think.

kochi@, could you work on that? I think we should be more careful to convert UA shadow root from v0 to v1, basically.

Comment 9 by hayato@chromium.org, Jun 11 2018

If we can't have any workaround in each element's implementation of Blink, we might want to discuss new primitive or something in Web Standard discussion so that using UA shadow root will not be observable from outside.

Comment 10 by kochi@chromium.org, Jun 11 2018

Taking this.

When V0 was used for UA, its <content> didn't participate in styling
as well as <slot> before slot-in-flat-tree, so spec-compliant <slot>
just revealed the underlying issue, as Hayato said.

Here's the list of UA shadow elements
https://docs.google.com/spreadsheets/d/1cDR3wIHbyyu3E3rddwAkUIkFS_pCNYYE2CkGJ-du_eY/edit#gid=0

Let me try the workaround with 'display: inherit' first and consider options
for <meter> and <marquee>.

Comment 11 by phistuck@gmail.com, Jun 11 2018

#10 - I think I saw that <use> (SVG) also uses user agent shadow DOM. Does this list intentionally only include HTML elements?

Comment 12 Deleted

Comment 13 by kochi@chromium.org, Jun 11 2018

#c11 see also https://github.com/w3c/svgwg/issues/363 Blink uses v1 closed shadow for svg <use> element.

Comment 14 by kochi@chromium.org, Jun 20 2018

Status: Started (was: Assigned)
Without waiting for the upstream spec issue (whatwg/html#3748) to resolve,
Rune's idea (https://github.com/whatwg/html/issues/3748#issuecomment-396143618)
to inherit from shadow host for UA shadow assigned nodes could fix this issue,
I'll try that way.
Cc: kochi@chromium.org
Owner: ----
Status: Available (was: Started)
Status: ExternalDependency (was: Available)
This is relying on resolving the github issue in #c14.
NextAction: 2019-03-01
Summary: Fallback rendering for OBJECT exposes UA shadow implementation through SLOT inheritance (was: [REGRESSION] CSS styling is not applied correctly in Chrome/Chromium 67.0.3396.79)

Sign in to add a comment