Add test cases about code embedding in markdown that relates to #15909 (

#15985)

tests/format/markdown/code/mdn-auth-api.md

@@ -0,0 +1,34 @@
+
+
+
+```javascript
+
+
+// sample arguments for registration
+const createCredentialDefaultArgs = {
+          publicKey: {
+    // Relying Party (a.k.a. - Service):
+  rp: {
+      name: "Acme",    },
+    // User:
+    user: {
+      id: new Uint8Array(16),
+      name: "carina.p.anand@example.com",   displayName: "Carina P. Anand",
+    },
+    pubKeyCredParams: [
+      {
+        type: "public-key",
+        alg: -7,
+      },
+    ],
+    attestation: "direct",
+    timeout: 60000,
+    challenge: new Uint8Array(
+[
+      // must be a cryptographically random number sent from a server
+      0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a, 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x38,
+  0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
+    ]).buffer,
+  },
+};
+```

tests/format/markdown/code/mdn-background-1.md

@@ -0,0 +1,15 @@
+
+
+
+```css
+
+.box {
+  background:
+    linear-gradient(
+        105deg,
+        rgb(255 255 255 / 20%) 39%,
+        rgb(51 56 57 / 100%) 96%
+      )           center center / 400px 200px no-repeat,    url(big-star.png) center no-repeat,
+    rebeccapurple;
+}
+```

tests/format/markdown/code/mdn-background-2.md

@@ -0,0 +1,11 @@
+
+```css
+
+
+
+background-image: linear-gradient(
+    to bottom,
+              rgb(255 255 0 / 50%),
+ rgb(0 0 255 / 50%)
+  ), url("catfront.png");
+```

tests/format/markdown/code/mdn-background-3.md

@@ -0,0 +1,16 @@
+
+```css
+
+.box {
+  margin: 10px 0;
+  color: #fff;
+  background: linear-gradient(90deg,
+      rgb(131 58 180 / 100%)  0%,
+  rgb(253 29 29 / 60%) 60%, rgb(252 176 69 / 100%) 100%), radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
+  border: 20px dashed black;
+  padding: 20px;
+width: 400px;
+        background-origin: padding-box, content-box;
+  background-repeat: no-repeat;
+}
+```

tests/format/markdown/code/mdn-background-4.md

@@ -0,0 +1,15 @@
+
+```css
+
+
+.multi-bg-example {
+  width: 100%;  height: 400px;
+  background-image: url(firefox.png),       url(bubbles.png), linear-gradient(to right, rgb(30
+          75 115 / 100%), rgb(255 255 255 / 0%));
+    background-repeat: no-repeat, no-repeat, no-repeat;
+background-position:
+    bottom right,
+    left,
+    right;
+}
+```

tests/format/markdown/code/mdn-background-5.md

@@ -0,0 +1,13 @@
+
+
+```css
+
+.stacked-linear {
+  background: linear-gradient(
+      217deg,
+      rgb(255 0 0 / 80%),
+      rgb(255 0 0 / 0%) 70.71%
+    ), linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
+    linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
+}
+```

tests/format/markdown/code/mdn-background-6.md

@@ -0,0 +1,25 @@
+
+```css
+
+
+
+.stacked-radial {
+  background:
+    radial-gradient(
+      circle at 50% 0,
+      rgb(255 0 0 / 50%),
+      rgb(255 0 0 / 0%) 70.71%
+    ),
+    radial-gradient(
+      circle at 6.7% 75%,
+      rgb(0 0 255 / 50%),
+      rgb(0 0 255 / 0%) 70.71%
+    ),
+    radial-gradient(
+        circle at 93.3% 75%,
+        rgb(0 255 0 / 50%),
+        rgb(0 255 0 / 0%) 70.71%
+      ) beige;
+  border-radius: 50%;
+}
+```

tests/format/markdown/code/mdn-background-7.md

@@ -0,0 +1,29 @@
+
+
+```css
+
+.multi-repeating-linear {
+  background:     repeating-linear-gradient(
+      190deg,
+              rgb(255 0 0 / 50%) 40px,
+      rgb(255 153 0 / 50%) 80px,
+rgb(255 255 0 / 50%) 120px,
+      rgb(0 255 0 / 50%) 160px,
+      rgb(0 0 255 / 50%) 200px,
+      rgb(75 0 130 / 50%) 240px,
+      rgb(238 130 238 / 50%) 280px,
+      rgb(255 0 0 / 50%) 300px
+    ), repeating-linear-gradient(
+      -190deg,
+      rgb(255 0 0 / 50%) 30px,
+      rgb(255 153 0 / 50%) 60px,
+      rgb(255 255 0 / 50%) 90px,
+      rgb(0 255 0 / 50%) 120px,
+      rgb(0 0 255 / 50%) 150px,
+  rgb(75 0 130 / 50%) 180px,
+      rgb(238 130 238 / 50%) 210px,
+      rgb(255 0 0 / 50%) 230px
+    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
+        200px, blue 250px, indigo 300px, violet 350px, red 370px);
+}
+```

tests/format/markdown/code/mdn-background-8.md

@@ -0,0 +1,67 @@
+
+
+```css
+
+.plaid-gradient {
+  background: repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 50px,
+      rgb(255 127 0 / 25%) 50px,
+      rgb(255 127 0 / 25%) 56px,
+      transparent 56px,
+      transparent 63px,
+      rgb(255 127 0 / 25%) 63px,
+      rgb(255 127 0 / 25%) 69px,
+transparent 69px,
+      transparent 116px,
+      rgb(255 206 0 / 25%) 116px,
+      rgb(255 206 0 / 25%) 166px
+    ), repeating-linear-gradient(
+      0deg,
+                transparent,
+      transparent       50px,
+      rgb(255 127 0 / 25%) 50px,
+            rgb(255 127 0 / 25%) 56px,
+      transparent 56px,
+      transparent 63px,
+      rgb(255 127 0 / 25%) 63px,
+      rgb(255 127 0 / 25%) 69px,
+      transparent 69px,
+      transparent 116px,
+      rgb(255 206 0 / 25%) 116px,
+      rgb(255 206 0 / 25%) 166px
+    ), repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 5px,
+      rgb(143 77 63 / 25%) 5px,
+      rgb(143 77 63 / 25%) 10px
+    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(
+          143 77 63 / 25%
+        ) 5px, rgb(143 77 63 / 25%) 10px);
+
+  background: repeating-linear-gradient(
+      90deg,
+      transparent 0 50px,
+      rgb(255 127 0 / 25%) 50px 56px,
+      transparent 56px 63px,
+      rgb(255 127 0 / 25%) 63px 69px,
+      transparent 69px 116px,
+      rgb(255 206 0 / 25%) 116px 166px
+    ), repeating-linear-gradient(
+      0deg,
+      transparent 0 50px,
+      rgb(255 127 0 / 25%) 50px 56px,
+          transparent 56px 63px,
+      rgb(255 127 0 / 25%) 63px 69px,
+      transparent 69px 116px,
+      rgb(255 206 0 / 25%) 116px 166px
+    ), repeating-linear-gradient(
+      -45deg,
+      transparent 0 5px,
+      rgb(143 77 63 / 25%) 5px 10px
+    ), repeating-linear-gradient(45deg, transparent 0 5px, rgb(143 77 63 / 25%) 5px
+        10px);
+}
+```

tests/format/markdown/code/mdn-background-9.md

@@ -0,0 +1,14 @@
+
+```css
+
+
+div {
+  background: conic-gradient(
+      #fff      0.25turn,
+  #000 0.25turn 0.5turn,
+      #fff 0.5turn 0.75turn,
+        #000 0.75turn
+    ) top left      / 25% 25% repeat;
+  border: 1px solid;
+}
+```

tests/format/markdown/code/mdn-filter-1.md

@@ -0,0 +1,13 @@
+
+```css
+
+img {
+  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
+      -2px -2px 0 hsl(210deg 100% 50%) ) drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
+      -2px -2px 0 hsl(30deg 100% 50%)
+    );
+}
+img + img {
+filter: none;
+}
+```

tests/format/markdown/code/mdn-filter-2.md

@@ -0,0 +1,11 @@
+
+```css
+
+
+
+#MDN-logo {
+border: 1px solid blue;
+  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
+        red);
+}
+```

tests/format/markdown/code/mdn-font-face-1.md

@@ -0,0 +1,16 @@
+
+
+
+```css
+
+@font-face {
+  font-family: "HeydingsControlsRegular";
+          src: url("fonts/heydings_controls-webfont.eot");
+  src:
+    url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),
+url("fonts/heydings_controls-webfont.woff") format("woff"),
+    url("fonts/heydings_controls-webfont.ttf")      format("truetype");
+  font-weight: normal;
+font-style: normal;
+}
+```

tests/format/markdown/code/mdn-font-face-2.md

@@ -0,0 +1,14 @@
+
+
+```css
+
+
+
+
+
+@font-face {
+  font-family: "Bungee Spice";
+  src:
+    url("https://fonts.googleapis.com/css2?family=Bungee+Spice") tech(color-COLRv1), url("Bungee-fallback.otf") format("opentype");
+}
+```

tests/format/markdown/code/mdn-grid-auto-columns.md

@@ -0,0 +1,11 @@
+
+```css
+
+/* multiple track-size values */
+grid-auto-columns: min-content max-content auto;
+grid-auto-columns: 100px 150px 390px;
+grid-auto-columns: 10% 33.3%;
+grid-auto-columns: 0.5fr 3fr 1fr;
+grid-auto-columns: minmax(100px, auto)    minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: 100px minmax(100px, auto)        10% 0.5fr fit-content(400px);
+```

tests/format/markdown/code/mdn-import.md

@@ -0,0 +1,10 @@
+
+
+```css
+
+
+@import url("gridy.css")    supports(       display: grid) screen and (max-width: 400px);
+@import url("flexy.css") supports(not (display: grid    ) and           (display: flex)) screen and (max-width: 400px);
+@import url(
+"whatever.css") supports((selector(h2 > p)) and    (font-tech(color-COLRv1)));
+```

tests/format/markdown/code/mdn-mask-image.md

@@ -0,0 +1,6 @@
+
+```css
+
+/* Multiple values */
+mask-image: image(url(mask.png), skyblue),                          linear-gradient(rgb(0 0 0 / 100%), transparent);
+```

tests/format/markdown/code/mdn-padding-1.md

@@ -0,0 +1,11 @@
+
+
+```css
+
+body {
+padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
+      safe-area-inset-bottom,
+                20px
+    ) env(safe-area-inset-left, 20px);
+}
+```

tests/format/markdown/code/mdn-padding-2.md

@@ -0,0 +1,13 @@
+
+
+```css
+
+p {
+  width: 300px;
+  border: 2px solid red;
+        padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
+      safe-area-inset-bottom,
+  50px
+    ) env(SAFE-AREA-INSET-LEFT, 50px);
+}
+```

tests/format/markdown/code/mdn-transform.md

@@ -0,0 +1,24 @@
+
+```css
+
+#example-element:focus {
+  transform: rotate3d(1, 1, 1,      30deg) matrix3d(
+      1,
+      0,
+      0,
+                      0,
+      0,
+    1,
+      6,
+      0,
+      0,
+      0,
+      1,
+      0,
+      50,
+      100,
+      0,
+      1.1
+    );
+}
+```