Test Cases, Examples and Fluff

HTML

• HTML document saved as UTF-8 (using Notepad) and using the UTF-8 Content-Type meta tag
• Testing Hyphens/Dashes and other symbols
• Align tables next to each other
• <ul> with <span> !!
• Empty DIV - does it show?
• mailto:
• Definition Lists... <dl> <dt> <dd>
• Displaying a 'star' character (★)
• Validation Error - End tag for element HEAD which is not open
• Using the OBJECT element (to include a file) - like an IFRAME
• Empty action attribute in form stops JavaScript?
• Removing the SPACE around a checkbox?
• Default margins on a <p> tag
• <p> margins affecting margins of parent container (collapsing margins)
• Testing TAB order
• A Valid HTML4.01 Form/Table Combo
• <SELECT> list with <OPTION> tags - Ok in Netscape 4 ?!
• Empty DIV on top of links - still clickable? A. No!
• TABLES: Fixed and flexible row heights - possible in IE?
• Breaking an OL with a sub-heading, but numbers should continue - Strict DOCTYPE.
• Select list focus behaves different in FF and IE6 ?!
• Using the TITLE attribute (on an anchor) to provide a multiline tooltip
• BACKGROUND attribute on elements other than the BODY (not W3C)
• Setting the number of columns in a table
• The soft hyphen (&shy;) and cross browser compatibility
• Phrase elements and font style elements OR logical and physical tags
• BASE element and relative / root-relative URI's
• Form action should replace file inside the IFRAME (_self)
• Not valid to wrap a TR element in an anchor, but what's the best way to make a row into a link
• Letting the browser URL encode a link - OK cross browser?!
• Form target is an IFRAME
• Conditional Comments - IE Only (but not quite)
• Does a 4MB jpeg image display OK in IE (yes, not web friendly!)
• Allow a file (ISO) to be downloaded just by linking to it

HTML5

The all new HTML 5

• Bug in Chrome with external stylesheet?

XHTML

Articles particular to XHTML, rather than just HTML

• Serving as XHTML/XML ?where has it gone?
• XML Declaration causes IE to revert to Quirks Mode!
• IE6 doing strange with innerHTML

CSS

May also depend on a particular HTML layout, but predominantly implemented using CSS

• Box Model Test
• Zero Margins with doctype
• UL Tool Bar
• Fixed size table cells with larger images
• Reducing width of a wide multiple <select> list
• Reducing width of a wide drop-down <select> list
• TimA (Webmaster World Forum) | Solution | Solution2
• Flickering CSS rollover buttons
• Browser Check Error - Error Parsing Styles
• TEST :hover pseudo class to change image in both IE and Firefox
• Linking to a local image on your HDD
• Two column layout - navigation floated left, content floated right
• You can't avoid inheritance, so use it!
• TEST: Styling Lists (problem(?) with right-border in IE) - strange CSS/JavaScript
• display: inline-block (IE Only, Mozila alternative)
• TEST: Centre text in footer
• HTML, BODY - What's the difference, what's reqd?
• Difference between SPAN and DIV tags - HTML?
• Using a custom image in a list
• Centreing a DIV without setting its width
• Floating images flow outside the containing DIV
• (Another) floated DIV problem
• Setting page height (viewport) to 100%
• overflow, overflow-x and overflow-y
• Simple CSS popup
• Aligning baselines of column DIVs
• Vertically centreing the text within a link
• TEST: Rollover image list not working correctly in IE6
• Setting the background-color on the entire page
• List bullets are inside table which is floated left
• Background-image and background-color on a DIV - correct order?
• Relative path in external CSS file - relative to what?
• Centred background-image on BODY - stay centred when page reduced?
• Overriding anchor styles in Firefox
• Centreing a site horizontally
• Thumbnail gallery with an unordered list
• Styling the NOSCRIPT section
• Are all images loaded that are referenced in the CSS?
• Centreing an image using CSS
• Synchronised hover on two elements
• Display elements as table-cell - issue with Opera 9.5?
• Font size on HTML element set ot 62.5% and using ems thereafter
• Does !important override specificity?
• How well do the browsers resize images. Possible fix for IE >=7
• Testing floated image with text flowing to the right - OK in IE8?
• Centreing a background image in a table in both IE and FF (no doctype!)
• Position a DIV in a TD and make it completly fill the TD

Page Layouts

General page layouts. Two column fluid, three column fixed, with headers and footers or without. Is it HTML? Is it CSS? Well, it's very much both and warranted its own category. Some of these layouts are to a specific design, rather than a generic n-column fluid/fixed layout.

• 4 column relative width layout
• Fixed width, header, menu, 3 column, footer, advert column.

JavaScript

• Read the font size of an element
• JS: screen / window / move / resize
• JS: Dimensions of a DIV
• JavaScript redirect using Cookies
• <form target="_blank"> - resetting form after submit (inc. Image submit btn)
• Flashing background colours!
• Currency conversion (JavaScript)
• Exec Command...
• Testing offsetWidth, offsetTop etc.
• Change background-color in onMouseOver/onMouseOut events
• Popup a new window with JavaScript window.open()
• IFRAMEs - Scroll document in IFRAME to set position(?) / Read contents of IFRAME
• EVENTS: onkeypress, onkeydown, onkeyup
• Changing the style of an actual class, not an element
• Testing limit of nodeValue (4096 Bytes?)
• IFRAMEs - Checking whether IFRAME has loaded
• navigator Object - What does it contain...?
• Get the properties of any Element
• Associative Arrays and converting to strings
• Write contents, including JS, into DIV using innerHTML
• Accessing a forms fields, by the forms[] array and by DOM level 1 methods.
• Use the delete operator to delete Properties from an object
• Simple and secure way of confirming a deletion
• EVENTS: onclick - is it a mouse only event?
• Changing the window.status in onmouseover/onmouseout events
• Opening a popup window (window.open) and checking TITLE
• Assigning events from within another event
• Changing style of element using onmouseover/onmouseout (rollover) events (OLD STYLE)
• Encoding < and > in a string using a regular expression (regex)
• Test for assignment fails in IE - or does it? if (my_var = x)
• Clear the 'hint' in a form field when user first moves focus to it
• Hidden form fields do not reset to their orignal values on Refresh
• Simple date arithmetic in JavaScript
• Read a multi select list (type="select-multiple")
• Swap an image and caption from the onmouseover event

PHP

• Include HTML using PHP
• File upload... (PHP)
• An example of menu/submenu function
• Get the current time and halt the page load
• Get params from URL
• Experimenting with file saved as UTF-8 (Same file saved_as_ansi.php)
• Get the mouse coords when user clicks/submits a form on the image
• Quick session test (also in UTF-8) [Page 2]
• Timer Class (PHP)
• Test include path - is the include path just a prefix?
• (Strings) Variable parsing
• Using PHP to create a dynamic stylesheet
• Search for multiple words in a string and return if found
• Halt a file include whilst inside the included file?
• Include an external file (perhaps on another server) via an HTTP URL
• Simple test of switch()... case() statement
• Test what the constant PHP_EOL returns - dependant on the OS of the server?
• Base64 Decode - unscramble those encoded hacks in webpages
• Read the state of a series of checkboxes when a form is submitted
• View the last 10 lines from the end of a file, in reverse order
• Comparing equality between several variables
• Multiple pages and passing information from form to form - multiple forms
• Calculate the time period (ie. whole days) between two dates
• Unset elements of an array safely
• Process a .jpg file for PHP...
• Pass and store a callback function and then call it later?
• Behaviour of PHP's dirname() function
• Reading XML file using SimpleXML
• What is the current working directory (CWD) when including a file? And other SERVER vars...
• Link on page appears to go nowhere when followed (actually redirected back)
• Check the $_SERVER['REQUEST_METHOD'] when a form is submitted
• Getting the memory usage that your script is using
• Example usage of the declare construct with the ticks directive.
• Class inheritance appears to work both ways - both up and down the chain!
• A two page dynamic form based on the 'number of guests'
• Using magic methods on a static class
• Checking the error_reporting() level inside of the __autoload() function
• Using the DateTime class to generate a random date outside of the usual range 1901 to 2038
• Test print_r(), var_dump(), var_export() on class object
• Passing back '*' (asterisk) in form OPTION value - OK?
• Calculating a persons age from their DOB (PHP, but principle applies to all)
• Show the current scripts directory
• Read a CSV file into an array
• Authenticate from pages with different character encodings. ANSI (ISO-8859-1) vs UTF-8
• Test the browser cache by displaying the current time server-side - no cookies

.htaccess

• Extensionless URLs

Design Patterns

• Model View Controller example in PHP (based on code from phpro.org)

General Tests

Test pages not necessarily testing any particular method...

• Hide Table/Toggle Image (Webmaster World JS Forum: /javascript/3154470.htm)
• pasttimegifts.co.uk (Webmaster World CSS Forum: /css/3242564.htm)
• Table breaking out of a DIV (Webmaster World CSS Forum: /css/3619277.htm)
• View sequences in data (Webmaster World PHP Forum: /php/3911659.htm)

Proof of concept

Pages demonstrating a particular task, perhaps pulling together a combination of HTML/CSS/JavaScript/PHP methods that could be developed further.

• Dynamic Drive Drop-Down Menu Demo (3rd Party)
• Scroll text and then fade from DIV-A to DIV-B (JavaScript)
• Asteroids - Moving objects around inside a DIV

Useful Links

• Lorem Ipsum