Update test case format

Small chunks of tests are easy to test highlighting.

test/test.html

@@ -7,8 +7,8 @@
     <title>vim-css3-syntax</title>
 
     <link rel="stylesheet" href="http://hail2u.net/styles/natural.min.css">
-    <style>
+<style>
-      .align {
+.align {
   justify-self: safe;
   justify-content: true;
   justify-items: self-start;
@@ -18,9 +18,10 @@
   display: space-around;
   display: space-between;
   display: space-evenly;
-      }
+}
-
+</style>
-      .animations {
+<style>
+.animations {
   animation: forwards;
   animation-delay: backwards;
   animation-direction: running;
@@ -30,9 +31,10 @@
   animation-name: auto;
   animation-play-state: auto;
   animation-timing-function: auto;
-      }
+}
-
+</style>
-      .background {
+<style>
+.background {
   background-clip: space;
   background-origin: round;
   background-size: local;
@@ -48,9 +50,10 @@
   border-bottom-left-radius: auto;
   border-top-left-radius: auto;
   box-shadow: auto;
-      }
+}
-
+</style>
-      .box {
+<style>
+.box {
   overflow-style: scrollbar;
   overflow-x: panner;
   overflow-y: move;
@@ -62,34 +65,39 @@
   display: ruby-text-group;
   display: no-display;
   display: no-content;
-      }
+}
-
+</style>
-      .break {
+<style>
+.break {
   break-after: any;
   break-before: auto;
   break-inside: auto;
   box-decoration-break: auto;
-      }
+}
-
+</style>
-      .cascade {
+<style>
+.cascade {
   all: unset;
-      }
+}
-
+</style>
-      .colors {
+<style>
+.colors {
   opacity: rgba(0, 0, 0, 1);
   display: hsla(0, 0, 0, 1);
   display: currentColor;
-      }
+}
-
+</style>
-      @supports (display: auto) or
+<style>
+@supports (display: auto) or
   (display: auto) not
   (display: auto) {
   .conditional {
     display: auto;
   }
-      }
+}
-
+</style>
-      .compositing {
+<style>
+.compositing {
   mix-blend-mode: multiply;
   isolation: screen;
   background-blend-mode: overlay;
@@ -105,16 +113,18 @@
   display: saturation;
   display: color;
   display: luminosity;
-      }
+}
-
+</style>
-      .content {
+<style>
+.content {
   move-to: inhibit;
   page-policy: here;
   display: first;
   display: last;
-      }
+}
-
+</style>
-      @counter-style counter-style {
+<style>
+@counter-style counter-style {
   system: cyclic;
   negative: symbolic;
   prefix: additive;
@@ -125,9 +135,10 @@
   symbols: symbols("*" "\2020" "\2021" "\A7");
   additive-symbols: auto;
   speak-as: auto;
-      }
+}
-
+</style>
-      .counter-style {
+<style>
+.counter-style {
   display: arabic-indic;
   display: upper-armenian;
   display: lower-armenian;
@@ -163,22 +174,25 @@
   display: trad-chinese-informal;
   display: trad-chinese-formal;
   display: ethiopic-numeric;
-      }
+}
-
+</style>
-      .display {
+<style>
+.display {
   display-inside: block-level;
   display-outside: inline-level;
   display-list: contents;
   display-suppress: inline-list-item;
   display: show;
-      }
+}
-
+</style>
-      .exclusions {
+<style>
+.exclusions {
   wrap-flow: minimum;
   wrap-through: maximum;
-      }
+}
-
+</style>
-      .flexbox {
+<style>
+.flexbox {
   flex-direction: flex;
   flex-wrap: inline-flex;
   flex-flow: row;
@@ -187,9 +201,10 @@
   flex-grow: wrap;
   flex-shrink: wrap-reverse;
   flex-basis: main-size;
-      }
+}
-
+</style>
-      .fonts {
+<style>
+.fonts {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
   font-language-override: discretionary-ligatures;
@@ -225,11 +240,12 @@
   display: simplified;
   display: traditional;
   display: proportional-width;
-      }
+}
+</style>
+<style>
 
-
+.gcpm::footnote-call,
-      .gcpm::footnote-call,
+.gcpm::footnote-marker {
-      .gcpm::footnote-marker {
   string-set: string(heading, first);
   running: running(heading);
   footnote-display: element(header);
@@ -241,9 +257,10 @@
   display: target-text(attr(href url));
   display: open;
   display: closed;
-      }
+}
-
+</style>
-      .grid-layout {
+<style>
+.grid-layout {
   grid-template-columns: grid;
   grid-template-rows: inline-grid;
   grid-template-areas: minmax(0, 1);
@@ -260,9 +277,10 @@
   grid-column: auto;
   grid-row: auto;
   grid-area: auto;
-      }
+}
-
+</style>
-      .images {
+<style>
+.images {
   object-fit: contain;
   object-position: cover;
   image-resolution: snap;
@@ -273,26 +291,30 @@
   display: radial-gradient(farthest-corner at 50% 50%, yellow, green);
   display: repeating-linear-gradient(to bottom, yellow, blue);
   display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
-      }
+}
-
+</style>
-      .inline {
+<style>
+.inline {
   initial-letter: ideographic;
   initial-letter-align: auto;
-      }
+}
-
+</style>
-      .layout::slot(b) {
+<style>
+.layout::slot(b) {
   display: same;
-      }
+}
-
+</style>
-      .line-grid {
+<style>
+.line-grid {
   line-grid: create;
   line-snap: block-start;
   box-snap: block-end;
   display: first-baseline;
   display: last-baseline;
-      }
+}
-
+</style>
-      .linebox {
+<style>
+.linebox {
   alignment-adjust: central;
   alignment-baseline: mathematical;
   baseline-shift: before-edge;
@@ -312,13 +334,15 @@
   display: font-size;
   display: text-size;
   display: max-size;
-      }
+}
-
+</style>
-      .lists::marker {
+<style>
+.lists::marker {
   display: auto;
-      }
+}
-
+</style>
-      .masking {
+<style>
+.masking {
   clip-path: fill-box;
   clip-rule: stroke-box;
   mask-image: view-box;
@@ -338,9 +362,10 @@
   mask-border-repeat: auto;
   mask-border: auto;
   mask-type: auto;
-      }
+}
-
+</style>
-      .multicol {
+<style>
+.multicol {
   columns: column;
   column-count: balance;
   column-fill: avoid-column;
@@ -351,138 +376,151 @@
   column-rule-width: auto;
   column-span: auto;
   column-width: auto;
-      }
+}
-
+</style>
-      .overflow {
+<style>
+.overflow {
   max-lines: paged-x;
   display: paged-y;
   display: paged-x-controls;
   display: paged-y-controls;
   display: fragments;
-      }
+}
-
+</style>
-      .page {
+<style>
+.page {
   display: avoid-page;
   display: page;
   display: recto;
   display: verso;
-      }
+}
-
+</style>
-      .positioning {
+<style>
+.positioning {
   offset-before: sticky;
   offset-end: auto;
   offset-after: auto;
   offset-start: auto;
-      }
+}
-
+</style>
-      .pseudo::selection,
+<style>
-      .pseudo::spelling-error,
+.pseudo::selection,
-      .pseudo::grammer-error,
+.pseudo::spelling-error,
-      .pseuod::placeholder {
+.pseudo::grammer-error,
+.pseuod::placeholder {
   display: block;
-      }
+}
-
+</style>
-      .regions:region {
+<style>
+.regions:region {
   flow-into: element;
   flow-from: content;
   region-fragment: break;
   display: region;
   display: avoid-region;
-      }
+}
-
+</style>
-      .ruby {
+<style>
+.ruby {
   ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;
   ruby-align: inter-character;
-      }
+}
-
+</style>
-      @scope .scoping {
+<style>
+@scope .scoping {
   div {
     display: auto;
   }
-      }
+}
-
+</style>
-      .scoping:scope-context div,
+<style>
-      .scoping:host,
+.scoping:scope-context div,
-      .scping:host(.foo),
+.scoping:host,
-      .scoping:host-context,
+.scping:host(.foo),
-      .scoping::shadow,
+.scoping:host-context,
-      .scoping::content,
+.scoping::shadow,
-      .scoping /deep/ span {
+.scoping::content,
+.scoping /deep/ span {
   display: auto;
-      }
+}
-
+</style>
-      .selectors3:target,
+<style>
-      .selectors3:enabled,
+.selectors3:target,
-      .selectors3:disabled,
+.selectors3:enabled,
-      .selectors3:checked,
+.selectors3:disabled,
-      .selectors3:indeterminate,
+.selectors3:checked,
-      .selectors3:root,
+.selectors3:indeterminate,
-      .selectors3:empty,
+.selectors3:root,
-      .selectors3:last-child,
+.selectors3:empty,
-      .selectors3:last-of-type,
+.selectors3:last-child,
-      .selectors3:first-of-type,
+.selectors3:last-of-type,
-      .selectors3:only-child,
+.selectors3:first-of-type,
-      .selectors3:only-of-type,
+.selectors3:only-child,
-      .selectors3:nth-child(2n+1),
+.selectors3:only-of-type,
-      .selectors3:nth-last-child(-n+2),
+.selectors3:nth-child(2n+1),
-      .selectors3:nth-of-type(2n+1),
+.selectors3:nth-last-child(-n+2),
-      .selectors3:nth-last-of-type(n+2),
+.selectors3:nth-of-type(2n+1),
-      .selectors3:not([DISABLED]) {
+.selectors3:nth-last-of-type(n+2),
+.selectors3:not([DISABLED]) {
   display: auto;
-      }
+}
-
+</style>
-      .selectors4 | h1,
+<style>
-      .selectors4:scope,
+.selectors4 | h1,
-      .selectors4:current,
+.selectors4:scope,
-      .selectors4:past,
+.selectors4:current,
-      .selectors4:future,
+.selectors4:past,
-      .selectors4:default,
+.selectors4:future,
-      .selectors4:valid,
+.selectors4:default,
-      .selectors4:invalid,
+.selectors4:valid,
-      .selectors4:required,
+.selectors4:invalid,
-      .selectors4:optional,
+.selectors4:required,
-      .selectors4:blank,
+.selectors4:optional,
-      .selectors4:any-link,
+.selectors4:blank,
-      .selectors4:local-link,
+.selectors4:any-link,
-      .selectors4:read-only,
+.selectors4:local-link,
-      .selectors4:read-write,
+.selectors4:read-only,
-      .selectors4:placeholder-shown,
+.selectors4:read-write,
-      .selectors4:in-range,
+.selectors4:placeholder-shown,
-      .selectors4:out-of-range,
+.selectors4:in-range,
-      .selectors4:user-error,
+.selectors4:out-of-range,
-      .selectors4:active-drop-target,
+.selectors4:user-error,
-      .selectors4:valid-drop-target,
+.selectors4:active-drop-target,
-      .selectors4:invalid-drop-target,
+.selectors4:valid-drop-target,
-      .selectors3:matches(:hover, :focus),
+.selectors4:invalid-drop-target,
-      .selectors4:dir(ltr),
+.selectors3:matches(:hover, :focus),
-      .selectors4:local-link(0),
+.selectors4:dir(ltr),
-      .selectors4:current(p, li, dt, dd),
+.selectors4:local-link(0),
-      .selectors4:nth-match(2n+1),
+.selectors4:current(p, li, dt, dd),
-      .selectors4:nth-last-match(-n+2),
+.selectors4:nth-match(2n+1),
-      .selectors4:nth-column(2n+1),
+.selectors4:nth-last-match(-n+2),
-      .selectors4:nth-last-column(-n+2),
+.selectors4:nth-column(2n+1),
-      .selectors4:column(p, li, dt, dd) {
+.selectors4:nth-last-column(-n+2),
+.selectors4:column(p, li, dt, dd) {
   display: auto;
-      }
+}
-
+</style>
-      .shapes {
+<style>
+.shapes {
   shape-outside: margin-box;
   shape-image-threshold: inset(50% 50% 50% 50%);
   shape-margin: circle(100px 50px 100px);
   display: ellipse(0 0 250px 100px);
   display: polygon(0 0, 100% 100%, 0 100%);
-      }
+}
-
+</style>
-      .sizing {
+<style>
+.sizing {
   display: max-content;
   display: fit-content;
   display: fill-available;
   display: repudiate-floats;
   display: contain-floats;
-      }
+}
-
+</style>
-      .speech {
+<style>
+.speech {
   voice-volume: 10dB;
   voice-balance: literal-punctuation;
   rest-before: no-punctuation;
@@ -497,9 +535,10 @@
   display: 10st;
   display: moderate;
   display: reduced;
-      }
+}
-
+</style>
-      .text {
+<style>
+.text {
   hyphens: manual;
   line-break: loose;
   overflow-wrap: strict;
@@ -507,9 +546,10 @@
   display: hanging;
   display: each-line;
   display: full-width;
-      }
+}
-
+</style>
-      .text-decor-3 {
+<style>
+.text-decor-3 {
   text-decoration-color: filled;
   text-decoration-line: dot;
   text-decoration-skip: triangle;
@@ -523,9 +563,10 @@
   display: box-decoration;
   display: under;
   display: over;
-      }
+}
-
+</style>
-      .transforms {
+<style>
+.transforms {
   backface-visibility: flat;
   perspective: preserve-3d;
   perspective-origin: matrix(1);
@@ -549,9 +590,10 @@
   display: skewX(1);
   display: skewY(1);
   display: perspective(1);
-      }
+}
-
+</style>
-      .transitions {
+<style>
+.transitions {
   transition: linear;
   transition-property: ease;
   transition-duration: ease-in;
@@ -561,15 +603,17 @@
   display: step-end;
   display: steps(1, start);
   display: cubic-bezier(0.25, 0.1, 0.25, 1.0);
-      }
+}
-
+</style>
-      .ui::value,
+<style>
-      .ui::choices {
+.ui::value,
+.ui::choices {
   caret-color: grab;
   display: grabbing;
-      }
+}
-
+</style>
-      .values {
+<style>
+.values {
   display: 1ch;
   display: 1rem;
   display: 1vw;
@@ -582,17 +626,20 @@
   display: calc(100%/3 - 2*1em - 2*1px);
   display: toggle(italic, normal);
   display: initial;
-      }
+}
-
+</style>
-      .variables {
+<style>
+.variables {
   var-foo: var(foo);
-      }
+}
-
+</style>
-      .will-change {
+<style>
+.will-change {
   will-change: scroll-position;
-      }
+}
-
+</style>
-      .writing-modes {
+<style>
+.writing-modes {
   text-orientation: before;
   text-combine-horizontal: after;
   writing-mode: isolate;
@@ -607,44 +654,44 @@
   display: horizontal-tb;
   display: vertical-rl;
   display: vertical-lr;
-      }
+}
-
+</style>
-      .html5-elements,
+<style>
-      article,
+.html5-elements,
-      section,
+article,
-      nav,
+section,
-      aside,
+nav,
-      header,
+aside,
-      footer,
+header,
-      figure,
+footer,
-      figcaption,
+figure,
-      main,
+figcaption,
-      data,
+main,
-      time,
+data,
-      mark,
+time,
-      ruby,
+mark,
-      rb,
+ruby,
-      rt,
+rb,
-      rtc,
+rt,
-      rp,
+rtc,
-      bdi,
+rp,
-      wbr,
+bdi,
-      embed,
+wbr,
-      video,
+embed,
-      audio,
+video,
-      source,
+audio,
-      track,
+source,
-      datalist,
+track,
-      keygen,
+datalist,
-      output,
+keygen,
-      progress,
+output,
-      meter,
+progress,
-      template,
+meter,
-      canvas {
+template,
+canvas {
   display: auto;
-      }
+}
-    </style>
+</style>
-
     <!--[if lt IE 9]><script src="http://hail2u.net/scripts/html5shiv.min.js"></script><![endif]-->
   </head>
   <body>