W3C home > Mailing lists > Public > www-style@w3.org > April 2013

Re: [css21] What's the used value of left/right when overconstrained in relpos?

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 29 Apr 2013 16:24:14 -0400
Message-ID: <4d256d7c212ab719c442b041cc139efd.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style list" <www-style@w3.org>

Le Lun 29 avril 2013 14:11, Tab Atkins Jr. a écrit :
> When doing relpos layout, if both 'left' and 'right' are non-auto, the
> layout is overconstrained.  CSS 2.1 says to ignore the value
> left/right (depending on document direction), and treat it as being
> the negation of the other.
>
> But what does this actually mean?
>
> Specifically, CSS 2.1 says this:
>
> "If neither 'left' nor 'right' is 'auto', the position is
> over-constrained, and one of them has to be ignored. If the
> 'direction' property of the containing block is 'ltr', the value of
> 'left' wins and 'right' becomes -'left'. If 'direction' of the
> containing block is 'rtl', 'right' wins and 'left' is ignored."


http://www.w3.org/TR/CSS21/visuren.html#relative-positioning

>
> No mention of used values is made here, so it's unclear exactly what
> it means to "become -'left'", or "[be] ignored".
>
> We had a long-open bug (from 2009) on this issue in WebKit, and are
> now trying to fix it in Blink
> <https://chromiumcodereview.appspot.com/13871003/>.  The engineer
> writing up the patch is assuming that the text above actually means
> that the used value for left/right is the value you solve for.  That
> is, in a situation like this:
>
> .item {
>   position: relative;
>   left: 100px;
>   right: 20px;
> }
>
> ...the used value for 'right' would be "-100px".



In that small example, I think the used value for 'right' is -100px and is
ignored so that only the used 'left' value is being applied, so that only
the used 'left' value has an offsetting effect. In that small example, I
think the computed value for 'right' is 20px. If an .item element had a
positioned child with 'right: inherit', then the specified 'right' value
would be 20px and not -100px.

Btw, we have this test:

http://test.csswg.org/suites/css2.1/nightly-unstable/html4/position-relative-009.htm

> (And that's what
> would be returned by getComputedStyle().right.)
>
> Note that the spec *does* require this behavior for top/bottom, using
> the proper words.  When overconstrained, the used value of bottom
> explicitly becomes the negation of 'top'.
>
> However, Chrome, FF, and IE all return "20px" for 'right' in the above
> example. :/  What's the right behavior?


"(...) the used values are always: left = -right "

Used 'right' value should be -100px and then should be ignored. As far as
used value is involved, we want 'left' to win in such situation and right
to be ignored. If both 'left' and 'right' are applied and if 'left' used
value == minus 'right' used value, then the element would not be offset,
would not horizontally move.

> (Also, the spec is similarly undefined when talking about abspos
> overconstrained situations.


As far as I can say, abspos overconstrained situations defines how to get
the used value in
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
and
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height


"
If the values are over-constrained, ignore the value for 'left' (in case
the 'direction' property of the containing block is 'rtl') or 'right' (in
case 'direction' is 'ltr') and solve for that value.
"

The above procedure would be for solving/determining the used 'left'
value; the computed 'left' value would remain what is the specified value.

The 'ignore the value' instruction is for establishing the used value
inside the equation.

Over-constrained situations necessarly means/implies that you must ignore
at least one specified value in order to satisfy the given equations in
§10.3.7 and §10.6.4 and in §9.4.3.



> Would be nice to get an answer for that
> as well, hopefully consistent with this one.)
>
> ~TJ

For rtl, we have:

http://test.csswg.org/suites/css2.1/nightly-unstable/html4/position-relative-010.htm

Gérard
-- 
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
Received on Monday, 29 April 2013 20:24:46 UTC

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