QHTML WASM Core Syntax Test 01
Elements and nesting
div.box {
h3 { text { PASSED } }
p { text { Nested element rendered. } }
}
Selector chains
div.box,section.inline-panel,h3.pass { text { PASSED } }
Class and id shorthand
div#main.card.box {
p.pass { text { PASSED } }
}
q-component my-card {
div.box { text { PASSED } }
}
my-card#card-1.primary { }
Attributes
a.pass {
href: "https://example.com"
target: "_blank"
text { PASSED }
}
text, html, and style blocks
p.pass {
style { font-size: 20px; margin: 0; }
text { PASSED }
}
div.box {
html { <strong class="pass">PASSED</strong> }
}
Anchor positioning
q-component marker {
div.marker { text { ${this.label} } }
}
div.anchor-stage {
marker menu { label: "Anchor" }
div.anchored {
left: menu.right
top: menu.bottom
text { PASSED }
}
}
Behavior and NumberAnimation
q-component animated-panel {
q-property panelWidth: "50%"
behavior on panelWidth {
q-property-animation {
duration: 1000
}
}
div.panel-fill {
style { width: 50%; }
text { PASSED }
}
onready {
this.querySelector(".panel-fill").style.width = "50%"
}
onpanelWidthchanged(value) {
this.querySelector(".panel-fill").style.width = value + "%";
}
onclick {
this.panelWidth = "100%"
}
}
animated-panel panelDemo { }
q-timer panelTrigger {
interval: 5000
running: true
repeat: false
ontimeout() {
panelDemo.panelWidth = "100%"
}
}
Queued animation and script action
q-component testelement {
width: "100px"
behavior on width {
q-sequential-animation {
q-property-animation {
duration: 1600
}
q-script-action {
this.querySelector("#test105div").innerHTML = "PASSED"
}
}
}
onready {
this.width = "500px"
}
onwidthchanged(newwidth) {
document.querySelector("#test105div").style.width = newwidth;
}
div#test105div {
text { testing.. }
}
}
testelement myelement { }