@less/test-data 4.9.0 → 5.0.0-alpha.2

package/tests-unit/container/container.less

@@ -63,7 +63,25 @@
         .card-content h2 {
             padding: 0;
             margin: 0.5em 0 0 0;
-        } 
+        }
+    }
+}
+
+@container contactBody (min-width: 1300px) {
+    .named-container {
+        width: 25%;
+    }
+}
+
+@container _body (min-width: 1300px) {
+    .underscored-container {
+        width: 25%;
+    }
+}
+
+@container café (min-width: 1300px) {
+    .nonascii-container {
+        width: 25%;
     }
 }
 
@@ -74,7 +92,7 @@
     } 
 }
 
-@container (width > 760px) not (height > 670px) {
+@container (width > 760px) and (not (height > 670px)) {
     .card-content h2 {
         padding: 0;
         margin: 0.5em 0 0 0;
@@ -95,7 +113,7 @@
     } 
 }
 
-@container (width < 500px) or (height < 500px) and (inline-size >= 0px) {
+@container ((width < 500px) or (height < 500px)) and (inline-size >= 0px) {
     .card-content p {
         padding: 0;
 
@@ -105,7 +123,7 @@
     } 
 }
 
-@container my-page-layout (width < 500px) or (height < 500px) and (block-size > 12em) {
+@container my-page-layout ((width < 500px) or (height < 500px)) and (block-size > 12em) {
     .card-content p {
         padding: 0;
 
@@ -115,7 +133,7 @@
     } 
 }
 
-@container (width < 500px) or (height < 500px) and (aspect-ratio: 3/2) {
+@container ((width < 500px) or (height < 500px)) and (aspect-ratio: 3/2) {
     .card-content p {
         padding: 0;
 
@@ -125,7 +143,7 @@
     } 
 }
 
-@container (width < 500px) or (height < 500px) and (orientation: portrait) {
+@container ((width < 500px) or (height < 500px)) and (orientation: portrait) {
     .card-content p {
         padding: 0;
 
@@ -159,55 +177,7 @@
     }
 }
 
-@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
-    h2 {
-        font-size: 1.5em;
-    }
-}
-
-@container style(--theme) {
-    .style-query {
-        color: red;
-    }
-}
-
-@container style((--theme: one) or (--theme: two)) {
-    .style-query-list {
-        color: blue;
-    }
-}
-
-@container contactBody (min-width: 1300px) {
-    .named-container {
-        width: 25%;
-    }
-}
-
-@container _body (min-width: 1300px) {
-    .underscored-container {
-        width: 25%;
-    }
-}
-
-@container --body (min-width: 1300px) {
-    .custom-ident-container {
-        width: 25%;
-    }
-}
-
-@container contact\.body (min-width: 1300px) {
-    .escaped-container {
-        width: 25%;
-    }
-}
-
-@container café (min-width: 1300px) {
-    .nonascii-container {
-        width: 25%;
-    }
-}
-
-@container ( width < 500px ) or (height<500px) and (orientation: portrait) {
+@container ((width < 500px) or (height < 500px)) and (orientation: portrait) {
     .card-content p {
         padding: 0;
 
@@ -217,7 +187,7 @@
     } 
 }
 
-@container my-page-layout ( width< 500px) or ( height<500px) and ( block-size>12em ) {
+@container my-page-layout (( width< 500px) or ( height<500px)) and ( block-size>12em ) {
     .card-content p {
         padding: 0;
 
@@ -367,12 +337,6 @@
     }
 }
 
-@container sidebar (min-width: 400px), scroll-state(stuck: top) {
-    #sticky-child {
-      font-size: 80%;
-    }
-}
-
 @varfoo: foo;
 @threshold: 400px;
 @container @{varfoo} (min-width: @threshold) {
@@ -383,7 +347,8 @@
 
 // Regression test: mixin with variable container name and variable query condition
 // Issue: mixins with parameters using @container @name (condition < @var) failed
-// with "variable @bp is undefined" error in older versions
+// with "variable @bp is undefined" error in older versions. Less 5 keeps the
+// at-rule name on interpolation form because bare @var there is deprecated.
 @issue-width: 125px;
 
 .container-query-mixin(@container-name; @bp) {
@@ -404,22 +369,3 @@
 .header-test {
     .container-query-mixin(header, 800px);
 }
-
-// Range/comparison syntax in @container style() queries (issue #4460)
-@container style(var(--n) = 3) {
-    .style-query-eq {
-        color: red;
-    }
-}
-
-@container style(calc(6 / 2) = var(--n)) {
-    .style-query-calc-eq {
-        color: blue;
-    }
-}
-
-@container style(var(--size) > 1lh) {
-    .style-query-gt {
-        color: green;
-    }
-}

package/tests-unit/container/legacy/container.css

@@ -0,0 +1,273 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+.widget.discoverresults,
+.widget.repositoriesresults {
+  container-type: inline-size;
+}
+@container (max-width: 350px) {
+  .widget.discoverresults .cite .wdr-authors,
+  .widget.repositoriesresults .cite .wdr-authors {
+    display: none;
+  }
+}
+@container (min-width: 700px) {
+  .card h2 {
+    font-size: 2em;
+  }
+}
+@container sidebar (min-width: 700px) {
+  .card {
+    font-size: 2em;
+  }
+}
+@container (min-width: 60ch) {
+  .container:nth-child(odd) > article {
+    border: 1px solid grey;
+  }
+}
+@container size(min-width: 60ch) {
+  .article--post header {
+    grid-template-areas: "avatar name" "avatar headline";
+    align-items: start;
+  }
+  .article--post {
+    grid-template-areas: "header header" ". stats" ". content";
+    grid-auto-columns: 5rem 1fr;
+    column-gap: 1rem;
+  }
+  .article--post__title {
+    font-size: 1.75rem;
+  }
+}
+.card h2 {
+  container-type: inline-size;
+  margin: 0;
+  padding: 10px;
+}
+@container (min-width: 500px) {
+  .card h2 .card-content {
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: auto 1fr;
+    align-items: start;
+    column-gap: 20px;
+  }
+  .card h2 .card-content h2 {
+    padding: 0;
+    margin: 0.5em 0 0 0;
+  }
+}
+@container (width >= 500px) and (height >= 500px) {
+  .card-content h2 {
+    padding: 0;
+    margin: 0.5em 0 0 0;
+  }
+}
+@container (width > 760px) not (height > 670px) {
+  .card-content h2 {
+    padding: 0;
+    margin: 0.5em 0 0 0;
+  }
+}
+@container not (height <= 1080px) {
+  .card-content h2 {
+    padding: 0;
+    margin: 0.5em 0 0 0;
+  }
+}
+@container (width < 500px) or (height < 500px) {
+  .card-content h2 {
+    padding: 0;
+    margin: 0.5em 0 0 0;
+  }
+}
+@container (width < 500px) or (height < 500px) and (inline-size >= 0px) {
+  .card-content p {
+    padding: 0;
+  }
+  .card-content p h2 {
+    margin: 0.5em 0 0 0;
+  }
+}
+@container my-page-layout (width < 500px) or (height < 500px) and (block-size > 12em) {
+  .card-content p {
+    padding: 0;
+  }
+  .card-content p h2 {
+    margin: 0.5em 0 0 0;
+  }
+}
+@container (width < 500px) or (height < 500px) and (aspect-ratio: 3/2) {
+  .card-content p {
+    padding: 0;
+  }
+  .card-content p h2 {
+    margin: 0.5em 0 0 0;
+  }
+}
+@container (width < 500px) or (height < 500px) and (orientation: portrait) {
+  .card-content p {
+    padding: 0;
+  }
+  .card-content p h2 {
+    margin: 0.5em 0 0 0;
+  }
+}
+@container card (inline-size > 30em) {
+  .card-content p {
+    padding: 0;
+  }
+  .card-content p h2 {
+    margin: 0.5em 0 0 0;
+  }
+}
+@container card (inline-size > 30em) and style(--responsive: true) {
+  .card-content {
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: auto 1fr;
+    align-items: start;
+    column-gap: 20px;
+  }
+  .card-content h2 {
+    padding: 0;
+    margin: 0.5em 0 0 0;
+  }
+}
+@container (width < 500px) or (height < 500px) and (orientation: portrait) {
+  .card-content p {
+    padding: 0;
+  }
+  .card-content p h2 {
+    margin: 0.5em 0 0 0;
+  }
+}
+@container my-page-layout (width < 500px) or (height < 500px) and (block-size > 12em) {
+  .card-content p {
+    padding: 0;
+  }
+  .card-content p h2 {
+    margin: 0.5em 0 0 0;
+  }
+}
+.wrapper {
+  container-name: wrapper;
+  container-type: size;
+}
+@container wrapper (height < 100) {
+  a {
+    max-height: 100;
+  }
+}
+@container wrapper (height < 200) {
+  a {
+    max-height: 200;
+  }
+}
+@container wrapper (height < 300) {
+  a {
+    max-height: 300;
+  }
+}
+@media only screen and (min-width: 768px) {
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+  }
+  .media-2 {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+    @media (hover: hover) {
+      .foo {
+        font-size: 1.75rem;
+      }
+    }
+  }
+  .media-2 {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+    @media (hover: hover) {
+      .foo {
+        font-size: 1.75rem;
+      }
+      @media not all and (hover: hover) {
+        .foo {
+          color: limegreen;
+        }
+      }
+      .media-3 {
+        padding: 0.5rem;
+      }
+    }
+  }
+  .media-2 {
+    font-size: 2rem;
+  }
+}
+@container (min-width: 768px) {
+  @media only screen and (min-width: 768px) {
+    .foo {
+      color: aliceblue;
+    }
+  }
+  .container-1 {
+    color: purple;
+  }
+}
+#sticky {
+  position: sticky;
+  container-type: scroll-state;
+}
+@container scroll-state(stuck: top) {
+  #sticky-child {
+    font-size: 75%;
+  }
+}
+@container scroll-state(snapped: x) {
+  #sticky-child {
+    font-size: 75%;
+  }
+}
+@container scroll-state(scrollable: top) {
+  #sticky-child {
+    font-size: 75%;
+  }
+}

package/tests-unit/container/styles.config.ts

@@ -0,0 +1,8 @@
+export default {
+  compile: {
+    mathMode: 'parens-division'
+  },
+  output: {
+    collapseNesting: true,
+  },
+};

package/tests-unit/css-3/css-3.css

@@ -1,8 +1,9 @@
 @namespace foo url(http://www.example.com);
 .comma-delimited {
   text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
-  -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset, 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
-  -webkit-transform: rotate(0deg);
+  -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
+    0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
+  -webkit-transform: rotate(-0.0000000001deg);
 }
 @font-face {
   font-family: Headline;
@@ -74,8 +75,7 @@ p::before {
     font-size: 12px;
   }
 }
-@supports ( box-shadow: 2px 2px 2px black ) or
-          ( -moz-box-shadow: 2px 2px 2px black ) {
+@supports (box-shadow: 2px 2px 2px black) or (-moz-box-shadow: 2px 2px 2px black) {
   .outline {
     box-shadow: 2px 2px 2px black;
     -moz-box-shadow: 2px 2px 2px black;

package/tests-unit/css-3/legacy/css-3.css

@@ -0,0 +1,147 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+@namespace foo url(http://www.example.com);
+.comma-delimited {
+  text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
+  -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset, 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
+  -webkit-transform: rotate(0deg);
+}
+@font-face {
+  font-family: Headline;
+  unicode-range: U+??????, U+0???, U+0-7F, U+A5;
+}
+.other {
+  -moz-transform: translate(0, 11em) rotate(-90deg);
+  transform: rotateX(45deg);
+}
+.item[data-cra_zy-attr1b-ut3=bold] {
+  font-weight: bold;
+}
+p:not([class*="lead"]) {
+  color: black;
+}
+input[type="text"].class#id[attr=i32]:not(.one) {
+  color: inherit;
+}
+div#id.class[a=one][b=two].class:not(.one) {
+  color: inherit;
+}
+ul.comma > li:not(:only-child)::after {
+  color: inherit;
+}
+ol.comma > li:nth-last-child(2)::after {
+  color: inherit;
+}
+li:nth-child(4n+1),
+li:nth-child(-5n),
+li:nth-child(-n+2) {
+  color: inherit;
+}
+a[href^="http://"] {
+  color: black;
+}
+a[href$="http://"] {
+  color: black;
+}
+form[data-disabled] {
+  color: black;
+}
+p::before {
+  color: black;
+}
+#issue322 {
+  -webkit-animation: anim2 7s infinite ease-in-out;
+}
+@-webkit-keyframes frames {
+  0% {
+    border: 1px;
+  }
+  5.5% {
+    border: 2px;
+  }
+  100% {
+    border: 3px;
+  }
+}
+@keyframes fontbulger1 {
+  to {
+    font-size: 15px;
+  }
+  from,
+  to {
+    font-size: 12px;
+  }
+  0%,
+  100% {
+    font-size: 12px;
+  }
+}
+@supports ( box-shadow: 2px 2px 2px black ) or
+          ( -moz-box-shadow: 2px 2px 2px black ) {
+  .outline {
+    box-shadow: 2px 2px 2px black;
+    -moz-box-shadow: 2px 2px 2px black;
+  }
+}
+@-x-document url-prefix(""github.com"") {
+  h1 {
+    color: red;
+  }
+}
+@viewport {
+  font-size: 10px;
+}
+foo|h1 {
+  color: blue;
+}
+foo|* {
+  color: yellow;
+}
+*|h1 {
+  color: green;
+}
+h1 {
+  color: green;
+}
+.upper-test {
+  UpperCaseProperties: allowed;
+}
+@host {
+  div {
+    display: block;
+  }
+}
+:not(input::placeholder) {
+  color: #b3b3b3;
+}
+.shadow > .dom,
+body > .shadow {
+  display: done;
+}
+:host(.sel.a),
+:host-context(.sel.b),
+.sel > .b,
+::content .sel {
+  type: shadow-dom;
+}
+* b {
+  c: 'd';
+}
+* b[e] {
+  f: 'g';
+}
+#issue2066 {
+  background: url('/images/icon-team.svg') 0 0 / contain;
+}
+@counter-style triangle {
+  system: cyclic;
+  symbols: ‣;
+  suffix: " ";
+}
+@unknown foo 42 (bar) {
+  x {
+    y: z;
+  }
+}
+@unknown foo 43;

package/tests-unit/css-escapes/css-escapes.css

@@ -6,10 +6,10 @@
 }
 .\34 04 {
   background: red;
-}
-.\34 04 strong {
-  color: fuchsia;
-  font-weight: bold;
+  strong {
+    color: fuchsia;
+    font-weight: bold;
+  }
 }
 .trailingTest\+ {
   color: red;

package/tests-unit/css-escapes/legacy/css-escapes.css

@@ -0,0 +1,34 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+.escape\|random\|char {
+  color: red;
+}
+.mixin\!tUp {
+  font-weight: bold;
+}
+.\34 04 {
+  background: red;
+}
+.\34 04 strong {
+  color: fuchsia;
+  font-weight: bold;
+}
+.trailingTest\+ {
+  color: red;
+}
+/* This hideous test of hideousness checks for the selector "blockquote" with various permutations of hex escapes */
+\62\6c\6f \63 \6B \0071 \000075o\74 e {
+  color: silver;
+}
+[ng\:cloak],
+ng\:form {
+  display: none;
+}
+.bootstrap {
+  background-color: #000 \9;
+}
+textarea {
+  font-family: 'helvetica neue', 'wenquanyi micro hei', \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;
+}
+/* anything to unquote */

package/tests-unit/css-escapes/styles.config.ts

@@ -0,0 +1,5 @@
+export default {
+  output: [
+    { file: '{name}.css', collapseNesting: false }
+  ]
+}

package/tests-unit/css-grid/css-grid.css

@@ -20,5 +20,8 @@
   display: grid;
   grid-template-columns: 9fr 1.875em 3fr;
   grid-template-rows: auto;
-  grid-template-areas: "header header header" "content . sidebar" "footer footer footer";
+  grid-template-areas:
+    "header header header"
+    "content . sidebar"
+    "footer footer footer";
 }