Web Design Test Pages

• Background-Size Demo
• Mediaqueries
• Mediaqueries + viewport
• Mediaqueries + images : (2 W3C errors)
• SVG circles : (13 W3C errors)
• SVG logos : (4 W3C errors)
• HTML5 Forms : (2 W3C errors)
• Javascript Slideshow complete : (2 W3C errors)
• Javascript Slideshow controls : (2 W3C errors)
• Javascript Slideshow self-running
• Javascript Slideshow time2
• Javascript Slideshow fade

Columns

• 2 Columns - one with fixed width

Dimensions

• Test device sizes
• Show dimensions no viewport
• Show dimensions viewport=device-width
• Show dimensions with viewport = 240 pixels
• Show dimensions with viewport = 320 pixels
• Show dimensions with viewport = 480 pixels
• Show dimensions with viewport = 640 pixels
• Show dimensions with viewport = 768 pixels
• Show dimensions with viewport = 960 pixels
• Show dimensions with viewport = 1024 pixels
• Height of Parent div with floating child div's (overflow:auto)
• Padding, Border and Margin of an element

Viewports

• Show dimensions change viewport
• A fix for iPhone viewport scale bug by Shi Chuan : (1 W3C error)
• Wrap 240 pixels
• Wrap 480 pixels
• iPad viewport 768 pixels
• iPad viewport 1024 pixels
• iPad change viewport : (1 W3C error - onorientationchange)
• iPad change viewport no max scale : (1 W3C error - onorientationchange)

Test Layouts

• Layout 1024 x 690 iPad landscape
• Layout 768 x 950 iPad portrait
• Layout 960 x 536 iPhone landscape scroll
• Layout 960 x 416 iPhone landscape no-scroll
• Layout 640 x 834 iPhone portrait scroll
• Layout 640 x 712 iPhone portrait no-scroll

HTML5 Layouts (new tags)

• Layout linear HTML5
• Layout Float right Sidebox
• Layout Float right Sidebox + Navigation
• Layout Float left Content + Sidebox + Navigation
• Layout Float left Navigation + Float Right Content
• Layout Height 100%
• Layout Float Height 100%
• Layout Height 200%
• Layout Float Height 200%

Standard Layouts

• Layout linear HTML5
• Layout Float right Sidebox
• Layout Float right Sidebox + Navigation
• Layout Float left Content + Sidebox + Navigation
• Layout Float left Navigation + Float Right Content

Coloured Layouts

• Layout linear HTML5a (with display:block for HTML5 tags)
• Layout Float right Sidebox (standard tags)
• Layout Float right Sidebox + Navigation (standard tags)
• Layout Float left Content + Sidebox + Navigation (standard tags)
• Layout Float left Navigation + Float Right Content (standard tags)

Overflow Layouts

• Layout Float right Sidebox (standard tags)
• Layout Float right Sidebox + Navigation (standard tags)
• Layout Float left Content + Sidebox + Navigation (standard tags)
• Layout Float left Navigation + Float Right Content (standard tags)

Adaptive Layouts

• Proportional Layout
• Proportional Layout with Background Image covering HTML element
• Proportional Layout with repeating Background Image
• Proportional Layout with Background Image stretched
• Proportional Layout with Background Image covered
• Proportional Layout with Background Image attached fix with position in %
• Proportional Layout with Background Image positionned in pixels
• Proportional Layout with Background Image positionned in %
• Proportional Layout with magnified Background Image positionned in pixels
• Proportional Layout with javascript whidth test

Lists

• Simple list with li selector
• Simple list with ul selector
• Nested list with ul and li selector
• Nested list with multiple selectors
• Simple list with id selectors
• Nested list without bullets
• Nested horizontal list without bullets
• Nested horizontal list without bullets and 0 margin-border-padding
• Nested horizontal list without bullets and margin
• Nested horizontal list without bullets and padding
• Horizontal list with blocks
• Horizontal list with blocks, some are floating right
• Horizontal list with blocks, some are floating right, with hover effect
• Horizontal list with floating blocks and hover effect
• Horizontal list with floating blocks, hover effect and hidden text

Canvas

• Canvas
• Canvas 5
• Canvas 7
• Canvas Animation 4
• Canvas Animation 5
• Canvas Animation 6

Slideshows

• JQ Cycle
• slideshow
• image sequence with iscroll
• image sequences with lytebox and iscroll and real photos
• Tiny Slideshow
• Tiny Slideshow proportional (25 W3C errors : lytebox old version)
• Tiny Slideshow with pause/restart

PhotoSwipe

Examples (9 CSS errors in standard and jquery versions, 344 CSS errors with jquery-mobile)
Only the testcase 2 works in IE9 and IE8. In IE 7 there are formating problems, in IE6 there are additional functional problems.
All testcases work fine on iPhone and iPad. The modal window is resized if the orientation is changed (portrait / landscape)

• 1. default one instance #gallery with ul li tags
• 2. jquery idem (1) with jquery framework
• 3. multiple-image-sets two instances #gallery1 and #gallery2
• 4. jquery-mobile idem (3) with jquery-mobile framework
• 5. jquery-mobile-ajax idem (3) galleries (15,16) are loaded with Ajax
• 6. events loading events are displayed in the Firebug console
• 7. custom-toolbar the toolbar graphics are replaced by text
• 8. exclusive-mode the slideshow is started immediately, the close button is hidden
• 9. exclusive-mode-no-thumbnails idem (8), but without icons (body is empty, only javascript in head)
• 10. image-meta-data two metatags are displayed in the Firebug console
• 11. custom-captions custom styling by javascript of the caption HTML element (colored red)
• 12. custom-target slideshow displayed in div element (not fullscreen)
• 13. custom-target-with-indicators idem (12), but with indicators (bullets) below the slideshow
• 14. tap-image-go-to-url date-related-url in li tags is used to open the image in a new window when clicked
• 15. ajax-gallery1 used for testcase 5
• 16. ajax-gallery2 used for testcase 5
• 17. debug test page
• 18. debug-inline test page
• 19. debug-jquery test page
• 20. debug-jquery-mobile test page

TinyBox2

• Demo

Tooltips

• Tiny Tooltip
• Tooltip CSS

Change classes

• Change class with javascript

Slide Menus

• Slide Menus
• Slide Menus down
• Slide Menus down em
• Slide Menus down min
• Slide Menus up
• Slide Menus up min
• Floating Slide Menus down
• Floating Slide Menus up
• Floating Slide Menus down with PIE
• Floating Slide Menus down opened
• Floating Slide Menus down opened with PIE

Gradients

• Gradients

Images

• Image 1
• Image 2
• Image 3

Image Map's

• Image Usemap with Frameborder
• Image Map with Lytebox
• Image Map with Lyteshow
• Responsive Image Map with borders around link areas
• Responsive Image Map

API's

• Google Map

DOM classes

• Change classes

iPad / iPhone orientation

setTimeout

• Timer

Links

• Banner links

IE Hacks

• IE conditional comments :IE6=red; IE7=blue; IE8=green; IEx=yellow

Fonts

• Ancient Fonts

Facebook

• Facebook Opengraph Metatags (14 W3C errors : meta tags
• Facebook Opengraph Metags with comments
• Facebook Valid Code (26 W3C errors; 6 warnings)
• Facebook iFrame (17 W3C errors)

Mediaquerie's

• iOS Orientation CSS (1 W3C error)
• Mediaquery Height 100%
• Mediaquery stylesheets
• links to Mediaquerie Polyfill Test Documents

Sticky Footers

• Sticky Footer
• Sticky Footer Float
• Sticky Footer Mini
• Sticky Footer Background

Backgrounds no-repeat, position(right top), fixed

• Background
• Background cover
• Background contain
• Background 80% 100%
• Background 80% 100% Overflow
• Background Fake with Overflow

Maquettes's

• Maquette color
• Maquette color overflow
• Maquette color overflow sidebox
• Maquette grey
• Maquette background
• Maquette adaptive (1 W3C error : body onorientationchange)

Maquettes's in IE modes

• Maquette adaptive IE 6 (1 W3C error : meta http-equiv=X-UA-Compatible content=IE=EmulateIE6)

Superposed div's

• Superposed div's with absolute positions
• Superposed div's with relative positions and negative margins

iFrames

• Responsive iFrame with embedded Image Map
• Responsive iFrame with embedded Image Map with borders around link areas

Custom Google Search Engine

• CSE
• Search "Enrico Lunghi"
• Search Enrico Lunghi
• Search "Pascal Piron"
• Search "Mut(il)ations Multiples"
• Search "Art contemporain"
• Search "contemporary"
• Search "Zeitgenössische Kunst"
• Search "iFrame + Callback"

Padding - Border - Margin

• Padding-Border-Margin examples

DICOM Web Viewers

• Orthanc Web Viewer
• DWV Explorer static
• DWV Explorer mobile
• DWV Explorer simple
• Cornerstone Test
• Cornerstone Examples
• DWV explorer : instance 0
• DWV explorer : instance 0 with normal url
• DWV explorer : instance with single image
• DWV explorer : instance with single image with normal url
• DWV explorer : multiple instances with images
• DWV explorer : multiple instances with images with normal url
• DWV explorer : multiple instances from ivmartel
• DWV explorer : multiple instances from ivmartel with normal url
• DICOM instance 53320924
• DICOM instance 53321068
• DICOM instance 53323131
• DICOM instance 53322987
• DICOM instance 53322843

Pixel Image Manipulation

• Pixel Image
• Mini Pixel Image