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).


> 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


CSS 2.1 Test suite RC6, March 23rd 2011

Contributions to CSS 2.1 test suite

Web authors' contributions to CSS 2.1 test suite
Received on Tuesday, 10 July 2012 14:58:12 UTC

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