W3C home > Mailing lists > Public > public-css-testsuite@w3.org > October 2012

Re: New tests submission for css3 background-clip/-origin/-size

From: Gérard Talbot <css21testsuite@gtalbot.org>
Date: Sat, 13 Oct 2012 16:36:20 -0400
Message-ID: <be2fc8407b248c350d02792c7b8458fd.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Zhang, Zhiqiang" <zhiqiang.zhang@intel.com>
Cc: "public-css-testsuite@w3.org" <public-css-testsuite@w3.org>, "Christensen, Kenneth" <kenneth.christensen@intel.com>, "Zhang, Haili" <haili.zhang@intel.com>, "Yu, Ling L" <ling.l.yu@intel.com>, "Yang, Lei A" <lei.a.yang@intel.com>

Le Sam 13 octobre 2012 5:09, Zhang, Zhiqiang a écrit :
> Hello,
>
> I would like to submit the following tests:
> https://hg.csswg.org/test/rev/e96e00bc2454
>
> We are verifying the conformance with the following sections of
> css3-background spec:
> http://www.w3.org/TR/css3-background/#the-background-clip
> http://www.w3.org/TR/css3-background/#the-background-origin
> http://www.w3.org/TR/css3-background/#the-background-size
> http://www.w3.org/TR/css3-background/#the-background
> http://www.w3.org/TR/css3-background/#values
>
> Review is appreciated:
> https://test.csswg.org/shepherd/search/testcase/author/intel/status/submitted/
>
> Thanks,
> Zhiqiang


Zhiqiang,

Here's a preliminary review of 1 test.

http://test.csswg.org/source/contributors/intel/submitted/css3-background/background-334.html

1-
a)
The test is obviously about background shorthand: so the title element
should say so.

b)
"
For specifications other than CSS 2.1, you can include the module name
somewhere before the colon, like “CSS Selectors Test:” or “CSS Test
(Selectors):”. Do not include the module version number, since the test
might get reused for the next version.
"
http://wiki.csswg.org/test/format#title-element

So,
<title>CSS Test (Backgrounds and Borders): (...)</title>
or
<title>CSS Backgrounds and Borders Test: (...)</title>

are okay.

2-
The test design and assert text suggest that background-size '100% auto'
will imply a rescale of the background-image to fill the background
area.

3-
            top: 1px;
            left: 1px;

I wondered why top and left 1px.

            width: 158px;
            height: 158px;
            background: red;
        }
        #test {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
            padding: 25px;
            border: 5px dotted #000000;

The overlapping #test generates a 160px wide and 160px tall CSS box
while the red-overlapped #ref generates a 158px by 158px box; the only
possible reason I can imagine would be to counter/take into account
anti-aliasing.

4-
The code (CSS declarations and markup structure) could be made more
compact without affecting the goal of the test: see

http://www.gtalbot.org/BrowserBugsSection/review/background-334-review.html

uses 2 <div>s, 2 rules and 10 declarations.

5-
Generally speaking, absolute positioning with 'top: auto' and 'left:
auto' (implicit on #container) is to be avoided because of multiple
renderings allowed (when determining the static position and if margin
collapsing occurs) by CSS:

"
But rather than actually calculating the dimensions of that hypothetical
box, user agents are free to make a guess at its probable position.
"
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

On the other hand, top: auto and left: auto for relatively positioned
element is preferred because more reliable, trustworthy.

6-
It is preferable (although optional) to list declarations in
alphabetical order. This helps review.

7-
<style type="text/css">
is not a mistake but isn't needed for HTML5.

Trailing / at closing tag are not necessary for HTML5.

You are encouraged to always use/reuse the templates available at
http://wiki.csswg.org/test/format#template-for-new-tests




Additional note
---------------

I'm not perfectly familiar with CSS 3 background but, after reading, I
would assume that

background: #CCC url("support/60x60-green.png") / 100% auto no-repeat;

would do and should do the same (and should be parsed exactly) as

background: #CCC url("support/60x60-green.png") top left / 100% auto
no-repeat;

( or as
background: #CCC url("support/60x60-green.png") 0% 0% / 100% auto
no-repeat;
)

but it does not in Chrome 22 and Opera 12.02. I'm not sure why.

"
A double bar (||) separates two or more options: one or more of them
must occur, in any order.
"
http://www.w3.org/TR/CSS21/about.html#property-defs

and the syntax is:

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style>
|| <attachment> || <box>{1,2} || <'background-color'>

Since top left can be translated into 0% 0% (which are the initial
values), then it should be the same.

Gérard
-- 
Contributions to the CSS 2.1 test suite:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

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

CSS 2.1 test suite harness:
http://test.csswg.org/harness/

Contributing to to CSS 2.1 test suite:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
Received on Saturday, 13 October 2012 20:36:53 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Saturday, 13 October 2012 20:36:56 GMT