- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 24 Jan 2012 10:54:01 -0800
- To: Sylvain Galineau <sylvaing@microsoft.com>
- Cc: Brian Manthos <brianman@microsoft.com>, "L. David Baron" <dbaron@dbaron.org>, www-style list <www-style@w3.org>, fantasai <fantasai@inkedblade.net>
On Tue, Jan 24, 2012 at 9:03 AM, Sylvain Galineau
<sylvaing@microsoft.com> wrote:
> [Tab Atkins Jr.:]
>> On Tue, Jan 24, 2012 at 12:29 AM, Sylvain Galineau
>> <sylvaing@microsoft.com> wrote:
>> > [Tab Atkins Jr.:]
>> >> On Mon, Jan 23, 2012 at 9:34 PM, Sylvain Galineau
>> >> <sylvaing@microsoft.com>
>> >> wrote:
>> >> > I am referring to the pattern in Brian’s email. I think many folks
>> >> > will
>> >> expect an expression like calc(100% -5px) to resolve at compute time
>> >> in background-position, just like it would when in width.
>> >>
>> >> Did you mean something else? Percentages do *not* resolve at
>> >> compute-time in either background-position or width. They can't -
>> >> they rely on layout info.
>> >
>> > That's simply not always true. If your containing block has a fixed
>> > width then width:50% will compute to half that width. (So will
>> calc(50%), by your own definition).
>>
>> Yes, of course. You can't *always* do that, though, so the value as a
>> whole is defined to resolve at used-value time. Look, here's the Computed
>> Value line from CSS 2.1:
>>
>> Computed value: the percentage or 'auto' as specified or the absolute
>> length
>>
>> Percentages are "as specified" in the computed value. They're not
>> resolved into a length. So a calc() expression containing a percentage
>> must *also* remain as specified at computed-value time.
>
> Thank you, Captain Obvious! No, really, even I know that...:)
>
> Again, I am referring to Brian's example which uses a fixed width
> and height. In that case, getComputedStyle() on a width:50% child
> will resolve to a 100px length across browsers.
getComputedStyle() does *not* return the computed style for width. It
returns the used value. (Damn legacy APIs!)
> Likewise,
> width:calc(50% + 5px) can also be computed. Same for top, right,
> bottom, left... Thus Brian's expectation of what the exact same expression
> would compute to in the background-position case is imo consistent i.e.
> 195px is the response I would most expect to hear from a random population
> asked what the horizontal offset would be in this case.
>
> If that same expression, applied in the same horizontal dimension, yields
> something like 95px instead then I'm reasonably confident 'intuitive' is
> not going to be the first word that comes to mind.
'width' doesn't have the consistency problem. There's no issue with
width. <position> is the *only* place in CSS where this problem
(percentages treated differently than equivalent lengths) crops up, so
attempting to reason from 'width' isn't very useful.
>>> I also don’t know anyone who has any use for writing calc(50%) instead
>>> of 50% so it may not be so obvious to people that the two are meant to
>>> be equivalent. (Though I agree they should be)
>>
>> It appears you are being inconsistent. Let me quote the example we're
>> talking about again, from Brian's earlier message:
>>
>> Brian said:
>>> For the example
>>> Width: 200px;
>>> Height: 400px;
>>> Background-position: calc(100% - 5px) calc(100% - 10px);
>>> Background-repeat: no-repeat;
>>
>> For the rest of this email, let us assume that the background-image is
>> 100px by 100px.
>>
>> Now, first, let's assume that it instead had (1)"background-position:
>> 100% 100%". This would resolve at used-value time to
>> "background-position: 100px 300px", placing the image snug in the lower
>> right. This is intuitive and expected, as it's been the behavior since
>> 2.1.
>>
>> In your quote directly above, you said that you expect "X%" and "calc(X%)"
>> to be equivalent in behavior. I assume this means that if the above
>> example instead had (2)"background-position: calc(100%) calc(100%);", you
>> would expect it to resolve the same as the last paragraph, to "background-
>> position: 100px 300px;". Is this correct?
>> If not, please clarify your statements.
>>
>> You also stated that you expect most authors to come to the same
>> conclusions as Brian in this example. Brian stated that
>> (3)"background-position: calc(100% - 5px) calc(100% - 5px);" should
>> resolve to "background-position: 295px 395px;", 95px away from what
>> (1) resolves to.
>
> See above.
>
>>
>> David, on the other hand, asserts that (3) should resolve to
>> "background-position: 95px 295px;", so that the resolved values are 5px
>> less than what (1) resolves to.
>>
>> Based on your statements so far, you believe that (2) should resolve the
>> same as (1), but that adding "- 5px" to (2)'s value should *shift it by 95
>> pixels in the opposite direction*. What part of (3) causes the sudden
>> jump?
>
> We're not discussing what I believe. We're debating your claim that this is
> the intuitive behavior. I'm arguing it may not be so obvious outside the folks
> on this mailing list who think of this for a living. That is *very* different
> from arguing it's the wrong result.
It's important to know what you believe, so I know what I'm arguing
with you about. You didn't answer whether or not what I stated above
was a correct description of what you believe. I literally can't
discuss this further with you until I know your answers to the above.
I'll restate the questions more directly. Given the above example,
what do you believe the following should resolve to?
(1) background-position: 100% 100%;
(a) background-position: 100px 300px;
(b) background-position: 200px 400px;
(2) background-position: calc(100%) calc(100%);
(a) background-position: 100px 300px;
(b) background-position: 200px 400px;
(3) background-position: calc(100% - 5px) calc(100% - 5px);
(a) background-position: 95px 295px;
(b) background-position: 195px 395px;
Given your previous emails, it appears your answers are (1a), (2a),
and (3b). Is this correct or incorrect?
~TJ
Received on Tuesday, 24 January 2012 18:54:50 UTC