q-style, q-theme, and q-painter
section
Includes: tests 4, 14, 15, 18, 41, 42, 43, 115, 117, 118
Style blocks, q-style, q-theme, q-style-class, default themes, q-painter, and q-transition coverage.
Back to test index.
4. Style block + text
pending
Expected: Plain text content | font-size: 20px
p { style { font-size: 20px; margin: 0; } text { Plain text content } }
onReady {
var acc = document.querySelector("#acc-main");
if (acc) {
acc.resultReported(4, this.innerHTML);
}
}
14. q-style direct apply
pending
Expected: Styled panel | border: 1px solid #93c5fd
q-style panel { backgroundColor: #eff6ff color: #1e293b border: 1px solid #93c5fd } panel,div { text { Styled panel } }
onReady {
var acc = document.querySelector("#acc-main");
if (acc) {
acc.resultReported(14, this.innerHTML);
}
}
15. q-theme selector mapping
pending
Expected: Title | Description
q-style title-accent { color: #1d4ed8 } q-style body-muted { backgroundColor: #64748b } q-theme article-theme { h3 { title-accent } p { body-muted } } article-theme { div { h3 { text { Title } } p { text { Description } } } }
onReady {
var acc = document.querySelector("#acc-main");
if (acc) {
acc.resultReported(15, this.innerHTML);
}
}
18. q-default-theme fallback + override
pending
Expected: themed card
q-style panel-base { backgroundColor: #eef3fb color: #0f172a } q-style panel-override { backgroundColor: #ffedd5 color: #7c2d12 } q-default-theme card-theme { .card { panel-base } } q-theme card-demo-theme { card-theme { } .card { panel-override } } card-demo-theme { div.card { text { themed card } } }
onReady {
var acc = document.querySelector("#acc-main");
if (acc) {
acc.resultReported(18, this.innerHTML);
}
}
41. q-style-class merge
pending
Expected: class-merge | w3-card
q-style card-shell { q-style-class { w3-card w3-round-large w3-padding } borderColor: #cbd5e1 } card-shell,div#card41 { text { class-merge } }
onReady {
var acc = document.querySelector("#acc-main");
if (acc) {
acc.resultReported(41, this.innerHTML);
}
}
42. q-theme composition
pending
Expected: Remove
q-style button-base { backgroundColor: #0f766e color: #ffffff } q-style button-danger { backgroundColor: #b91c1c color: #ffffff } q-theme base-theme { button { button-base } } q-theme admin-theme { base-theme { } .danger { button-danger } } admin-theme { button.danger { text { Remove } } }
onReady {
var acc = document.querySelector("#acc-main");
if (acc) {
acc.resultReported(42, this.innerHTML);
}
}
43. scoped theme application
pending
Expected: Scoped Title
q-style title-accent { color: #1d4ed8 } q-theme article-theme { h3 { title-accent } } article-theme { div { h3 { text { Scoped Title } } } }
onReady {
var acc = document.querySelector("#acc-main");
if (acc) {
acc.resultReported(43, this.innerHTML);
}
}
115. q-painter + q-style-painter declarative worklet mapping
pending
Expected: t115-ok
q-painter painter115 {
q-property someprop: "rgba(40,80,160,0.9)"
onpaint {
this.fillStyle = this.someprop;
this.fillRect(0, 0, this.width, this.height);
}
}
q-style style115 {
width: 84px
height: 26px
border: 1px solid #0f172a
q-style-painter {
background { painter115 }
}
}
q-theme theme115 {
.t115-panel { style115 }
}
theme115 {
div#t115-target.t115-panel { text { } }
}
div#t115-out { text { waiting } }
onReady {
var host = this;
setTimeout(function() {
var acc = document.querySelector("#acc-main");
var out = host.querySelector("#t115-out");
var target = host.querySelector("#t115-target");
var support = !!(CSS && CSS.paintWorklet && typeof CSS.paintWorklet.addModule === "function");
var bg = target ? String(target.style.backgroundImage || "").trim() : "";
var prop = target ? String(target.style.getPropertyValue("--someprop") || "").trim() : "";
var ok = support ? (bg.indexOf("paint(") >= 0 && prop.length > 0) : true;
var value = (ok ? "t115-ok" : "t115-fail") + "|support=" + String(support ? 1 : 0) + "|bg=" + bg + "|var=" + prop;
if (out) {
out.textContent = value;
}
if (acc && typeof acc.outcomeReported === "function") {
acc.outcomeReported(115, ok, value);
} else if (acc && typeof acc.resultReported === "function") {
acc.resultReported(115, value);
}
}, 520);
}
117. q-transition + q-style-transition declarative transition mapping
pending
Expected: t117-ok | opacity 3000ms ease-in-out 50ms
q-transition fade117 {
property { opacity }
delay { 50 }
timing { ease-in-out }
duration { 3000 }
}
q-style style117 {
q-style-transition { fade117 }
}
q-theme theme117 {
.t117-box { style117 }
}
theme117 {
div#t117-target.t117-box { text { transition-target } }
}
button#t117-toggle {
text { toggle opacity }
onclick {
var target = this.closest("q-html").querySelector("#t117-target");
if (!target) { return; }
var current = String(target.style.opacity || "1").trim();
target.style.opacity = (current === "1" || current === "") ? "0.2" : "1";
}
}
div#t117-out { text { waiting } }
onReady {
var host = this;
setTimeout(function() {
var acc = document.querySelector("#acc-main");
var out = host.querySelector("#t117-out");
var target = host.querySelector("#t117-target");
if (target) {
target.style.opacity = "1";
}
var transitionValue = target ? String(target.style.transition || "").trim() : "";
var ok = transitionValue.indexOf("opacity") >= 0 &&
transitionValue.indexOf("3000ms") >= 0 &&
transitionValue.indexOf("ease-in-out") >= 0 &&
transitionValue.indexOf("50ms") >= 0;
var value = (ok ? "t117-ok" : "t117-fail") + " | " + transitionValue;
if (out) {
out.textContent = value;
}
if (acc && typeof acc.outcomeReported === "function") {
acc.outcomeReported(117, ok, value);
} else if (acc && typeof acc.resultReported === "function") {
acc.resultReported(117, value);
}
}, 420);
}
118. q-theme anonymous q-style rule blocks
pending
Expected: t118-ok | color: #1d4ed8 | color: #334155 | background-color: #e2e8f0
q-style body-panel-118 {
backgroundColor: #e2e8f0
}
q-theme anon-theme-118 {
h3 { q-style { color: #1d4ed8 } }
.summary118 { q-style { color: #334155 } body-panel-118 }
}
anon-theme-118 {
div {
h3#t118-title { text { Theme heading } }
p#t118-summary.summary118 { text { This paragraph uses anonymous and named q-styles. } }
}
}
div#t118-out { text { waiting } }
onReady {
var host = this;
setTimeout(function() {
var acc = document.querySelector("#acc-main");
var out = host.querySelector("#t118-out");
var title = host.querySelector("#t118-title");
var summary = host.querySelector("#t118-summary");
var titleStyle = title ? String(title.getAttribute("style") || "").trim() : "";
var summaryStyle = summary ? String(summary.getAttribute("style") || "").trim() : "";
var ok = titleStyle.indexOf("color: #1d4ed8") >= 0 &&
summaryStyle.indexOf("color: #334155") >= 0 &&
summaryStyle.indexOf("background-color: #e2e8f0") >= 0;
var value = (ok ? "t118-ok" : "t118-fail") + " | " + titleStyle + " | " + summaryStyle;
if (out) {
out.textContent = value;
}
if (acc && typeof acc.outcomeReported === "function") {
acc.outcomeReported(118, ok, value);
} else if (acc && typeof acc.resultReported === "function") {
acc.resultReported(118, value);
}
}, 180);
}