Add level number to test cases

test/test.html

@@ -8,7 +8,7 @@
 
     <link rel="stylesheet" href="http://hail2u.net/styles/natural.min.css">
 <style>
-.align {
+.align-3 {
   justify-self: safe;
   justify-content: unsafe;
   justify-items: self-start;
@@ -54,7 +54,7 @@
 }
 </style>
 <style>
-.background-4 {
+.backgrounds-4 {
   background-position-x: x-start;
   background-position-y: x-end;
   background-position-inline: y-start;
@@ -85,7 +85,7 @@
 }
 </style>
 <style>
-.break {
+.break-3 {
   break-after: auto;
   break-before: auto;
   break-inside: auto;
@@ -138,7 +138,7 @@
 }
 </style>
 <style>
-.compositing {
+.compositing-1 {
   mix-blend-mode: multiply;
   isolation: screen;
   background-blend-mode: overlay;
@@ -157,7 +157,7 @@
 }
 </style>
 <style>
-.content {
+.content-3 {
   string-set: open;
   bookmark-level: closed;
   bookmark-label: leader('.');
@@ -168,7 +168,7 @@
 }
 </style>
 <style>
-@counter-style counter-style {
+@counter-style counter-styles-3 {
   system: cyclic;
   negative: symbolic;
   prefix: additive;
@@ -180,9 +180,8 @@
   additive-symbols: auto;
   speak-as: auto;
 }
-</style>
-<style>
-.counter-style {
+
+.counter-styles-3 {
   display: arabic-indic;
   display: upper-armenian;
   display: lower-armenian;
@@ -221,17 +220,17 @@
 }
 </style>
 <style>
-.cssom-view {
-  scroll-behavior: smooth;
-}
-</style>
-<style>
-.cssom {
+.cssom-1 {
   display: auto;
 }
 </style>
 <style>
-.display {
+.cssom-view-1 {
+  scroll-behavior: smooth;
+}
+</style>
+<style>
+.display-3 {
   box-suppress: flow;
   display: flow-root;
   display: contents;
@@ -246,7 +245,7 @@
 }
 </style>
 <style>
-.filter-effects {
+.filter-effects-1 {
   flood-color: sRGB;
   flood-opacity: linearRGB;
   color-interpolation-filters: auto;
@@ -264,7 +263,7 @@
 }
 </style>
 <style>
-.flexbox {
+.flexbox-1 {
   flex-direction: flex;
   flex-wrap: inline-flex;
   flex-flow: row;
@@ -280,7 +279,7 @@
 }
 </style>
 <style>
-.fonts {
+.fonts-3 {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
   font-language-override: discretionary-ligatures;
@@ -319,8 +318,8 @@
 }
 </style>
 <style>
-.gcpm::footnote-call,
-.gcpm::footnote-marker {
+.gcpm-3::footnote-call,
+.gcpm-3::footnote-marker {
   running: footnote;
   footnote-display: line; 
   footnote-policy: element(header);
@@ -333,7 +332,7 @@
 }
 </style>
 <style>
-.grid {
+.grid-1 {
   grid-template-columns: grid;
   grid-template-rows: inline-grid;
   grid-template-areas: minmax(0, 1);
@@ -369,7 +368,7 @@
 }
 </style>
 <style>
-.inline {
+.inline-3 {
   dominant-baseline: mathematical;
   alignment-baseline: ideographic;
   baseline-shift: auto;
@@ -379,7 +378,7 @@
 }
 </style>
 <style>
-.line-grid {
+.line-grid-1 {
   line-grid: create;
   line-snap: block-start;
   box-snap: block-end;
@@ -388,12 +387,12 @@
 }
 </style>
 <style>
-.lists::marker {
+.lists-3::marker {
   display: auto;
 }
 </style>
 <style>
-.masking {
+.masking-1 {
   clip-path: fill-box;
   clip-rule: stroke-box;
   mask-image: view-box;
@@ -438,7 +437,7 @@
 }
 </style>
 <style>
-.overflow {
+.overflow-3 {
   max-lines: auto;
 }
 </style>
@@ -466,7 +465,7 @@
 }
 </style>
 <style>
-.positioning {
+.position-3 {
   offset-before: sticky;
   offset-end: auto;
   offset-after: auto;
@@ -474,14 +473,14 @@
 }
 </style>
 <style>
-.pseudo::inactive-selection,
-.pseudo::spelling-error,
-.pseudo::grammer-error {
+.pseudo-4::inactive-selection,
+.pseudo-4::spelling-error,
+.pseudo-4::grammer-error {
   display: auto;
 }
 </style>
 <style>
-.regions:region {
+.regions-1:region {
   flow-into: element;
   flow-from: content;
   region-fragment: break;
@@ -500,32 +499,31 @@
 }
 </style>
 <style>
-.ruby {
+.ruby-1 {
   ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;
   ruby-align: inter-character;
 }
 </style>
 <style>
-@scope .scoping {
+@scope .scoping-1 {
   div {
     display: auto;
   }
 }
-</style>
-<style>
-.scoping:scope-context div,
-.scoping:host,
-.scping:host(.foo),
-.scoping:host-context,
-.scoping::shadow,
-.scoping::content,
-.scoping /deep/ span {
+
+.scoping-1:scope-context div,
+.scoping-1:host,
+.scoping-1:host(.foo),
+.scoping-1:host-context,
+.scoping-1::shadow,
+.scoping-1::content,
+.scoping-1 /deep/ span {
   display: auto;
 }
 </style>
 <style>
-.scroll-snap {
+.scroll-snap-1 {
   scroll-snap-type: x;
   scroll-padding: y;
   scroll-snap-margin: mandatory;
@@ -554,23 +552,23 @@
 }
 </style>
 <style>
-.selectors3:target,
-.selectors3:enabled,
-.selectors3:disabled,
-.selectors3:checked,
-.selectors3:indeterminate,
-.selectors3:root,
-.selectors3:empty,
-.selectors3:last-child,
-.selectors3:last-of-type,
-.selectors3:first-of-type,
-.selectors3:only-child,
-.selectors3:only-of-type,
-.selectors3:nth-child(2n+1),
-.selectors3:nth-last-child(-n+2),
-.selectors3:nth-of-type(2n+1),
-.selectors3:nth-last-of-type(n+2),
-.selectors3:not([DISABLED]) {
+.selectors:target,
+.selectors:enabled,
+.selectors:disabled,
+.selectors:checked,
+.selectors:indeterminate,
+.selectors:root,
+.selectors:empty,
+.selectors:last-child,
+.selectors:last-of-type,
+.selectors:first-of-type,
+.selectors:only-child,
+.selectors:only-of-type,
+.selectors:nth-child(2n+1),
+.selectors:nth-last-child(-n+2),
+.selectors:nth-of-type(2n+1),
+.selectors:nth-last-of-type(n+2),
+.selectors:not([DISABLED]) {
   display: auto;
 }
 </style>
@@ -615,7 +613,7 @@
 }
 </style>
 <style>
-.shapes {
+.shapes-1 {
   shape-outside: margin-box;
   shape-image-threshold: inset(50% 50% 50% 50%);
   shape-margin: circle(100px 50px 100px);
@@ -624,7 +622,7 @@
 }
 </style>
 <style>
-.sizing {
+.sizing-3 {
   display: max-content;
   display: min-content;
   display: fit-content;
@@ -649,7 +647,7 @@
 }
 </style>
 <style>
-.syntax {
+.syntax-3 {
   display: auto;
 }
 </style>
@@ -708,7 +706,7 @@
 }
 </style>
 <style>
-.transforms {
+.transforms-1 {
   backface-visibility: flat;
   perspective: preserve-3d;
   perspective-origin: matrix(1);
@@ -761,7 +759,7 @@
 }
 </style>
 <style>
-.values {
+.values-3 {
   display: 1ch;
   display: 1vw;
   display: 1vh;
@@ -772,7 +770,7 @@
 }
 </style>
 <style>
-.variables {
+.variables-1 {
   var-foo: var(foo);
 }
 </style>
@@ -784,17 +782,17 @@
 }
 </style>
 <style>
-.web-animations {
+.web-animations-1 {
   display: auto;
 }
 </style>
 <style>
-.will-change {
+.will-change-1 {
   will-change: scroll-position;
 }
 </style>
 <style>
-.writing-modes {
+.writing-modes-3 {
   writing-mode: before;
   text-orientation: after;
   text-combine-upright: mixed;