CSS display:none Test EPUB

This EPUB tests that elements with CSS display:none are correctly hidden during rendering. Each chapter exercises a different scenario.

For each chapter, the PASS/FAIL criteria are listed. Hidden content is marked with [HIDDEN] in the source and should NOT appear on screen.

Test: Class Selector

The paragraph below has class="hidden" and should NOT be visible.

[HIDDEN] This paragraph uses class="hidden" and must not appear.

If you can only see this paragraph and the one above the hidden marker, the test PASSES.

Multiple hidden elements

Visible paragraph before hidden block.

[HIDDEN] This div has class="hidden".

[HIDDEN] Second paragraph inside hidden div.

Visible paragraph after hidden block.

Hidden span (inline)

This sentence has a [HIDDEN] secret word hidden span in the middle.

Second hidden class name

[HIDDEN] This paragraph uses class="invisible".

Visible paragraph after invisible one.

Test: Element Selector

The aside element below should be completely hidden because the stylesheet sets aside to display:none.

[HIDDEN] Sidebar Title

[HIDDEN] This aside content must not render.

[HIDDEN] Neither should this second paragraph.

If no aside content is visible, this test PASSES.

Multiple asides

Text before first aside.

[HIDDEN] First aside block.

Text between asides.

[HIDDEN] Second aside block.

Text after last aside.

Test: Combined Element.Class Selector

Only div elements with class="removeme" should be hidden. A span with class="removeme" should still be visible (no rule for span.removeme), but a div without the class should also be visible.

[HIDDEN] This div.removeme must not appear.

This plain div should be visible.

A visible span.removeme should still appear because the CSS rule only targets div.removeme.

span.secret selector

The word [HIDDEN] in this sentence uses span.secret and should be hidden, but a

div with class="secret"

would not match span.secret (though it matches .hidden if also classed).

Test: Inline Style

Elements with style="display:none" directly in the HTML attribute.

[HIDDEN] Paragraph with inline display:none.

Visible paragraph after inline-hidden one.

[HIDDEN] Div with inline style="display: none".

[HIDDEN] Second child of inline-hidden div.

Visible paragraph after inline-hidden div.

Inline style with other properties

[HIDDEN] Inline style mixed with other CSS properties.

Visible paragraph below.

Inline on a span

Text before [HIDDEN] inline span and text after.

Test: Nested Hidden Content

When a parent element is hidden, all its children must also be hidden, even if the children themselves have no display:none.

[HIDDEN] Nested heading

[HIDDEN] Nested paragraph one.

[HIDDEN] Nested paragraph two.

[HIDDEN] Deeply nested paragraph.

[HIDDEN] Even deeper nesting level 3.

Only this paragraph should be visible after the hidden container.

Hidden parent with visible-class child

[HIDDEN] Child has class="visible" but parent is hidden. Parent wins - this must NOT appear.

Visible paragraph confirming parent-wins behavior.

Test: Hidden Headings

Headings with display:none should not appear or affect layout.

[HIDDEN] This H2 is hidden via class

Paragraph after hidden H2.

[HIDDEN] This H3 is hidden via inline style

Paragraph after hidden H3.

Visible H2 for comparison

This heading-paragraph pair should render normally.

[HIDDEN] Full-size hidden H1

Paragraph after hidden H1. No extra vertical space should appear above.

Test: Style Priority

Inline overrides stylesheet to hide

The div below has no hidden class but an inline style hides it.

[HIDDEN] Hidden by inline style, no class involved.

Visible after inline-hidden div.

Inline overrides stylesheet to show

The paragraph below has class="hidden" but inline style="display:block" overrides it back to visible. It SHOULD appear.

VISIBLE: class="hidden" overridden by inline style="display:block".

If the paragraph above is visible, inline override works correctly.

element.class override of class

The paragraph below has class="force-show hidden". The .hidden class sets display:none, but p.force-show sets display:block at higher priority.

VISIBLE: p.force-show overrides .hidden back to display:block.

If the paragraph above is visible, element.class priority works.

Test: Mixed Siblings

Alternating visible and hidden elements to verify rendering continuity.

Visible 1

[HIDDEN] Hidden 1

Visible 2

[HIDDEN] Hidden 2

Visible 3

[HIDDEN] Hidden 3

Visible 4

[HIDDEN] Hidden aside

Visible 5

[HIDDEN] Hidden 4

Visible 6

Expected result

You should see "Visible 1" through "Visible 6" with no gaps or [HIDDEN] markers between them.

Test: Hidden Images

Images can be hidden via CSS on the img tag itself, or by hiding a parent container that contains images.

Visible image (control)

This image should be visible:

If you see the image above, image rendering works.

Image hidden via class="hidden"

The image below has class="hidden" and should NOT appear:

No image should be visible between the two paragraphs above.

Image hidden via inline style

The image below has style="display:none" and should NOT appear:

No image should be visible between the two paragraphs above.

Image hidden via img.suppressed selector

The image below has class="suppressed" and the CSS rule img.suppressed sets display:none:

No image should be visible between the two paragraphs above.

Image inside hidden parent

The div below is hidden; the image inside should also be hidden:

[HIDDEN] Text before image in hidden div.

[HIDDEN] Text after image in hidden div.

No image or text from the hidden div should appear above.

Image with class="hidden" overridden by inline style

The image below has class="hidden" but inline style="display:block" overrides it back to visible. It SHOULD appear:

If the image above is visible, inline override on img works correctly.

Test: Mixed Images and Text

Alternating visible and hidden images and text.

Visible text 1

Visible text 2

Visible text 3

Visible text 4

Visible text 5

Expected result

You should see "Visible text 1" through "Visible text 5", with only one image visible (after "Visible text 1").

Chapter One

[HIDDEN] Publisher's note: this sidebar contains promotional material that should not appear in the reading flow.

It was a dark and stormy night. The wind howled through the empty streets of the old town, rattling shutters and scattering leaves.

[HIDDEN] Internal markup: word count 2847, revision 3, editor JSmith

Maria pulled her coat tighter and hurried along the cobblestones. She had been walking for what felt like hours, though the clock tower had only just struck nine.

[HIDDEN] Draft note: expand this scene, add dialogue

The cafe at the corner of Elm Street was still open, its warm light spilling out onto the wet pavement like a golden promise.

[HIDDEN] placeholder for illustration reference [HIDDEN] decorative image removed by publisher

"Two coffees," she told the barista, even though she was alone. Old habits die hard.

[HIDDEN] -- Scene Break --

The morning brought clarity, as mornings often do. The storm had passed, leaving the world scrubbed clean and glistening.