Particle System Tests
section
Includes: tests 120, 121, 122
Native particle-emitter visual, start/stop behavior, q-particle-emitter component wrapper, SVG star mask tests, and mixed-container emitter tests.
Back to test index.
120. particle-emitter custom element start/stop
pending
Expected: Start particles | Stop particles | particle-emitter canvas layer
div#t120-system {
style {
display: block;
position: relative;
width: 420px;
height: 220px;
margin: 8px 0;
border: 1px solid #334155;
background: #07111f;
overflow: hidden;
}
particle-emitter#t120-emitter {
emitRate: "260"
lifetime: "1600"
lifetimeVariation: "90"
xVelocity: "0"
yVelocity: "-1.75"
xAcceleration: "0"
yAcceleration: "0.0028"
startSize: "30"
endSize: "10"
startOpacity: "0.9"
endOpacity: "0.02"
startSizeVariation: "7"
endSizeVariation: "5"
startOpacityVariation: "0.16"
endOpacityVariation: "0.02"
x: "210"
y: "214"
xVariation: "245"
yVariation: "20"
xVelocityVariation: "0"
yVelocityVariation: "0.04"
xAccelerationVariation: "0"
yAccelerationVariation: "0.005"
maxActiveParticles: "720"
maxActiveParticlesVariation: "120"
running: "false"
interval: "10"
src: "tools/assets/particle.png"
color: "#08c473"
}
}
div#t120-controls {
button#t120-start {
type: "button"
onclick {
this.closest("q-html").querySelector("#t120-emitter").running = true;
$("#t120-status").textContent = "running";
document.querySelector("#acc-main").resultReported(120, "Start particles | Stop particles | particle-emitter canvas layer");
}
text { Start particles }
}
button#t120-stop {
type: "button"
onclick {
this.closest("q-html").querySelector("#t120-emitter").running = false;
$("#t120-status").textContent = "stopped";
document.querySelector("#acc-main").resultReported(120, "Start particles | Stop particles | particle-emitter canvas layer");
}
text { Stop particles }
}
div#t120-status { text { stopped } }
}
onReady {
document.querySelector("#acc-main").resultReported(120, "Start particles | Stop particles | particle-emitter canvas layer");
}
121. q-particle-emitter SVG star mask
pending
Expected: q-particle-emitter | star mask | SVG mask | attr passthrough
q-import { dist/q-components/q-particle-emitter.qhtml }
div#t121-system {
style {
display: block;
position: relative;
width: 420px;
height: 220px;
margin: 8px 0;
border: 1px solid #334155;
background: #07111f;
overflow: hidden;
}
q-particle-emitter#t121-emitter {
emitRate: "240"
lifetime: "1900"
lifetimeVariation: "220"
xVelocity: "0"
yVelocity: "-1.35"
xAcceleration: "0"
yAcceleration: "0.0018"
startSize: "34"
endSize: "12"
startOpacity: "0.88"
endOpacity: "0.03"
startSizeVariation: "8"
endSizeVariation: "5"
startOpacityVariation: "0.08"
endOpacityVariation: "0.02"
x: "210"
y: "214"
xVariation: "190"
yVariation: "18"
xVelocityVariation: "0.08"
yVelocityVariation: "0.08"
xAccelerationVariation: "0.01"
yAccelerationVariation: "0.003"
maxActiveParticles: "640"
maxActiveParticlesVariation: "96"
running: "false"
interval: "10"
src: "tools/assets/particle.png"
emitterMask: "tools/assets/particle-mask-star.svg"
color: "#67e8f9"
}
}
div#t121-controls {
button#t121-start {
type: "button"
onclick {
this.closest("q-html").querySelector("#t121-emitter").running = true;
$("#t121-status").textContent = "running";
document.querySelector("#acc-main").resultReported(121, "q-particle-emitter | star mask | SVG mask | attr passthrough");
}
text { Start masked particles }
}
button#t121-stop {
type: "button"
onclick {
this.closest("q-html").querySelector("#t121-emitter").running = false;
$("#t121-status").textContent = "stopped";
document.querySelector("#acc-main").resultReported(121, "q-particle-emitter | star mask | SVG mask | attr passthrough");
}
text { Stop masked particles }
}
span#t121-status { text { stopped } }
span#t121-mask-status { text { star mask } }
span#t121-attr-status { text { attr pending } }
span#t121-expected { text { q-particle-emitter star mask SVG mask } }
}
onReady {
var emitter = document.querySelector("#t121-emitter");
emitter.setAttribute("emitRate", "88");
$("#t121-attr-status").textContent = "attr " + emitter.getAttribute("emitRate");
document.querySelector("#acc-main").resultReported(121, "q-particle-emitter | star mask | SVG mask | attr passthrough");
}
122. particle emitters on mixed container elements
pending
Expected: div emitter | h3 emitter | button emitter | span emitter | q-modal emitter
q-import { dist/q-components/q-modal.qhtml }
q-import { dist/q-components/q-particle-emitter.qhtml }
div#t122-board {
style {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
padding: 10px;
background: #07111f;
border: 1px solid #334155;
border-radius: 10px;
}
div#t122-div-host {
style {
display: block;
position: relative;
min-height: 130px;
overflow: hidden;
border-radius: 12px;
border: 1px solid #155e75;
background: #062336;
color: #dffcff;
padding: 12px;
}
strong { text { div host } }
particle-emitter#t122-div-emitter {
emitRate: "220"
lifetime: "2100"
lifetimeVariation: "180"
x: "110"
y: "128"
xVariation: "116"
yVariation: "10"
xVelocity: "0.12"
yVelocity: "-1.45"
xVelocityVariation: "0.12"
yVelocityVariation: "0.08"
xAcceleration: "0.006"
yAcceleration: "-0.001"
xAccelerationVariation: "0.006"
yAccelerationVariation: "0.002"
startSize: "22"
endSize: "9"
startSizeVariation: "5"
endSizeVariation: "3"
startOpacity: "0.82"
endOpacity: "0.03"
startOpacityVariation: "0.06"
endOpacityVariation: "0.02"
maxActiveParticles: "520"
maxActiveParticlesVariation: "80"
interval: "10"
running: "false"
src: "tools/assets/particle.png"
color: "#67e8f9"
}
}
h3#t122-h3-host {
style {
display: block;
position: relative;
min-height: 130px;
margin: 0;
overflow: hidden;
border-radius: 12px;
border: 1px solid #7c3aed;
background: #1e1238;
color: #f0e8ff;
padding: 12px;
font-size: 17px;
font-weight: 700;
}
text { h3 host }
q-particle-emitter#t122-h3-emitter {
emitRate: "210"
lifetime: "2300"
lifetimeVariation: "220"
x: "108"
y: "126"
xVariation: "130"
yVariation: "12"
xVelocity: "-0.08"
yVelocity: "-1.32"
xVelocityVariation: "0.18"
yVelocityVariation: "0.1"
xAcceleration: "-0.003"
yAcceleration: "-0.001"
xAccelerationVariation: "0.008"
yAccelerationVariation: "0.003"
startSize: "24"
endSize: "10"
startSizeVariation: "4"
endSizeVariation: "4"
startOpacity: "0.78"
endOpacity: "0.025"
startOpacityVariation: "0.07"
endOpacityVariation: "0.02"
maxActiveParticles: "480"
maxActiveParticlesVariation: "72"
interval: "10"
running: "false"
src: "tools/assets/particle.png"
color: "#c084fc"
}
}
button#t122-button-host {
type: "button"
style {
display: block;
position: relative;
min-height: 130px;
width: 100%;
overflow: hidden;
border-radius: 12px;
border: 1px solid #f59e0b;
background: #33220a;
color: #fff7d6;
padding: 12px;
text-align: left;
font: inherit;
}
text { button host }
particle-emitter#t122-button-emitter {
emitRate: "240"
lifetime: "1950"
lifetimeVariation: "160"
x: "116"
y: "128"
xVariation: "122"
yVariation: "9"
xVelocity: "0.02"
yVelocity: "-1.58"
xVelocityVariation: "0.2"
yVelocityVariation: "0.11"
xAcceleration: "0.002"
yAcceleration: "-0.002"
xAccelerationVariation: "0.006"
yAccelerationVariation: "0.003"
startSize: "20"
endSize: "8"
startSizeVariation: "6"
endSizeVariation: "2"
startOpacity: "0.86"
endOpacity: "0.035"
startOpacityVariation: "0.05"
endOpacityVariation: "0.018"
maxActiveParticles: "560"
maxActiveParticlesVariation: "84"
interval: "10"
running: "false"
src: "tools/assets/particle.png"
color: "#facc15"
}
}
span#t122-span-host {
style {
display: block;
position: relative;
min-height: 130px;
overflow: hidden;
border-radius: 12px;
border: 1px solid #16a34a;
background: #082915;
color: #dcfce7;
padding: 12px;
}
text { span host }
q-particle-emitter#t122-span-emitter {
emitRate: "220"
lifetime: "2200"
lifetimeVariation: "200"
x: "112"
y: "126"
xVariation: "138"
yVariation: "14"
xVelocity: "0.1"
yVelocity: "-1.38"
xVelocityVariation: "0.22"
yVelocityVariation: "0.12"
xAcceleration: "0.004"
yAcceleration: "-0.001"
xAccelerationVariation: "0.007"
yAccelerationVariation: "0.003"
startSize: "23"
endSize: "9"
startSizeVariation: "5"
endSizeVariation: "3"
startOpacity: "0.8"
endOpacity: "0.03"
startOpacityVariation: "0.06"
endOpacityVariation: "0.02"
maxActiveParticles: "500"
maxActiveParticlesVariation: "76"
interval: "10"
running: "false"
src: "tools/assets/particle.png"
color: "#86efac"
}
}
}
q-modal#t122-modal-host {
title { text { q-modal host } }
body {
div#t122-modal-particle-box {
style {
display: block;
position: relative;
min-height: 150px;
overflow: hidden;
border-radius: 12px;
border: 1px solid #ef4444;
background: #330d12;
color: #ffe4e6;
padding: 12px;
}
text { q-modal body emitter }
particle-emitter#t122-modal-emitter {
emitRate: "260"
lifetime: "2400"
lifetimeVariation: "240"
x: "180"
y: "146"
xVariation: "180"
yVariation: "12"
xVelocity: "-0.02"
yVelocity: "-1.5"
xVelocityVariation: "0.26"
yVelocityVariation: "0.1"
xAcceleration: "0.001"
yAcceleration: "-0.002"
xAccelerationVariation: "0.008"
yAccelerationVariation: "0.003"
startSize: "25"
endSize: "10"
startSizeVariation: "5"
endSizeVariation: "4"
startOpacity: "0.84"
endOpacity: "0.025"
startOpacityVariation: "0.06"
endOpacityVariation: "0.02"
maxActiveParticles: "620"
maxActiveParticlesVariation: "96"
interval: "10"
running: "false"
src: "tools/assets/particle.png"
mask: "tools/assets/particle-mask-star.svg"
color: "#fb7185"
}
}
}
}
div#t122-controls {
style { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
button#t122-start {
type: "button"
onclick {
var host = this.closest("q-html");
var emitters = host.querySelectorAll("particle-emitter,q-particle-emitter");
for (var i = 0; i < emitters.length; i += 1) { emitters[i].running = true; }
$("#t122-status").textContent = "running";
document.querySelector("#acc-main").resultReported(122, "div emitter | h3 emitter | button emitter | span emitter | q-modal emitter");
}
text { Start all mixed emitters }
}
button#t122-stop {
type: "button"
onclick {
var host = this.closest("q-html");
var emitters = host.querySelectorAll("particle-emitter,q-particle-emitter");
for (var i = 0; i < emitters.length; i += 1) { emitters[i].running = false; }
$("#t122-status").textContent = "stopped";
document.querySelector("#acc-main").resultReported(122, "div emitter | h3 emitter | button emitter | span emitter | q-modal emitter");
}
text { Stop all mixed emitters }
}
span#t122-status { text { stopped } }
span#t122-expected { text { div emitter h3 emitter button emitter span emitter q-modal emitter } }
}
onReady {
this.querySelector("#t122-modal-host").show();
document.querySelector("#acc-main").resultReported(122, "div emitter | h3 emitter | button emitter | span emitter | q-modal emitter");
}