W3C home > Mailing lists > Public > www-style@w3.org > July 2012

Re: [CSS21] Used value versus specified and computed value (position relative)

From: Gérard Talbot <www-style@gtalbot.org>
Date: Tue, 10 Jul 2012 10:57:44 -0400
Message-ID: <ac13cab3ade01d0b87bac3453bb45ffa.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Anton Prowse" <prowse@moonhenge.net>
Cc: "W3C www-style mailing list" <www-style@w3.org>

Le Mar 10 juillet 2012 3:33, Anton Prowse a écrit :
> On 09/07/2012 21:20, "Gérard Talbot" wrote:
>> Hello,
>>
>> I'm struggling a bit with the understanding of following test:
>>
>> http://test.csswg.org/suites/css2.1/20110323/html4/relpos-calcs-001.htm
>>
>> What is inherited is the computed value, not the used value.
>>
>> So,
>>
>> line 25  top: inherit; /* using inheritance to test computed vs. used */
>>
>> top is 'auto'; top is not 50% and it is not 60px.
>>
>> So,
>>
>> 1- I do not see the purpose of the div.control in that test
>>
>> 2- div.inner's top property value inherited value is 'auto' which is
>> resolved as 0; it is not 50%. div.inner's top property used value is 0,
>> not 60px.
>
> If a UA incorrectly computed 'top' on div.inner to -50% (the used value
> of that property on the parent) instead of 'auto' (the computed value of
> that property on the parent) then that div would be positioned higher up
> the canvas and the red background of div.control would show.

Here's what I did. I set div.control's background color to orange (instead
of red) and then set div.inner's top to -50%. I see red (from div.outer);
I do not see orange (which would be from div.control).

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/relpos-calcs-001-Anton-P.html


> A small nit about this test: div.container has been given a 'margin-top'
> of '-60px', which is done purely for the aesthetic purpose of having the
> square appear directly under the paragraph without a gap, but this
> introduces the cognitive overhead of having to figure out whether or not
> it's purely aesthetic in the first place.

It's not purely aesthetic. You want the test (a guideline) to always start
with the pass/fail conditions sentence. (Ideally, you want the layout of
what's been tested to be consistently at the same spot/area: below the
pass/fail sentence, starting at the left side.) Then you want to create a
layout that can be easily reftested and a layout which can easily reuse
the same reftest.

E.g. 67 tests have the exact expected rendering layout and using the same
reftest:

http://test.csswg.org/shepherd/search/testcase/spec/CSS21/content/ref-filled-green-100px-square.xht/

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 Tuesday, 10 July 2012 14:58:12 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:56 GMT