JS checks

script did not run

onetwo

linknot a link i
bold and italic
ABC

firstboldlast

kid
relative no href at all
element

no dropdown above me

placeholder

customized built-in

var() still paints: this should have a blue background.
overridden
plain
popper
pct
3d
sheet
not mutated

flag href="#" with no preventDefault

Text above the template.

Text below the template.

Text above the template.

Text below the template.

UNASSIGNED - MUST NOT RENDER

Head, slotted second.

Body, in the default slot.

fade
plain
V1 html.no-js .x {opacity:1} pass = visible
V2 .no-js .x {opacity:1} pass = visible
V3 html.no-js .x {display:none} pass = nothing
V4 as V1, rule order swapped pass = visible
V5 control, plain .x {opacity:1} pass = visible
one two three
alpha
beta
hidden text
visible
line1
line2
replaced later
select and form bindings tick a b

Manual checks

Nothing below is counted in the verdict. A file upload needs a receiver, a keystroke needs a person, and the no-script cases need a click and no JavaScript at all -- none of that can be asserted by a script in this page, so what it does instead is put the fixture and the expected outcome next to each other.

Typing order and input events

Type kolibri into each field. Each keystroke mutates the DOM, which re-boxes the document; the re-box used to rebuild the widget behind the control and lose the caret, so every character landed at offset 0 and "kolibri" came out "irbilok". The log also names the element the input event was delivered to: on device, typing into the input once ran the textarea's listener.

focus a field and type

Form events that need a user

Type in the fields of the form above and click elsewhere: an input event per keystroke, one change on blur. Pick another option in the select, tick the checkbox, change the radio. The scripted half of the same form -- the bindings, the assignment that must fire nothing, reset() -- is checked automatically above.

ready

FormData on the wire

POSTs a FormData to the dumper on the QEMU host, which prints the request it received. This is the only way to see the generated multipart/form-data body and its boundary: the encoding happens between the wrapper and the native send(), where no script can look.

endpoint:

Upload wire format

Our own multipart encoder against a server that prints what it received. No JavaScript involved: this is the core's form submission. The second form has no file at all, which tells whether a plain POST works when there is nothing large to push. Both navigate away.

text: file:
text:

No-script activation

Every case here is pure HTML and CSS, and each one should work with scripting switched off. Click each one; the panel appearing (or the disclosure opening, and its + becoming a minus) is the pass.

1. label[for] pointing at a display:none checkbox (brave.com's menu)

The input generates no box at all, so only the label can be clicked. Expect the panel to appear and the button to turn red.

panel 1 — label[for] reached a boxless checkbox

2. label wrapping its control, with no for=

Clicking the words must toggle the checkbox next to them.

3. the checkbox clicked directly

A regression guard: this always toggled, but the sibling rule used to be left selecting against the old state, so nothing appeared.

toggle me
panel 3 — :checked ~ after a direct click

4. radio group

Turning one on must turn the other off, panels following.

panel 4a — radio one
panel 4b — radio two

5. details / summary accordion

Click a heading: it opens, the + becomes a minus, and the heading turns green. The second one starts open, so it should close.

Is this a real disclosure widget?

Yes — the body is not boxed at all until open is set.

Does it start open?

This one does, and clicking the heading must close it again.

Nested content survives?
  • list item
  • another, with markup

6. precedence inside a summary

The link must navigate; clicking anywhere else on the heading must toggle instead.

heading with a link in it

If you landed here the link won, which is correct.

7. a second summary is not a widget

Only the first summary discloses; the second is ordinary content and must stay hidden while closed.

first summary (this one toggles) second summary — content, not a widget

body text

scroll fixtures

scrollbox content
spacer
marker 1
spacer
marker 2
spacer