testing html5

home

css3

...is not html5, but it's suitable for doing a web-browser-check nonetheless

Opera and IE9 fail at displaying the header, it shouldn't look like this

Header in Opera

but like this

Header in Chrome

but then again, the russian doll effect in this section is made using Opera, so this header actually does look better using Opera or IE9

video

another Julia set animation, with rounded corners, at least in Firefox and IE9

it can be viewed in full screen if using Safari

right-clicking to "Save Video As..." works in all browsers except Safari

audio

right-clicking to "Save Audio As..." works in all browsers except Safari

2011-08-26 update - apple alters the code

Apple has strengthen their "we don't care about your license, we prohibit downloading media"-policy. In Safari 5.1 it is no longer possible to right-click on either video or audio. When inspecting the code, there are div-elements placed on top of all video- and audio-elements. Those divs are not placed there by the creator of the code, but by Apple.

To avoid unnecessary installations of Safari, the Apple shadow-divs are shown in the recording below.

canvas - simple drawing

simplest possible drawing-code (mousemove only), using jQuery since pure javascript causes abdominal pain

Your browser does not support the canvas tag.

drawing by pressing mouse, (mousedown, mousemove, mouseup)

Your browser does not support the canvas tag.

canvas - radial gradient

radial gradient from one large black circle and one small red circle

this does not work as intended if using Opera and it is very slow if using IE9

moving midpoint of red circle by moving mouse ↓ (the black circle is centered in canvas)

Your browser does not support the canvas tag.

moving both midpoints by moving mouse ↓

Your browser does not support the canvas tag.

moving midpoint of black circle by moving mouse ↓ (the red circle is centered in canvas)

Your browser does not support the canvas tag.

slider

a slider is displayed if using Chrome, Safari, Opera

the slider changes the radius of the black circle making up the radial gradiant above

black radius = 100

figure

the explanatory text within figcaption tags

Inverted Mandelbrot set
Inverted Mandelbrot set. The coloring is made after the argument, instead of the escape time.

color picker

a color picker is displayed in Opera (the Macintosh "pick any color anywhere" works as well)

if not Opera, try #780000 in the input bar, then enter

the chosen colour

inverted drawing

drag mouse to draw filled inverted rectangles

Your browser does not support the canvas tag.

drag mouse to draw filled inverted squares

Your browser does not support the canvas tag.

rubber band squares

drag mouse to draw one square

(by double-clicking fast one might get two squares or more)

Your browser does not support the canvas tag.

testing your browser

this is just too much

...for one page