vivliostyle/vivliostyle.js

CSS counter-reset works differently from browsers.

Closed this issue · 3 comments

yamahige commented

Describe the bug
when counter-reset in the top level of numbered list, Vivliostyle seems to keep the counter value from previous sibling, and create a new counter of the same name.
Browsers reset the counter value.

To Reproduce
Samples use counters() function.
https://vivliostyle.org/viewer/#src=https://gist.githubusercontent.com/yamahige/48634750245ca0d25afca97b26d4a5a7/raw/78debaef61085deb56e708769676c101c74950e8/list-counter-share.html

Expected behavior
I'm not sure with the counter-reset specifications...

Desktop (please complete the following information):

  • Browser: Chrome, Safari, Firefox, Edge
  • OS: macOS

Screenshots
Vivliostyle:
Vivliostyle
Chrome browser:
Chrome-browser
Safari:
Safari
Firefox:
Firefox
Edge:
Edge

yamahige commented

Additionally, behaves differently for counter-set. I'll open another issue for that.

MurakamiShinyu commented

The spec https://drafts.csswg.org/css2/#scope says:

The scope of a counter starts at the first element in the document that has a counter-reset for that counter and includes the element’s descendants and its following siblings with their descendants. However, it does not include any elements in the scope of a counter with the same name created by a counter-reset on a later sibling of the element or by a later counter-reset on the same element.

It seems that "However, ..." in this spec is not correctly implemented in Vivliostyle.js.