Update test case format

Small chunks of tests are easy to test highlighting.

test/test.html

@@ -19,7 +19,8 @@
   display: space-between;
   display: space-evenly;
 }
-
+</style>
+<style>
 .animations {
   animation: forwards;
   animation-delay: backwards;
@@ -31,7 +32,8 @@
   animation-play-state: auto;
   animation-timing-function: auto;
 }
-
+</style>
+<style>
 .background {
   background-clip: space;
   background-origin: round;
@@ -49,7 +51,8 @@
   border-top-left-radius: auto;
   box-shadow: auto;
 }
-
+</style>
+<style>
 .box {
   overflow-style: scrollbar;
   overflow-x: panner;
@@ -63,24 +66,28 @@
   display: no-display;
   display: no-content;
 }
-
+</style>
+<style>
 .break {
   break-after: any;
   break-before: auto;
   break-inside: auto;
   box-decoration-break: auto;
 }
-
+</style>
+<style>
 .cascade {
   all: unset;
 }
-
+</style>
+<style>
 .colors {
   opacity: rgba(0, 0, 0, 1);
   display: hsla(0, 0, 0, 1);
   display: currentColor;
 }
-
+</style>
+<style>
 @supports (display: auto) or
   (display: auto) not
   (display: auto) {
@@ -88,7 +95,8 @@
     display: auto;
   }
 }
-
+</style>
+<style>
 .compositing {
   mix-blend-mode: multiply;
   isolation: screen;
@@ -106,14 +114,16 @@
   display: color;
   display: luminosity;
 }
-
+</style>
+<style>
 .content {
   move-to: inhibit;
   page-policy: here;
   display: first;
   display: last;
 }
-
+</style>
+<style>
 @counter-style counter-style {
   system: cyclic;
   negative: symbolic;
@@ -126,7 +136,8 @@
   additive-symbols: auto;
   speak-as: auto;
 }
-
+</style>
+<style>
 .counter-style {
   display: arabic-indic;
   display: upper-armenian;
@@ -164,7 +175,8 @@
   display: trad-chinese-formal;
   display: ethiopic-numeric;
 }
-
+</style>
+<style>
 .display {
   display-inside: block-level;
   display-outside: inline-level;
@@ -172,12 +184,14 @@
   display-suppress: inline-list-item;
   display: show;
 }
-
+</style>
+<style>
 .exclusions {
   wrap-flow: minimum;
   wrap-through: maximum;
 }
-
+</style>
+<style>
 .flexbox {
   flex-direction: flex;
   flex-wrap: inline-flex;
@@ -188,7 +202,8 @@
   flex-shrink: wrap-reverse;
   flex-basis: main-size;
 }
-
+</style>
+<style>
 .fonts {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
@@ -226,7 +241,8 @@
   display: traditional;
   display: proportional-width;
 }
-
+</style>
+<style>
 
 .gcpm::footnote-call,
 .gcpm::footnote-marker {
@@ -242,7 +258,8 @@
   display: open;
   display: closed;
 }
-
+</style>
+<style>
 .grid-layout {
   grid-template-columns: grid;
   grid-template-rows: inline-grid;
@@ -261,7 +278,8 @@
   grid-row: auto;
   grid-area: auto;
 }
-
+</style>
+<style>
 .images {
   object-fit: contain;
   object-position: cover;
@@ -274,16 +292,19 @@
   display: repeating-linear-gradient(to bottom, yellow, blue);
   display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
 }
-
+</style>
+<style>
 .inline {
   initial-letter: ideographic;
   initial-letter-align: auto;
 }
-
+</style>
+<style>
 .layout::slot(b) {
   display: same;
 }
-
+</style>
+<style>
 .line-grid {
   line-grid: create;
   line-snap: block-start;
@@ -291,7 +312,8 @@
   display: first-baseline;
   display: last-baseline;
 }
-
+</style>
+<style>
 .linebox {
   alignment-adjust: central;
   alignment-baseline: mathematical;
@@ -313,11 +335,13 @@
   display: text-size;
   display: max-size;
 }
-
+</style>
+<style>
 .lists::marker {
   display: auto;
 }
-
+</style>
+<style>
 .masking {
   clip-path: fill-box;
   clip-rule: stroke-box;
@@ -339,7 +363,8 @@
   mask-border: auto;
   mask-type: auto;
 }
-
+</style>
+<style>
 .multicol {
   columns: column;
   column-count: balance;
@@ -352,7 +377,8 @@
   column-span: auto;
   column-width: auto;
 }
-
+</style>
+<style>
 .overflow {
   max-lines: paged-x;
   display: paged-y;
@@ -360,28 +386,32 @@
   display: paged-y-controls;
   display: fragments;
 }
-
+</style>
+<style>
 .page {
   display: avoid-page;
   display: page;
   display: recto;
   display: verso;
 }
-
+</style>
+<style>
 .positioning {
   offset-before: sticky;
   offset-end: auto;
   offset-after: auto;
   offset-start: auto;
 }
-
+</style>
+<style>
 .pseudo::selection,
 .pseudo::spelling-error,
 .pseudo::grammer-error,
 .pseuod::placeholder {
   display: block;
 }
-
+</style>
+<style>
 .regions:region {
   flow-into: element;
   flow-from: content;
@@ -389,19 +419,22 @@
   display: region;
   display: avoid-region;
 }
-
+</style>
+<style>
 .ruby {
   ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;
   ruby-align: inter-character;
 }
-
+</style>
+<style>
 @scope .scoping {
   div {
     display: auto;
   }
 }
-
+</style>
+<style>
 .scoping:scope-context div,
 .scoping:host,
 .scping:host(.foo),
@@ -411,7 +444,8 @@
 .scoping /deep/ span {
   display: auto;
 }
-
+</style>
+<style>
 .selectors3:target,
 .selectors3:enabled,
 .selectors3:disabled,
@@ -431,7 +465,8 @@
 .selectors3:not([DISABLED]) {
   display: auto;
 }
-
+</style>
+<style>
 .selectors4 | h1,
 .selectors4:scope,
 .selectors4:current,
@@ -465,7 +500,8 @@
 .selectors4:column(p, li, dt, dd) {
   display: auto;
 }
-
+</style>
+<style>
 .shapes {
   shape-outside: margin-box;
   shape-image-threshold: inset(50% 50% 50% 50%);
@@ -473,7 +509,8 @@
   display: ellipse(0 0 250px 100px);
   display: polygon(0 0, 100% 100%, 0 100%);
 }
-
+</style>
+<style>
 .sizing {
   display: max-content;
   display: fit-content;
@@ -481,7 +518,8 @@
   display: repudiate-floats;
   display: contain-floats;
 }
-
+</style>
+<style>
 .speech {
   voice-volume: 10dB;
   voice-balance: literal-punctuation;
@@ -498,7 +536,8 @@
   display: moderate;
   display: reduced;
 }
-
+</style>
+<style>
 .text {
   hyphens: manual;
   line-break: loose;
@@ -508,7 +547,8 @@
   display: each-line;
   display: full-width;
 }
-
+</style>
+<style>
 .text-decor-3 {
   text-decoration-color: filled;
   text-decoration-line: dot;
@@ -524,7 +564,8 @@
   display: under;
   display: over;
 }
-
+</style>
+<style>
 .transforms {
   backface-visibility: flat;
   perspective: preserve-3d;
@@ -550,7 +591,8 @@
   display: skewY(1);
   display: perspective(1);
 }
-
+</style>
+<style>
 .transitions {
   transition: linear;
   transition-property: ease;
@@ -562,13 +604,15 @@
   display: steps(1, start);
   display: cubic-bezier(0.25, 0.1, 0.25, 1.0);
 }
-
+</style>
+<style>
 .ui::value,
 .ui::choices {
   caret-color: grab;
   display: grabbing;
 }
-
+</style>
+<style>
 .values {
   display: 1ch;
   display: 1rem;
@@ -583,15 +627,18 @@
   display: toggle(italic, normal);
   display: initial;
 }
-
+</style>
+<style>
 .variables {
   var-foo: var(foo);
 }
-
+</style>
+<style>
 .will-change {
   will-change: scroll-position;
 }
-
+</style>
+<style>
 .writing-modes {
   text-orientation: before;
   text-combine-horizontal: after;
@@ -608,7 +655,8 @@
   display: vertical-rl;
   display: vertical-lr;
 }
-
+</style>
+<style>
 .html5-elements,
 article,
 section,
@@ -644,7 +692,6 @@
   display: auto;
 }
 </style>
-
     <!--[if lt IE 9]><script src="http://hail2u.net/scripts/html5shiv.min.js"></script><![endif]-->
   </head>
   <body>