Yves Forkl wrote:
> XXE 3.8.1 seems to behave in a strange manner with respect to the 
> counter-reset CSS instruction as soon as you try to reset several 
> counters at once.
> 
> Say I have 3 element types A, B and C (whose instances are siblings) 
> with counters named as "...-num" for each of them, like this:
> 
> A:before
> {
>   display: block;
>   counter-increment: A-num;
>   content: element-local-name() " " counter(A-num, decimal);
> }
> 
> B:before
> {
>   display: block;
>   counter-increment: B-num;
>   content: element-local-name() " " counter(B-num, decimal);
> }
> 
> C:before
> {
>   display: block;
>   counter-increment: C-num;
>   content: element-local-name() " " counter(C-num, decimal);
> }
> 
> As the A, B and C instances rather reflect a hierarchy for me (but need 
> to stay siblings), I want to reset the counter of C in B and the 
> counters of B and C in A. So I am trying to accomplish that last task 
> using:
> 
> A:before
> {
>   display: block;
>   counter-increment: A-num;
>   content: element-local-name() " " counter(A-num, decimal);
>   counter-reset: B-num;
>   counter-reset: C-num;
> }
> 
> Strangely enough, it is always only the second of both reset-counter 
> instructions that will take effect while the other one is ignored 
> (proved by reversing their order). Same result when the selector reads 
> just "A".
> 
> The only workaround seems to be to spread the two counter-reset 
> instructions over several CSS rules, as the following achieves the 
> desired result of resetting both counters (no matter which counter-reset 
> instruction is placed with which of both rules):
> 
> A:before
> {
>   display: block;
>   counter-increment: A-num;
>   content: element-local-name() " " counter(A-num, decimal);
>   counter-reset: B-num;
> }
> 
> A
> {
>   display: block;
>   counter-reset: C-num;
> }
> 
> Strange, isn't it?

--> Not really. It is probably a bug, but we cannot fix it due to the 
way the CSS engine has been implemented.

A rule like:

foo {
    bar: 1;
    bar: 2;
    bar: 3;
}

is equivalent to:

foo {
    bar: 3;
}

because a rule is implemented as a set of properties (keyed by the name 
of the property) and not as a list of properties.



--> Now the actual workaround is easy, clean and conforming to the CSS 
standard:

A:before
{
   display: block;
   counter-increment: A-num;
   content: element-local-name() " " counter(A-num, decimal);
   counter-reset: B-num C-num; /*Reset *two* counters at once*/
}

I've not tried it but I don't see why it wouldn't work.

Reply via email to