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

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

From: Koji Ishii <kojiishi@gmail.com>
Date: Fri, 27 Mar 2015 11:14:52 +0900
Message-ID: <CAN9ydbX3pc4+f+tMqHcx5WS7rSNk2TBMRtKkw8tJiWtF8fVbQA@mail.gmail.com>
To: Gérard Talbot <www-style@gtalbot.org>
Cc: W3C www-style mailing list <www-style@w3.org>
Thank you, I think I now understand. My problems were:
 - Wasn't aware the diff of background painting area and background
positioning area
 - Somehow misunderstood that height: 100% (or width: 100% in vertical
flow) doesn't work

Thank you for your support as always.

On Fri, Mar 27, 2015 at 7:55 AM, Gérard Talbot <www-style@gtalbot.org>
wrote:

> 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:
>
> http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/
> BackgroundPosition-writing-modes-dhtml.html
>
> 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.
>
> Gérard
>
Received on Friday, 27 March 2015 02:15:23 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC