Re: Should filters on the root element affect the entire canvas?

On Wed, Feb 11, 2015 at 9:08 AM, Rik Cabanier <cabanier@gmail.com> wrote:
> On Tue, Feb 10, 2015 at 12:25 PM, Boris Zbarsky <bzbarsky@mit.edu> wrote:
>> Consider this document:
>>
>> <!DOCTYPE html>
>> <html style="filter: invert(90%);">
>> Some text
>> </html>
>>
>> Note that in this document the <html> has a transparent background but a
>> black text color by default in browsers.  The canvas has a white background
>> by default in browsers.
>>
>> The spec text says:
>>
>>   Conceptually, any parts of the drawing are effected by filter
>>   operations. This includes any content, background, borders, text
>>   decoration, outline and visible scrolling mechanism of the element
>>   to which the filter is applied, and those of its descendants.
>>
>> The canvas background is not part of the "element to which the filter is
>> applied", so per the current spec this document should render with light
>> gray text on a white background.
>>
>> This is what Firefox does.  Chrome instead seems to make the canvas
>> background black.
>>
>> Which behavior do we want here?  What about other cases of filters being
>> applied to the root element?  Do we want to effectively propagate these
>> filters to the viewport, like CSS does with 'overflow' and backgrounds on
>> the root element?
>
>
> We ran into the same issue with 'mix-blend-mode' on the root element.
> Tab updated CSS Color level 4 to include the following:
>
> The default background of the root element must be transparent. The default
> color of the canvas (the surface on which the document is painted) is
> UA-dependent, but is recommended to be white, especially if the above
> colorrules are used.
>
> So, Firefox is following the spec and Chrome should change its behavior.

Correct. The filter should just invert the text to light gray, and
paint it on a white canvas. If the author wants a nearly-black
background, they should set background:white on the <html>.

~TJ

Received on Tuesday, 10 February 2015 22:43:09 UTC