262 lines
6.5 KiB
Plaintext
262 lines
6.5 KiB
Plaintext
<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> |