gradients done, found some transform issues, added a testing rml file

2026-08-31 21:56:25 -05:00
parent 260a037314
commit 499dc17f7c
7 changed files with 819 additions and 84 deletions
--- a/assets/main.rcss
+++ b/assets/main.rcss
@@ -20,11 +20,21 @@ body {
    box-sizing: border-box;
 }

-div, section, article, header, footer, main, nav, aside {
+div,
+section,
+article,
+header,
+footer,
+main,
+nav,
+aside {
    display: block;
 }

-span, em, strong, a {
+span,
+em,
+strong,
+a {
    display: inline;
 }

@@ -34,18 +44,40 @@ p {
    margin: 1em 0px;
 }

-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
    display: block;
    font-weight: bold;
    margin: 0.83em 0px;
 }

-h1 { font-size: 2em; }
-h2 { font-size: 1.5em; }
-h3 { font-size: 1.17em; }
-h4 { font-size: 1em; }
-h5 { font-size: 0.83em; }
-h6 { font-size: 0.67em; }
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+h3 {
+    font-size: 1.17em;
+}
+
+h4 {
+    font-size: 1em;
+}
+
+h5 {
+    font-size: 0.83em;
+}
+
+h6 {
+    font-size: 0.67em;
+}

 em {
    font-style: italic;
@@ -72,7 +104,8 @@ blockquote {
    color: #555555;
 }

-code, pre {
+code,
+pre {
    font-family: "rmlui-debugger-font";
    background-color: #606060;
    color: #000000;
@@ -88,7 +121,8 @@ pre {
 }

 /* Lists */
-ul, ol {
+ul,
+ol {
    display: block;
    margin: 1em 0px;
    padding-left: 40px;
@@ -109,7 +143,8 @@ tr {
    display: table-row;
 }

-td, th {
+td,
+th {
    display: table-cell;
    padding: 4px 8px;
    text-align: left;
@@ -128,14 +163,19 @@ colgroup {
    display: table-column-group;
 }

-thead, tbody, tfoot {
+thead,
+tbody,
+tfoot {
    display: table-row-group;
 }

 /* ==========================================================================
   Form Inputs & Interactive UI Components
   ========================================================================== */
-button, input, select, textarea {
+button,
+input,
+select,
+textarea {
    display: inline-block;
    font-family: "rmlui-debugger-font";
    font-size: 14px;
@@ -144,7 +184,9 @@ button, input, select, textarea {
 }

 /* Traditional gray bevel button style */
-button, input[type="submit"], input[type="button"] {
+button,
+input[type="submit"],
+input[type="button"] {
    padding: 4px 12px;
    min-width: 40px;
    background-color: #e1e1e1;
@@ -153,25 +195,33 @@ button, input[type="submit"], input[type="button"] {
    text-align: center;
 }

-button:hover, input[type="submit"]:hover, input[type="button"]:hover {
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
    background-color: #d0d0d0;
    border: 1px #4f4f4f;
 }

-button:active, input[type="submit"]:active, input[type="button"]:active {
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active {
    background-color: #b5b5b5;
    border: 1px #000000;
 }

 /* Standard text field styling */
-input[type="text"], input[type="password"], textarea {
+input[type="text"],
+input[type="password"],
+textarea {
    padding: 4px;
    background-color: #ffffff;
    color: #000000;
    border: 1px #767676;
 }

-input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+input[type="text"]:focus,
+input[type="password"]:focus,
+textarea:focus {
    border: 1px #005aff;
 }

@@ -214,7 +264,8 @@ tab {

 tab:selected {
    background-color: #ffffff;
-    border-bottom: 1px #ffffff; /* Overlap the bottom border line */
+    border-bottom: 1px #ffffff;
+    /* Overlap the bottom border line */
    font-weight: bold;
 }

@@ -236,7 +287,8 @@ progress {
 progress-value {
    display: block;
    height: 100%;
-    background-color: #0078d7; /* Classic Windows Blue fill */
+    background-color: #0078d7;
+    /* Classic Windows Blue fill */
 }

 /* ==========================================================================
@@ -265,3 +317,9 @@ progress-value {
 .hidden {
    display: none;
 }
+
+
+
+div.gradient-test {
+    decorator: linear-gradient(to right, #000000, #ffffff);
+}
--- a/assets/main.rml
+++ b/assets/main.rml
@@ -1,12 +1,17 @@
 <rml>
+
  <head>
    <title>RmlUi Raylib</title>
    <link type="text/rcss" href="main.rcss" />
  </head>
+
  <body>
    <h1>Hello from RmlUi</h1>
-    <div style="position: relative; width: 300px; height: 200px; overflow: hidden; border-radius: 40px; background-color: #0000ff">
-      <div style="position: absolute; top: -20px; left: -20px; width: 150px; height: 150px; background-color: #ff0000; transform: rotate(15deg);"></div>
+    <div style="position: relative; width: 300px; height: 200px; overflow: hidden; border-radius: 40px;"
+      class="gradient-test">
+      <div
+        style="position: absolute; top: -20px; left: -20px; width: 150px; height: 150px; background-color: #ff0000; transform: rotate(15deg);">
+      </div>
    </div>
  </body>
-</rml>
+</rml>
--- a/assets/tests.rml
+++ b/assets/tests.rml
@@ -0,0 +1,262 @@
+<rml>
+
+  <head>
+    <title>RmlUi Raylib Render Interface — Feature Tests</title>
+    <style>
+      body {
+        width: 100vw;
+        height: 100vh;
+        overflow-y: auto;
+        background-color: #101010aa;
+        color: white;
+        font-size: 14px;
+        font-family: "rmlui-debugger-font";
+      }
+
+      .row {
+        display: block;
+        margin: 10px;
+      }
+
+      .label {
+        display: block;
+        margin-bottom: 4px;
+      }
+
+      .box {
+        display: inline-block;
+        width: 140px;
+        height: 100px;
+        margin-right: 12px;
+        vertical-align: top;
+      }
+
+      /* Basic rendering */
+      .basic-solid {
+        background-color: #3060ff;
+      }
+
+      .basic-border {
+        background-color: #202020;
+        border: 4px #ffcc00;
+      }
+
+      /* Transforms (2D and 3D) */
+      .transform-rotate {
+        background-color: #ff5050;
+        transform: rotate(20deg);
+      }
+
+      .transform-scale {
+        background-color: #50ff90;
+        transform: scale(1.3, 0.7);
+      }
+
+      .transform-skew {
+        background-color: #ffaa00;
+        transform: skew(15deg, 0deg);
+      }
+
+      .transform-3d {
+        background-color: #a060ff;
+        transform: perspective(400px) rotateY(45deg);
+      }
+
+      /* Clip mask */
+      .clip-parent {
+        position: relative;
+        background-color: #2050a0;
+        border-radius: 30px;
+        overflow: hidden;
+      }
+
+      .clip-parent-forced {
+        position: relative;
+        background-color: #2050a0;
+        border-radius: 30px;
+        overflow: hidden;
+        clip: always;
+      }
+
+      .clip-child-overflowing {
+        position: absolute;
+        top: -15px;
+        left: -15px;
+        width: 90px;
+        height: 90px;
+        background-color: #ff4040;
+      }
+
+      .clip-child-transform-only {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        width: 60px;
+        height: 60px;
+        background-color: #ff4040;
+        transform: rotate(30deg) scale(1.6);
+      }
+
+      /* Shaders: linear-gradient */
+      .gradient-linear {
+        decorator: linear-gradient(to right, #000000, #ffffff);
+      }
+
+      .gradient-linear-angled {
+        decorator: linear-gradient(45deg, red 20%, white, blue 80%);
+      }
+
+      .gradient-linear-repeating {
+        decorator: repeating-linear-gradient(to right, red, yellow 20px, red 40px);
+      }
+
+      /* Shaders: radial-gradient */
+      .gradient-radial {
+        decorator: radial-gradient(circle farthest-side at center, #ff6b6b, #fec84d, #4ecdc4);
+      }
+
+      .gradient-radial-ellipse {
+        decorator: radial-gradient(60px 30px at center, red, yellow, green);
+      }
+
+      /* Shaders: conic-gradient */
+      .gradient-conic {
+        decorator: conic-gradient(from 0deg at center, red, yellow, lime, aqua, blue, red);
+      }
+
+      .gradient-conic-pie {
+        decorator: conic-gradient(#9acd32 40%, #ffd700 0 75%, #f06 0);
+      }
+
+      /* Filters — not yet implemented */
+      .filter-blur {
+        background-color: #3060ff;
+        filter: blur(4px);
+      }
+
+      .filter-brightness {
+        background-color: #3060ff;
+        filter: brightness(1.8);
+      }
+
+      .filter-dropshadow {
+        background-color: #3060ff;
+        filter: drop-shadow(#000 6px 6px 2px);
+      }
+
+      .filter-grayscale {
+        decorator: linear-gradient(to right, red, blue);
+        filter: grayscale(1);
+      }
+
+      /* Backdrop-filter — not yet implemented */
+      .backdrop-behind {
+        position: relative;
+        background-color: #ff8800;
+      }
+
+      .backdrop-blur {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 80px;
+        height: 60px;
+        backdrop-filter: blur(6px);
+        background-color: #ffffff40;
+      }
+
+      /* Box shadow — not yet implemented */
+      .box-shadow-basic {
+        background-color: #303030;
+        box-shadow: #000a 0 4px 12px;
+      }
+
+      .box-shadow-inset {
+        background-color: #303030;
+        box-shadow: #000a 0 0 10px inset;
+      }
+
+      /* Mask image — not yet implemented */
+      .mask-basic {
+        background-color: #40c0ff;
+        mask-image: radial-gradient(circle at center, white, transparent);
+      }
+    </style>
+  </head>
+
+  <body>
+
+    <div class="row">
+      <div class="label">Basic rendering</div>
+      <div class="box basic-solid"></div>
+      <div class="box basic-border"></div>
+    </div>
+
+    <div class="row">
+      <div class="label">Transforms</div>
+      <div class="box transform-rotate"></div>
+      <div class="box transform-scale"></div>
+      <div class="box transform-skew"></div>
+      <div class="box transform-3d"></div>
+    </div>
+
+    <div class="row">
+      <div class="label">Clip mask</div>
+      <div class="box clip-parent">
+        <div class="clip-child-overflowing"></div>
+      </div>
+      <div class="box clip-parent">
+        <div class="clip-child-transform-only"></div>
+      </div>
+      <div class="box clip-parent-forced">
+        <div class="clip-child-transform-only"></div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="label">Shaders: linear-gradient</div>
+      <div class="box gradient-linear"></div>
+      <div class="box gradient-linear-angled"></div>
+      <div class="box gradient-linear-repeating"></div>
+    </div>
+
+    <div class="row">
+      <div class="label">Shaders: radial-gradient</div>
+      <div class="box gradient-radial"></div>
+      <div class="box gradient-radial-ellipse"></div>
+    </div>
+
+    <div class="row">
+      <div class="label">Shaders: conic-gradient</div>
+      <div class="box gradient-conic"></div>
+      <div class="box gradient-conic-pie"></div>
+    </div>
+
+    <div class="row">
+      <div class="label">Filters (not yet implemented, expect no effect)</div>
+      <div class="box filter-blur"></div>
+      <div class="box filter-brightness"></div>
+      <div class="box filter-dropshadow"></div>
+      <div class="box filter-grayscale"></div>
+    </div>
+
+    <div class="row">
+      <div class="label">Backdrop-filter (not yet implemented, expect no effect)</div>
+      <div class="box backdrop-behind">
+        <div class="backdrop-blur"></div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="label">Box shadow (not yet implemented, expect no effect)</div>
+      <div class="box box-shadow-basic"></div>
+      <div class="box box-shadow-inset"></div>
+    </div>
+
+    <div class="row">
+      <div class="label">Mask image (not yet implemented, expect no effect)</div>
+      <div class="box mask-basic"></div>
+    </div>
+
+  </body>
+</rml>