chrisbell/rmlui-raylib-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chris bell
2026-08-31 21:56:25 -05:00
parent 260a037314
commit 499dc17f7c
7 changed files with 819 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
assets/tests.rml Normal file
View File

@@ -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>