Re: Expected behavior of background-clip property on the html element?

On Jan 12, 2011, at 5:01 PM, Alan Gresley wrote:

> Have another look.
> 
> <http://css-class.com/test/css/backgrounds/background-clip-html-body.htm>
> 
> This time I have changed the <body> background-color to lime. I have not declared background-color white anywhere (this background-color is the default background setting of the UA) but this is seen in Opera 11 and Safari 5. Opera 11 clips the background to the <html> content-box. IE9 I believe does it correctly, please see screenshot[1]. I would be interested in know Gecko handles this test.

Opera's behaviour doesn't make any sense... it clips the background on the root element, to the width of the border – change the width of the border and the clipping changes...
And if you give the root element a margin, then Opera doesn't apply any clipping, see my earlier testcase:
http://dev.l-c-n.com/CSS3_border-background/background-clip_root-element.html
> 
> There may be a spec but we are dealing with rendering engines that create a tree which stems from some root.
> 
>  | If the root's ‘background-color’ value is ‘transparent’, the canvas's
>  | background color is UA dependent. The root element does not paint this
>  | background again, i.e., the used value of its background is transparent.
> 
> 
> The UA dependent background-color is the white (this background-color is the default background setting of the UA) that the test show. I can only assume that in Opera 11 and Safari 5 that the root element is not <html>. This beckons the questions like, is there an initial block formatting context.

You're misunderstanding something I suspect. In both Safari/Chrome and Opera the background applied to the root element is propagated to the canvas and then clipped (completely erroneously in Opera, sort-of-correctly in WebKit [*] - although it shouldn't clip at all.)
And I don't see how you conclude from that in Opera and WebKit, the root element is not <html> in those testcases.

A Gecko 2.0b nightly build ignores the background-clip property on the root element, jst as IE 9.

[*] sort-of-correctly because it works as on any div or other element... Opera doesn't clip to the content box at all in the above testcase

Received on Wednesday, 12 January 2011 08:58:42 UTC