ArthurHub · jhaygood86 · Jul 16, 2026 · Jul 16, 2026 · Jul 17, 2026 · Jul 17, 2026
diff --git a/Source/Demo/Common/DemoUtils.cs b/Source/Demo/Common/DemoUtils.cs
@@ -74,8 +74,8 @@ public static string GetStylesheet(string src)
                     a:link { text-decoration: none; }
                     a:hover { text-decoration: underline; }
                     .gray    { color:gray; }
-                    .example { background-color:#efefef; corner-radius:5px; padding:0.5em; }
-                    .whitehole { background-color:white; corner-radius:10px; padding:15px; }
+                    .example { background-color:#efefef; border-radius:5px; padding:0.5em; }
+                    .whitehole { background-color:white; border-radius:10px; padding:15px; }
                     .caption { font-size: 1.1em }
                     .comment { color: green; margin-bottom: 5px; margin-left: 3px; }
                     .comment2 { color: green; }";

diff --git a/Source/Demo/Common/HtmlRenderer.Demo.Common.csproj b/Source/Demo/Common/HtmlRenderer.Demo.Common.csproj
@@ -67,6 +67,7 @@
     <EmbeddedResource Include="TestSamples\20.Fonts decorations.htm" />
     <EmbeddedResource Include="TestSamples\21.Bullets.htm" />
     <EmbeddedResource Include="TestSamples\22.RTL.htm" />
+    <EmbeddedResource Include="TestSamples\23.Media queries and color scheme.htm" />
     <EmbeddedResource Include="TestSamples\30.Misc.htm" />
     <EmbeddedResource Include="TestSamples\31.ACID 1.htm" />
     <EmbeddedResource Include="TestSamples\32.Image in css content.htm" />

diff --git a/Source/Demo/Common/Samples/00.Intro.htm b/Source/Demo/Common/Samples/00.Intro.htm
@@ -3,7 +3,7 @@
         <title>Intro</title>
         <link rel="Stylesheet" href="StyleSheet" />
     </head>
-    <body style="background-color: #333; background-gradient: #707; background-gradient-angle: 60; margin: 0;">
+    <body style="background-image: linear-gradient(60deg, #333, #707); margin: 0;">
         <h1 align="center" style="color: white">
             HTML Renderer Project - $$Platform$$
             <br />

diff --git a/Source/Demo/Common/Samples/07.Additional features.htm b/Source/Demo/Common/Samples/07.Additional features.htm
@@ -5,20 +5,18 @@
         <style>
         <!--
             .g1, .g2, .g3, .g4, .g5 {
-                background-color: red;
-                background-gradient: yellow;
                 padding: 22px;
             }
 
-            .g1 { background-gradient-angle: 0; }
+            .g1 { background-image: linear-gradient(0deg, red, yellow); }
 
-            .g2 { background-gradient-angle: 45; }
+            .g2 { background-image: linear-gradient(45deg, red, yellow); }
 
-            .g3 { background-gradient-angle: 90; }
+            .g3 { background-image: linear-gradient(90deg, red, yellow); }
 
-            .g4 { background-gradient-angle: 135; }
+            .g4 { background-image: linear-gradient(135deg, red, yellow); }
 
-            .g5 { background-gradient-angle: 180; }
+            .g5 { background-image: linear-gradient(180deg, red, yellow); }
 
             .c1, .c2, .c3, .c4, .c5 {
                 background-color: olive;
@@ -27,16 +25,16 @@
                 vertical-align: middle;
             }
 
-            .c1 { corner-radius: 0px; }
+            .c1 { border-radius: 0px; }
 
-            .c2 { corner-radius: 10px; }
+            .c2 { border-radius: 10px; }
 
-            .c3 { corner-radius: 0px 10px 10px 0px; }
+            .c3 { border-radius: 0px 10px 10px 0px; }
 
-            .c4 { corner-radius: 18px; }
+            .c4 { border-radius: 18px; }
 
             .c5 {
-                corner-radius: 10px;
+                border-radius: 10px;
                 border: outset #BBBB00 2px;
             }
 
@@ -59,24 +57,17 @@ <h1>
             <h2>
                 Graphic features</h2>
             <p>
-                I have always wanted the W3C to add this features to the CSS spec (and so far, not
-                there yet :)</p>
+                Standard CSS backgrounds and border radii, same as any modern browser.</p>
             <ul>
                 <li><b>Gradients on backgrounds</b></li>
                 <li><b>Rounded corners</b></li>
             </ul>
-            <p>
-                And I think many many web designers would agree. Is it so hard or what?.</p>
             <h3>
                 Background Gradients</h3>
             <p>
-                It is a simple two color linear gradient, achieved by the adding of two CSS properties:</p>
-            <ol>
-                <li><code>background-gradient: (#Color)</code> - Second color of the gradient background,
-                    the first one is given by <code>background-color</code>. Not inherited.</li>
-                <li><code>background-gradient-angle: (number)</code> - Angle (in degrees, clockwise) of
-                    the gradient. Not inherited. Initial value:90</li>
-            </ol>
+                A <code>background-image</code> can be a <code>linear-gradient()</code> (or
+                <code>repeating-linear-gradient()</code>) function: an angle or <code>to &lt;side&gt;</code>
+                direction, followed by two or more comma-separated color stops.</p>
             <b>Some examples</b>
             <!-- Gradients table -->
             <table width="300px">
@@ -94,19 +85,19 @@ <h3>
                 </tr>
                 <tr>
                     <td>
-                        0 degrees
+                        0deg
                     </td>
                     <td>
-                        45 degrees
+                        45deg
                     </td>
                     <td>
-                        90 degrees
+                        90deg
                     </td>
                     <td>
-                        135 degrees
+                        135deg
                     </td>
                     <td>
-                        180 degrees
+                        180deg
                     </td>
                 </tr>
             </table>
@@ -119,18 +110,18 @@ <h3>
                 website you visit nowadays makes use of rounded corners, where a not very nice trick
                 with images and tables must be used.</p>
             <p>
-                In this renderer, the rounded corners are achieved by adding this CSS properties:</p>
+                In this renderer, the rounded corners are achieved with the standard CSS properties:</p>
             <ul>
-                <li><code>corner-ne-radius: (length)</code> Indicates the radius of the north-east corner.
-                    Not ineritted</li>
-                <li><code>corner-se-radius: (length)</code> Indicates the radius of the south-east corner.
-                    Not ineritted</li>
-                <li><code>corner-sw-radius: (length)</code> Indicates the radius of the south-west corner.
-                    Not ineritted</li>
-                <li><code>corner-nw-radius: (length)</code> Indicates the radius of the north-west corner.
-                    Not ineritted</li>
-                <li><code>corner-radius: (length){1,4}</code> Shorthand for the other corner properties.
-                    Not ineritted</li>
+                <li><code>border-top-left-radius: (length){1,2}</code> Indicates the radius of the top-left
+                    corner. Not inherited</li>
+                <li><code>border-top-right-radius: (length){1,2}</code> Indicates the radius of the top-right
+                    corner. Not inherited</li>
+                <li><code>border-bottom-right-radius: (length){1,2}</code> Indicates the radius of the bottom-right
+                    corner. Not inherited</li>
+                <li><code>border-bottom-left-radius: (length){1,2}</code> Indicates the radius of the bottom-left
+                    corner. Not inherited</li>
+                <li><code>border-radius: (length){1,4} [ / (length){1,4} ]?</code> Shorthand for the other
+                    corner properties, with an optional "/" for elliptical corners. Not inherited</li>
             </ul>
             <!-- Corners table -->
             <b>Some examples</b>
@@ -160,11 +151,11 @@ <h3>
                 </tr>
             </table>
             <pre>.c1, .c2, .c3, .c4, .c5 { background-color:olive; border:0px; color:white; vertical-align:middle; }
-.c1  { corner-radius: 0px }
-.c2  { corner-radius: 10px }
-.c3  { corner-radius: 0px 10px 10px 0px }
-.c4  { corner-radius: 18px }
-.c5  { corner-radius: 10px; border: outset #bb0 2px; }</pre>
+.c1  { border-radius: 0px }
+.c2  { border-radius: 10px }
+.c3  { border-radius: 0px 10px 10px 0px }
+.c4  { border-radius: 18px }
+.c5  { border-radius: 10px; border: outset #bb0 2px; }</pre>
         </blockquote>
     </body>
-</html>
+</html>
diff --git a/Source/Demo/Common/Samples/08.Tooltip.htm b/Source/Demo/Common/Samples/08.Tooltip.htm
@@ -24,9 +24,8 @@ <h2>Default tooltip style
             <pre>
 .htmltooltip {
     border:solid 1px #767676;
-    background-color:white;
-    background-gradient:#E4E5F0;
-    padding: 8px; 
+    background-color:#E4E5F0;
+    padding: 8px;
     Font: 9pt Tahoma;
 }</pre>
             <h2>Examples

diff --git a/Source/Demo/Common/TestSamples/12.Text.htm b/Source/Demo/Common/TestSamples/12.Text.htm
@@ -2,13 +2,13 @@
     <head>
         <title>Text</title>
         <link rel="Stylesheet" href="StyleSheet" />
-        <style>
-            .right {
-                text-align: right;
-                border-width: 1px;
-                border-style: solid;
-                border-color: blue;
-            }
+        <style>
+            .right {
+                text-align: right;
+                border-width: 1px;
+                border-style: solid;
+                border-color: blue;
+            }
         </style>
     </head>
     <body>
@@ -54,7 +54,7 @@ <h2>Transparent text</h2>
                 elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
             </div>
         </p>
-        <p style="background-color: #a33; background-gradient: rgb(255, 215, 0); background-gradient-angle: 0">
+        <p style="background-image: linear-gradient(to right, #a33, rgb(255, 215, 0))">
             <div style="color: rgba(0, 255, 0, 140)">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer_sagittis_Fusce_elementum_commodo_felis_Vivamus_lacinia_eleifend_libero_Donec 
                 lacus.

diff --git a/Source/Demo/Common/TestSamples/16.Borders.htm b/Source/Demo/Common/TestSamples/16.Borders.htm
@@ -12,13 +12,13 @@
                 </div>
             </p>
             <p>
-                <div style="padding: 5px; border: 1px solid black; corner-radius: 5px;">
-                    border 1px with corner-radius 5px
+                <div style="padding: 5px; border: 1px solid black; border-radius: 5px;">
+                    border 1px with border-radius 5px
                 </div>
             </p>
             <p>
-                <div style="padding: 5px; border: 2px solid black; corner-radius: 10px;">
-                    border 2px with corner-radius 10px
+                <div style="padding: 5px; border: 2px solid black; border-radius: 10px;">
+                    border 2px with border-radius 10px
                 </div>
             </p>
             <p>
@@ -37,8 +37,8 @@
                 </div>
             </p>
             <p>
-                <div style="padding: 5px; border: 2px dashed darkred; corner-radius: 10px;">
-                    dashed border 2px with corner-radius 10px
+                <div style="padding: 5px; border: 2px dashed darkred; border-radius: 10px;">
+                    dashed border 2px with border-radius 10px
                 </div>
             </p>
         </div>

diff --git a/Source/Demo/Common/TestSamples/23.Media queries and color scheme.htm b/Source/Demo/Common/TestSamples/23.Media queries and color scheme.htm
@@ -0,0 +1,99 @@
+<html>
+<head>
+<style>
+    body { font: 10pt Tahoma; margin: 10px; }
+
+    .card {
+        border: 1px solid #767676;
+        padding: 10px;
+        margin-bottom: 12px;
+    }
+
+    h3 { margin: 0 0 6px 0; font-size: 12pt; }
+    .note { color: #555555; font-size: 8pt; }
+
+    /* --- prefers-color-scheme -------------------------------------------------
+       The light styling below is the baseline. On GDI+ and WPF the adapter reports
+       the Windows app theme, so switching Windows to Dark and reloading should
+       flip this card to the dark palette. PdfSharp always reports light. */
+    .scheme {
+        background-color: #ffffff;
+        color: #111111;
+        border-color: #cccccc;
+    }
+    .scheme .verdict:after { content: "light"; }
+
+    @media (prefers-color-scheme: dark) {
+        .scheme {
+            background-color: #1e1e1e;
+            color: #f0f0f0;
+            border-color: #555555;
+        }
+        .scheme .verdict:after { content: "dark"; }
+    }
+
+    /* --- media type ----------------------------------------------------------
+       The adapter also supplies the media type: "screen" for GDI+/WPF, "print"
+       for PdfSharp. Exactly one of these two cards should be visible. */
+    .screen-only { display: none; }
+    .print-only { display: none; }
+
+    @media screen {
+        .screen-only { display: block; background-color: #e8f4ff; }
+    }
+
+    @media print {
+        .print-only { display: block; background-color: #f4f4f4; }
+    }
+
+    /* --- feature evaluation --------------------------------------------------
+       A feature the matcher cannot evaluate drops its whole block, so this card
+       must never turn red. */
+    @media all and (scan: interlace) {
+        .unsupported-feature { background-color: #ff0000; color: #ffffff; }
+    }
+
+    /* --- viewport width ------------------------------------------------------
+       Evaluated against the container's available width. */
+    .width-probe { background-color: #f0f0f0; }
+    @media (min-width: 400px) {
+        .width-probe { background-color: #e6ffe6; }
+        .width-probe .verdict:after { content: "viewport is at least 400px wide"; }
+    }
+    @media (max-width: 399px) {
+        .width-probe .verdict:after { content: "viewport is under 400px wide"; }
+    }
+</style>
+</head>
+<body>
+
+<div class="card scheme">
+    <h3>prefers-color-scheme</h3>
+    This card follows the platform colour scheme. Reported scheme: <b class="verdict"></b>.
+    <div class="note">GDI+ and WPF read the Windows app theme; PdfSharp always reports light.</div>
+</div>
+
+<div class="card screen-only">
+    <h3>@media screen</h3>
+    Visible because the adapter's media type is <b>screen</b>.
+</div>
+
+<div class="card print-only">
+    <h3>@media print</h3>
+    Visible because the adapter's media type is <b>print</b>.
+</div>
+
+<div class="card unsupported-feature">
+    <h3>Unsupported media feature</h3>
+    This card stays neutral. A media feature the matcher cannot evaluate drops its whole block
+    rather than applying the rules inside it, so the red styling in
+    <code>@media all and (scan: interlace)</code> must not win.
+</div>
+
+<div class="card width-probe">
+    <h3>Viewport width</h3>
+    <span class="verdict"></span>
+</div>
+
+</body>
+</html>
diff --git a/Source/HtmlRenderer.PdfSharp/Adapters/GradientBrushAdapter.cs b/Source/HtmlRenderer.PdfSharp/Adapters/GradientBrushAdapter.cs
@@ -0,0 +1,46 @@
+// "Therefore those skilled at the unorthodox
+// are infinite as heaven and earth,
+// inexhaustible as the great rivers.
+// When they come to an end,
+// they begin again,
+// like the days and months;
+// they die and are reborn,
+// like the four seasons."
+//
+// - Sun Tsu,
+// "The Art of War"
+
+using TheArtOfDev.HtmlRenderer.Adapters;
+using TheArtOfDev.HtmlRenderer.Adapters.Entities;
+
+namespace TheArtOfDev.HtmlRenderer.PdfSharp.Adapters
+{
+    /// <summary>
+    /// A multi-stop linear gradient "brush" for the PdfSharp backend. Unlike <see cref="BrushAdapter"/>,
+    /// this does not wrap a real <c>PdfSharp.Drawing.XBrush</c> - <c>XLinearGradientBrush</c> in the
+    /// PDFsharp 1.50 package this project depends on only supports 2 colors, no stop list. Instead this
+    /// just carries the gradient line and stops; <see cref="GraphicsAdapter"/>'s <c>DrawPath</c>/
+    /// <c>DrawRectangle</c> special-case this type and paint it as a series of adjacent 2-color
+    /// <c>XLinearGradientBrush</c> bands, one per consecutive stop pair - each band is a real 2-color
+    /// linear gradient by definition, so the composite is an exact piecewise-linear rendering, not an
+    /// approximation.
+    /// </summary>
+    internal sealed class GradientBrushAdapter : RBrush
+    {
+        public GradientBrushAdapter(RPoint p1, RPoint p2, (RColor Color, double Position)[] stops)
+        {
+            P1 = p1;
+            P2 = p2;
+            Stops = stops;
+        }
+
+        public RPoint P1 { get; }
+
+        public RPoint P2 { get; }
+
+        public (RColor Color, double Position)[] Stops { get; }
+
+        public override void Dispose()
+        { }
+    }
+}