Overflow Visibility Tests

Zero Dimensions with Overflow Hidden

Zero width ancestor, parent, self

Zero height ancestor, parent, self

Zero width ancestor, positive parent

Zero height ancestor, positive parent

Text Content with Zero Dimensions

lorem ipsum dolor sit amet

ancestor width: 0

ancestor height: 0

Positive Dimensions with Overflow Hidden

ancestor with size, parent with size & overflow: hidden

positive ancestor, zero parent

Overflow Auto with Zero Dimensions

parent no size, overflow: auto

Mixed Dimension Scenarios

Zero width

Has text content

Overflow Hidden scenarios

Overflow Y Hidden scenarios

Overflow X Hidden scenarios

Overflow Auto Scenarios

out of bounds, parent wide, ancestor overflow: auto

parent no size, overflow: auto

Overflow Scroll Scenarios

out of scrolling bounds, position: absolute

Overflow with Relative Positioning

out of bounds, position: relative

out of bounds but visible, position: relative

Overflow with Flex Container

red

green

blue

Complex Overflow Scenarios

Example

test test-1

test test-2

Clip-Path Scenarios (note: legacy mode does not support clip-path)

clip-path child of polygon that clips everything

clip-path

clipped content

visible content

elliptical content

path content

clipped by clip: rect(0,0,0,0)

masked by CSS mask