W3C home > Mailing lists > Public > www-style@w3.org > March 2015

Re: [css3-background][css-writing-modes] background-position:bottom to root elements

From: Gérard Talbot <www-style@gtalbot.org>
Date: Thu, 26 Mar 2015 18:55:01 -0400
To: Koji Ishii <kojiishi@gmail.com>
Cc: W3C www-style mailing list <www-style@w3.org>
Message-ID: <24fee5d3c4ee882b9f76b71ff68c1b1e@gtalbot.org>
Le 2015-03-26 17:43, Gérard Talbot a écrit :
> Le 2015-03-26 09:55, Koji Ishii a écrit :
>> Gérard and I are a little in trouble understanding expected behavior,
>> appreciate advices.
>> First question is hopefully easy; see this test file[1]. I suppose, in
>> all browsers, you’ll see a cat NOT touching the bottom of the window.
>> Is this the expected behavior? I read “The Canvas Background and the
>> Root Element”[2], and it reads to me that this is correct, but
>> experts’ confirmation appreciated.
>> The second question is when "writing-mode: vertical-rl" is applied to
>> this document.
>> My understanding is, given the definition above, “background-position:
>> right” touches the right edge of the window, while “left” does not.
>> And if “writing-mode: vertical-lr”, “left” touches the left edge,
>> while “right” does not.
>> Am I reading the Background spec correctly?
>> [1] http://jsbin.com/vuzajo/1/edit?html,css,output
>> [2] http://dev.w3.org/csswg/css-backgrounds-3/#root-background
>> /koji
> Koji,
> I propose these 3 interactive DHTML demos to help you figure out
> matters pertaining to writing-mode and background-position:
> http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/BackgroundPosition-horizontal-tb-dhtml.html
> http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/BackgroundPosition-vertical-rl-dhtml.html
> http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/BackgroundPosition-vertical-lr-dhtml.html
> Note that, when you set height or width to 100%, this is the content
> area of <html> element. Since I wanted to create a border around the
> <html> element, then this will create a vertical or horizontal
> scrollbar.

You can turn the scrollbar(s) off by dynamically setting 'overflow: 
hidden' . In all fairness, it's better to have/see the scrollbars 
(rather than hiding them) because their presence correspond exactly to 
how the layout (dimension, positioning) should be rendered.

> Also, note that it seems impossible to dynamically modify writing-mode
> in Chrome and in Firefox. At least, I could not figure out how.

Fixed now:


The other 3 interactive DHTML demos are probably more useful as you can 
load 2 or 3 of them in separate tabs or/and into different brwosers and 
then compare layout.

Received on Thursday, 26 March 2015 22:55:32 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:53 UTC