Steps to reproduce:

I tried to use the CSS Counter property to format the numbering of a nested ordered list. However, because the order list had slightly improper formatting, the numbering is wrong.

Because the nested OL is generated in a content-editable <div>, the ordered list is not properly formatted. The sublist <ol> are direct children of the parent <ol>, instead of being of sublists being children of <li> elements.
Proper formatting of the list would appear as follows:
   <ol>
     <li>item
       <ol>
         <li>subitem</li>
       </ol>
     </li>
   </ol>

The improper html generated from manipulating lists in a content-editable div is as follows:

<ol>
   <li>item</li>
   <ol>
     <li>subitem</li>
   </ol>
</ol>


ACTUAL RESULTS

In poorly formatted lists, the CSS counter does coincide with the expected list numeration.

(1) expected value: (1)
      (1.1) expected value: (1.1)
      (1.2) expected value: (1.2)
             (1.2.1) expected value: (1.2.1)
      (1.2.2) WRONG VALUE. expected value: (1.3)
      (1.2.3) WRONG VALUE. expected value: (1.4)
(1.3) WRONG VALUE. expected value: (2)

EXPLANATION

This result happens because the scope of CSS counter-reset affects both descendant elements and subsequent sibling elements. The sublist counter-reset scope takes precedence over higher-level counter-reset.

SCOPE OF PROBLEM

This numeration issue doesn't only affect invalid HTML lists. It would also affect any HTML representation of nested elements. I want to create a visual representation of set theory by using nested div elements that are labeled with counter-reset values.

<div id="whole set"> 1
    <div id="first subset">  1.1
       <div id="first sub-subset">  1.1.1
</div>
    <div>
    <div id="second subset">1.1.2</div>
</div>