Permalink
Browse files

Merge pull request #12 from danielgwood/master

Updated deprecated attributes and tags.
  • Loading branch information...
2 parents 984b391 + fc11bb5 commit 32e6a1c1c64b0ce26e50b665faf5b1a934bc926b @redroot committed Jun 25, 2012
Showing with 855 additions and 787 deletions.
  1. +493 −454 holmes.css
  2. +1 −1 holmes.min.css
  3. +361 −332 testsuite/testsuite.html
View
947 holmes.css
@@ -1,455 +1,494 @@
-/**
-* O
-* \ HOLMES
-*
-* ------------------------
-*
-* Holmes is stand-alone diagnostic CSS stylesheet that will highlight
-* potentially invalid or erroneous HTML(5) markup
-*
-* @author Luke Williams
-* @contributors Anthony Mann (hover based debug info)
-* @author_url http://www.red-root.com
-* @project_url http://github.com/redroot/holmes/
-* @version 1.0.4 (14/08/2011)
-*
-* Copyright (C) 2011 Luke Williams & RedRoot All Rights Reserved.
-* holmes.css HTML5 CSS Accessibility Validation
-* Licenced under GPL license
-* http://www.gnu.org/licenses/gpl.html
-*
-* ------------------------
-*
-* How does it work?
-*
-* Adding the class 'holmes-debug' to any element, ideally the body or html tag,
-* will set debug styles for any elements within that element.
-*
-* e.g.:
-* <body class="holmes-debug">
-*
-* ------------------------
-*
-* Debug colours and what they mean
-*
-* - RED denotes an error, invalid markup or a missing attribute
-* - YELLOW denotes a warning, so potentionally erroneous markup or bad practice
-* - DARK GREY denotes a deprecated element or element with deprecated or Non-W3C attributes
-*
-* -------------------------
-*
-* Notes
-*
-* - I have chosen to keep all separate types of diagnostis separate, despite sharing
-* common CSS styles, to maintain readability
-*
-* - Getting pretty long so I've split it into outlines/borders and then Anthony's debug info, first
-* the style, then the content
-*
-*/
-/* ====================================================== */
-/* = OUTLINES / BORDERS ================================= */
-/* ====================================================== */
-
-
-/**************
- LINKS
-**************/
-
-/* Errors */
-
-.holmes-debug a:not([href]),
-.holmes-debug a[href=""] {
- outline: 2px solid red;
-}
-
-.holmes-debug a[href="#"],
-.holmes-debug a[href^="javascript"],
-.holmes-debug a:not([title]),
-.holmes-debug a[title=""]{
- outline: 2px solid #fd0;
-}
-
-
-
-/**************
- IMAGES
-**************/
-
-.holmes-debug img:not([alt]),
-.holmes-debug img[alt=""] {
- outline: 2px solid red;
-}
-/*************************
- MISC ATTRIBUTES
-**************************/
-
-.holmes-debug label:not([for]),
-.holmes-debug label[for=""],
-
-.holmes-debug input:not([name]),
-.holmes-debug input[name=""],
-
-.holmes-debug select:not([name]),
-.holmes-debug select[name=""],
-
-.holmes-debug textarea:not([name]),
-.holmes-debug textarea[name=""],
-
-.holmes-debug abbr:not([title]),
-.holmes-debug abbr[title=""],
-
-.holmes-debug [class=""],
-.holmes-debug [id=""],
-
-.holmes-debug table:not([summary]),
-.holmes-debug table[summary=""]{
- outline: 2px solid red;
-}
-/*
- Warnings here, for inline styles and event calls,
- ideally they should be external (CSS) and JS applied by JS scripts,
- keep markup purely presentational!
- (not sure about the js yet)
-*/
-.holmes-debug [style]/*,
-.holmes-debug [onclick],
-.holmes-debug [onblur],
-.holmes-debug [onfocus],
-.holmes-debug [onselect],
-.holmes-debug [onload],
-.holmes-debug [onunload]
- */{
- outline: 2px solid #fd0;
- }
-
-/*************************************************************************
- DEPRECATED & NON-W3C CONTENT ELEMENTS (#a9a9a9)
- Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
-*************************************************************************/
-
-.holmes-debug applet,
-.holmes-debug acronym,
-.holmes-debug center,
-.holmes-debug dir,
-.holmes-debug font,
-.holmes-debug strike,
-.holmes-debug u,
-.holmes-debug big,
-.holmes-debug tt,
-.holmes-debug marquee, /* i've left this is because its naff bascially */
-.holmes-debug plaintext,
-.holmes-debug xmp {
- border: 2px solid #a9a9a9;
-}
-
-body.holmes-debug[bgproperties],
-body.holmes-debug[topmargin],
-body.holmes-debug[rightmargin],
-body.holmes-debug[bottommargin],
-body.holmes-debug[leftmargin] {
- outline: 2px solid #a9a9a9;
-}
-
-
-.holmes-debug *[bordercolor],
-.holmes-debug *[bordercolordark],
-.holmes-debug *[bordercolorlight],
-.holmes-debug table[frame] {
- border: 2px solid #a9a9a9;
-}
-
-
-/*********************
- EMPTY ELEMENTS (warning level for now)
-**********************/
-
-.holmes-debug div:empty,
-.holmes-debug span:empty,
-.holmes-debug li:empty,
-.holmes-debug p:empty,
-.holmes-debug td:empty,
-.holmes-debug th:empty {
- border: 2px solid #fd0;
-}
-
-
-/* ====================================================== */
-/* = MESSAGES STYLES ==================================== */
-/* ====================================================== */
-
-/* ================== */
-/* = Warning Style = */
-/* ================== */
-
-/* - LINKS - */
-.holmes-debug a[href="#"]:hover::after,
-.holmes-debug a[href^="javascript"]:hover::after,
-.holmes-debug a:not([title]):hover::after,
-.holmes-debug a[title=""]:hover::after,
-
-/* - EMPTY ELEMENTS - */
-.holmes-debug div:empty:hover::after,
-.holmes-debug span:empty:hover::after,
-.holmes-debug li:empty:hover::after,
-.holmes-debug p:empty:hover::after,
-.holmes-debug td:empty:hover::after,
-.holmes-debug th:empty:hover::after,
-
-/* - MISC ATTRIBUTES - */
-.holmes-debug [style]:hover::after {
- border-radius: 0.5em;
- display:block;
- padding: 1em;
- margin: 1em;
- background: #fd0;
- position: fixed;
- color: #000;
- left: 0px;
- top: 0px;
- z-index: 9999;
-}
-
-
-/* =============== */
-/* = Error Style = */
-/* =============== */
-
-/* - LINKS - */
-.holmes-debug a:not([href]):hover::after,
-.holmes-debug a[href=""]:hover::after,
-
-/* - IMAGES - */
-.holmes-debug img:not([alt]):hover:after,
-.holmes-debug img[alt=""]:hover::after,
-
-/* MISC ATTRIBUTES */
-.holmes-debug label:not([for]):hover::after,
-.holmes-debug label[for=""]:hover::after,
-
-.holmes-debug input:not([name]):hover::after,
-.holmes-debug input[name=""]:hover::after,
-
-.holmes-debug select:not([name]):hover::after,
-.holmes-debug select[name=""]:hover::after,
-
-.holmes-debug textarea:not([name]):hover::after,
-.holmes-debug textarea[name=""]:hover::after,
-
-.holmes-debug abbr:not([title]):hover::after,
-.holmes-debug abbr[title=""]:hover::after,
-
-.holmes-debug [class=""]:hover::after,
-.holmes-debug [id=""]:hover::after,
-
-.holmes-debug table:not([summary]):hover::after,
-.holmes-debug table[summary=""]:hover::after {
- border-radius: 0.5em;
- display:block;
- padding: 1em;
- margin: 1em;
- background: red;
- position: fixed;
- color: #000;
- left: 0px;
- top: 0px;
- z-index: 9999;
- text-decoration: none;
-}
-
-/* ===================== */
-/* = Deprecated Styles = */
-/* ===================== */
-
-/* - DEPRECATED & NON-W3C CONTENT ELEMENTS - */
-.holmes-debug applet:hover::after,
-.holmes-debug acronym:hover::after,
-.holmes-debug center:hover::after,
-.holmes-debug dir:hover::after,
-.holmes-debug font:hover::after,
-.holmes-debug strike:hover::after,
-.holmes-debug big:hover::after,
-.holmes-debug tt:hover::after,
-.holmes-debug marquee:hover::after,
-.holmes-debug plaintext:hover::after,
-.holmes-debug xmp:hover::after,
-.holmes-debug *[bordercolor]:hover::after,
-.holmes-debug *[bordercolordark]:hover::after,
-.holmes-debug *[bordercolorlight]:hover::after,
-
-.holmes-debug table[frame]:hover::after {
- border-radius: 0.5em;
- display:block;
- padding: 1em;
- margin: 1em;
- background: red;
- position: fixed;
- background: #a9a9a9;
- color: #000;
- left: 0px;
- top: 0px;
- z-index: 9999;
-}
-
-/* ================================ */
-/* = Deprecated body style Styles = */
-/* ================================ */
-
-body.holmes-debug[bgproperties]:hover::after,
-body.holmes-debug[topmargin]:hover::after,
-body.holmes-debug[rightmargin]:hover::after,
-body.holmes-debug[bottommargin]:hover::after,
-body.holmes-debug[leftmargin]:hover::after {
- border-radius: 0.5em;
- display:block;
- padding: 1em;
- margin: 1em;
- background: red;
- position: fixed;
- background: #a9a9a9;
- color: #000;
- bottom: 0px;
- right: 0px;
- z-index: 9999;
-
- /* Bottom right due to whole body coverage */
-}
-
-/* Fixes the case where a table may contain both errors and warnings - potentially other cases of this elsewhere */
-
-.holmes-debug td:empty:hover::after,
-.holmes-debug th:empty:hover::after {
- top: 4em;
-}
-
-/* ====================================================== */
-/* = MESSAGES CONTENT =================================== */
-/* ====================================================== */
-
-/**************
- LINKS
-**************/
-
-.holmes-debug a:not([href]):hover::after,
-.holmes-debug a[href=""]:hover::after {
- content:'Missing href attribute';
-}
-
-.holmes-debug a[href="#"]:hover:after{
- content:"href='#'";
-}
-
-.holmes-debug a[href^="javascript"]:hover:after{
- content:'Href has javascript';
-}
-
-.holmes-debug a:not([title]):hover::after,
-.holmes-debug a[title=""]:hover::after {
- content:'Missing title attribute';
-}
-
-
-/**************
- IMAGES
-**************/
-
-.holmes-debug img:not([alt]):hover::after,
-.holmes-debug img[alt=""]:hover::after {
- content:'Missing alt attribute';
-}
-
-
-/*************************
- MISC ATTRIBUTES
-**************************/
-
-.holmes-debug label:not([for]):hover::after,
-.holmes-debug label[for=""]:hover::after{
- content:'Missing for attribute';
-}
-
-.holmes-debug input:not([name]):hover::after,
-.holmes-debug input[name=""]:hover::after,
-.holmes-debug select:not([name]):hover::after,
-.holmes-debug select[name=""]:hover::after,
-.holmes-debug textarea:not([name]):hover::after,
-.holmes-debug textarea[name=""]:hover::after {
- content:'Missing name attribute';
-}
-
-.holmes-debug abbr:not([title]):hover::after,
-.holmes-debug abbr[title=""]:hover::after {
- content:'Missing title attribute';
-}
-
-.holmes-debug [class=""]:hover::after {
- content:'Blank class attribute';
-}
-.holmes-debug [id=""]:hover::after {
- content:'Blank id attribute';
-}
-
-.holmes-debug table:not([summary]):hover::after,
-.holmes-debug table[summary=""]:hover::after {
- content:'Missing summary attribute';
-}
-
-.holmes-debug [style]:hover::after {
- content: 'Element has inline styles';
-}
-
-/*************************************************************************
- DEPRECATED & NON-W3C CONTENT ELEMENTS (#a9a9a9)
- Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
-*************************************************************************/
-
-.holmes-debug applet:hover::after,
-.holmes-debug acronym:hover::after,
-.holmes-debug center:hover::after,
-.holmes-debug dir:hover::after,
-.holmes-debug font:hover::after,
-.holmes-debug strike:hover::after,
-.holmes-debug big:hover::after,
-.holmes-debug tt:hover::after,
-.holmes-debug marquee:hover::after, /* i've left this is because its naff bascially */
-.holmes-debug plaintext:hover::after,
-.holmes-debug xmp:hover::after {
- content:'Deprecated or Non-W3C element';
-}
-
-/************************************************************************
- DEPRECATED NON-W3C ATTRIBUTES (#a9a9a9)
- Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
-************************************************************************/
-
-
-body.holmes-debug[bgproperties]:hover::after {
- content:'Deprecated or Non-W3C body attribute bgproperties';
-}
-
-body.holmes-debug[topmargin]:hover::after,
-body.holmes-debug[rightmargin]:hover::after,
-body.holmes-debug[bottommargin]:hover::after,
-body.holmes-debug[leftmargin]:hover::after {
- content:'Deprecated or Non-W3C body attribute *margin';
-}
-
-.holmes-debug *[bordercolor]:hover::after,
-.holmes-debug *[bordercolordark]:hover::after,
-.holmes-debug *[bordercolorlight]:hover::after,
-.holmes-debug table[frame]:hover::after {
- content:'Deprecated or Non-W3C body attribute bordercolor';
-}
-
-/*********************
- EMPTY ELEMENTS (warning level for now)
-**********************/
-
-.holmes-debug div:empty:hover::after,
-.holmes-debug span:empty:hover::after,
-.holmes-debug li:empty:hover::after,
-.holmes-debug p:empty:hover::after,
-.holmes-debug td:empty:hover::after,
-.holmes-debug th:empty:hover::after {
- content:'Empty element!';
+/**
+* O
+* \ HOLMES
+*
+* ------------------------
+*
+* Holmes is stand-alone diagnostic CSS stylesheet that will highlight
+* potentially invalid or erroneous HTML(5) markup
+*
+* @author Luke Williams
+* @contributors Anthony Mann (hover based debug info)
+* @author_url http://www.red-root.com
+* @project_url http://github.com/redroot/holmes/
+* @version 1.0.4 (14/08/2011)
+*
+* Copyright (C) 2011 Luke Williams & RedRoot All Rights Reserved.
+* holmes.css HTML5 CSS Accessibility Validation
+* Licenced under GPL license
+* http://www.gnu.org/licenses/gpl.html
+*
+* ------------------------
+*
+* How does it work?
+*
+* Adding the class 'holmes-debug' to any element, ideally the body or html tag,
+* will set debug styles for any elements within that element.
+*
+* e.g.:
+* <body class="holmes-debug">
+*
+* ------------------------
+*
+* Debug colours and what they mean
+*
+* - RED denotes an error, invalid markup or a missing attribute
+* - YELLOW denotes a warning, so potentionally erroneous markup or bad practice
+* - DARK GREY denotes a deprecated element or element with deprecated or Non-W3C attributes
+*
+* -------------------------
+*
+* Notes
+*
+* - I have chosen to keep all separate types of diagnostis separate, despite sharing
+* common CSS styles, to maintain readability
+*
+* - Getting pretty long so I've split it into outlines/borders and then Anthony's debug info, first
+* the style, then the content
+*
+*/
+/* ====================================================== */
+/* = OUTLINES / BORDERS ================================= */
+/* ====================================================== */
+
+
+/**************
+ LINKS
+**************/
+
+/* Errors */
+
+.holmes-debug a:not([href]),
+.holmes-debug a[href=""] {
+ outline: 2px solid red;
+}
+
+.holmes-debug a[href="#"],
+.holmes-debug a[href^="javascript"],
+.holmes-debug a:not([title]),
+.holmes-debug a[title=""]{
+ outline: 2px solid #fd0;
+}
+
+
+
+/**************
+ IMAGES
+**************/
+
+.holmes-debug img:not([alt]),
+.holmes-debug img[alt=""] {
+ outline: 2px solid red;
+}
+/*************************
+ MISC ATTRIBUTES
+**************************/
+
+.holmes-debug label:not([for]),
+.holmes-debug label[for=""],
+
+.holmes-debug input:not([name]),
+.holmes-debug input[name=""],
+
+.holmes-debug select:not([name]),
+.holmes-debug select[name=""],
+
+.holmes-debug textarea:not([name]),
+.holmes-debug textarea[name=""],
+
+.holmes-debug abbr:not([title]),
+.holmes-debug abbr[title=""],
+
+.holmes-debug [class=""],
+.holmes-debug [id=""],
+
+.holmes-debug table:not([summary]),
+.holmes-debug table[summary=""]{
+ outline: 2px solid red;
+}
+/*
+ Warnings here, for inline styles and event calls,
+ ideally they should be external (CSS) and JS applied by JS scripts,
+ keep markup purely presentational!
+ (not sure about the js yet)
+*/
+.holmes-debug [style]/*,
+.holmes-debug [onclick],
+.holmes-debug [onblur],
+.holmes-debug [onfocus],
+.holmes-debug [onselect],
+.holmes-debug [onload],
+.holmes-debug [onunload]
+ */{
+ outline: 2px solid #fd0;
+ }
+
+/*************************************************************************
+ DEPRECATED & NON-W3C CONTENT ELEMENTS (#a9a9a9)
+ Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
+*************************************************************************/
+
+.holmes-debug applet,
+.holmes-debug acronym,
+.holmes-debug center,
+.holmes-debug dir,
+.holmes-debug font,
+.holmes-debug strike,
+.holmes-debug big,
+.holmes-debug tt,
+.holmes-debug marquee, /* i've left this is because its naff bascially */
+.holmes-debug plaintext,
+.holmes-debug xmp {
+ border: 2px solid #a9a9a9;
+}
+
+body.holmes-debug[background],
+body.holmes-debug[bgproperties],
+body.holmes-debug[topmargin],
+body.holmes-debug[rightmargin],
+body.holmes-debug[bottommargin],
+body.holmes-debug[leftmargin] {
+ outline: 2px solid #a9a9a9;
+}
+
+
+.holmes-debug *[bordercolor],
+.holmes-debug *[bordercolordark],
+.holmes-debug *[bordercolorlight],
+.holmes-debug table[frame] {
+ border: 2px solid #a9a9a9;
+}
+
+.holmes-debug *[align],
+.holmes-debug *[valign],
+.holmes-debug *[bgcolor],
+.holmes-debug *[clear],
+.holmes-debug ul[type], .holmes-debug li[type] {
+ border: 2px solid #a9a9a9;
+}
+
+/*********************
+ EMPTY ELEMENTS (warning level for now)
+**********************/
+
+.holmes-debug div:empty,
+.holmes-debug span:empty,
+.holmes-debug li:empty,
+.holmes-debug p:empty,
+.holmes-debug td:empty,
+.holmes-debug th:empty {
+ border: 2px solid #fd0;
+}
+
+
+/* ====================================================== */
+/* = MESSAGES STYLES ==================================== */
+/* ====================================================== */
+
+/* ================== */
+/* = Warning Style = */
+/* ================== */
+
+/* - LINKS - */
+.holmes-debug a[href="#"]:hover::after,
+.holmes-debug a[href^="javascript"]:hover::after,
+.holmes-debug a:not([title]):hover::after,
+.holmes-debug a[title=""]:hover::after,
+
+/* - EMPTY ELEMENTS - */
+.holmes-debug div:empty:hover::after,
+.holmes-debug span:empty:hover::after,
+.holmes-debug li:empty:hover::after,
+.holmes-debug p:empty:hover::after,
+.holmes-debug td:empty:hover::after,
+.holmes-debug th:empty:hover::after,
+
+/* - MISC ATTRIBUTES - */
+.holmes-debug [style]:hover::after {
+ border-radius: 0.5em;
+ display:block;
+ padding: 1em;
+ margin: 1em;
+ background: #fd0;
+ position: fixed;
+ color: #000;
+ left: 0px;
+ top: 0px;
+ z-index: 9999;
+}
+
+
+/* =============== */
+/* = Error Style = */
+/* =============== */
+
+/* - LINKS - */
+.holmes-debug a:not([href]):hover::after,
+.holmes-debug a[href=""]:hover::after,
+
+/* - IMAGES - */
+.holmes-debug img:not([alt]):hover:after,
+.holmes-debug img[alt=""]:hover::after,
+
+/* MISC ATTRIBUTES */
+.holmes-debug label:not([for]):hover::after,
+.holmes-debug label[for=""]:hover::after,
+
+.holmes-debug input:not([name]):hover::after,
+.holmes-debug input[name=""]:hover::after,
+
+.holmes-debug select:not([name]):hover::after,
+.holmes-debug select[name=""]:hover::after,
+
+.holmes-debug textarea:not([name]):hover::after,
+.holmes-debug textarea[name=""]:hover::after,
+
+.holmes-debug abbr:not([title]):hover::after,
+.holmes-debug abbr[title=""]:hover::after,
+
+.holmes-debug [class=""]:hover::after,
+.holmes-debug [id=""]:hover::after,
+
+.holmes-debug table:not([summary]):hover::after,
+.holmes-debug table[summary=""]:hover::after {
+ border-radius: 0.5em;
+ display:block;
+ padding: 1em;
+ margin: 1em;
+ background: red;
+ position: fixed;
+ color: #000;
+ left: 0px;
+ top: 0px;
+ z-index: 9999;
+ text-decoration: none;
+}
+
+/* ===================== */
+/* = Deprecated Styles = */
+/* ===================== */
+
+/* - DEPRECATED & NON-W3C CONTENT ELEMENTS - */
+.holmes-debug applet:hover::after,
+.holmes-debug acronym:hover::after,
+.holmes-debug center:hover::after,
+.holmes-debug dir:hover::after,
+.holmes-debug font:hover::after,
+.holmes-debug strike:hover::after,
+.holmes-debug big:hover::after,
+.holmes-debug tt:hover::after,
+.holmes-debug marquee:hover::after,
+.holmes-debug plaintext:hover::after,
+.holmes-debug xmp:hover::after,
+.holmes-debug *[bordercolor]:hover::after,
+.holmes-debug *[bordercolordark]:hover::after,
+.holmes-debug *[bordercolorlight]:hover::after,
+
+.holmes-debug table[frame]:hover::after,
+.holmes-debug *[align]:hover::after,
+.holmes-debug *[valign]:hover::after,
+.holmes-debug *[bgcolor]:hover::after,
+.holmes-debug *[clear]:hover::after,
+.holmes-debug ul[type]:hover::after,
+.holmes-debug li[type]:hover::after {
+ border-radius: 0.5em;
+ display:block;
+ padding: 1em;
+ margin: 1em;
+ background: red;
+ position: fixed;
+ background: #a9a9a9;
+ color: #000;
+ left: 0px;
+ top: 0px;
+ z-index: 9999;
+}
+
+/* ================================ */
+/* = Deprecated body style Styles = */
+/* ================================ */
+
+body.holmes-debug[background]:hover::after,
+body.holmes-debug[bgproperties]:hover::after,
+body.holmes-debug[topmargin]:hover::after,
+body.holmes-debug[rightmargin]:hover::after,
+body.holmes-debug[bottommargin]:hover::after,
+body.holmes-debug[leftmargin]:hover::after {
+ border-radius: 0.5em;
+ display:block;
+ padding: 1em;
+ margin: 1em;
+ background: red;
+ position: fixed;
+ background: #a9a9a9;
+ color: #000;
+ bottom: 0px;
+ right: 0px;
+ z-index: 9999;
+
+ /* Bottom right due to whole body coverage */
+}
+
+/* Fixes the case where a table may contain both errors and warnings - potentially other cases of this elsewhere */
+
+.holmes-debug td:empty:hover::after,
+.holmes-debug th:empty:hover::after {
+ top: 4em;
+}
+
+/* ====================================================== */
+/* = MESSAGES CONTENT =================================== */
+/* ====================================================== */
+
+/**************
+ LINKS
+**************/
+
+.holmes-debug a:not([href]):hover::after,
+.holmes-debug a[href=""]:hover::after {
+ content:'Missing href attribute';
+}
+
+.holmes-debug a[href="#"]:hover:after{
+ content:"href='#'";
+}
+
+.holmes-debug a[href^="javascript"]:hover:after{
+ content:'Href has javascript';
+}
+
+.holmes-debug a:not([title]):hover::after,
+.holmes-debug a[title=""]:hover::after {
+ content:'Missing title attribute';
+}
+
+
+/**************
+ IMAGES
+**************/
+
+.holmes-debug img:not([alt]):hover::after,
+.holmes-debug img[alt=""]:hover::after {
+ content:'Missing alt attribute';
+}
+
+
+/*************************
+ MISC ATTRIBUTES
+**************************/
+
+.holmes-debug label:not([for]):hover::after,
+.holmes-debug label[for=""]:hover::after{
+ content:'Missing for attribute';
+}
+
+.holmes-debug input:not([name]):hover::after,
+.holmes-debug input[name=""]:hover::after,
+.holmes-debug select:not([name]):hover::after,
+.holmes-debug select[name=""]:hover::after,
+.holmes-debug textarea:not([name]):hover::after,
+.holmes-debug textarea[name=""]:hover::after {
+ content:'Missing name attribute';
+}
+
+.holmes-debug abbr:not([title]):hover::after,
+.holmes-debug abbr[title=""]:hover::after {
+ content:'Missing title attribute';
+}
+
+.holmes-debug [class=""]:hover::after {
+ content:'Blank class attribute';
+}
+
+.holmes-debug [id=""]:hover::after {
+ content:'Blank id attribute';
+}
+
+.holmes-debug table:not([summary]):hover::after,
+.holmes-debug table[summary=""]:hover::after {
+ content:'Missing summary attribute';
+}
+
+.holmes-debug [style]:hover::after {
+ content: 'Element has inline styles';
+}
+
+/*************************************************************************
+ DEPRECATED & NON-W3C CONTENT ELEMENTS (#a9a9a9)
+ Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
+*************************************************************************/
+
+.holmes-debug applet:hover::after,
+.holmes-debug acronym:hover::after,
+.holmes-debug center:hover::after,
+.holmes-debug dir:hover::after,
+.holmes-debug font:hover::after,
+.holmes-debug strike:hover::after,
+.holmes-debug big:hover::after,
+.holmes-debug tt:hover::after,
+.holmes-debug marquee:hover::after, /* i've left this is because its naff bascially */
+.holmes-debug plaintext:hover::after,
+.holmes-debug xmp:hover::after {
+ content:'Deprecated or Non-W3C element';
+}
+
+/************************************************************************
+ DEPRECATED NON-W3C ATTRIBUTES (#a9a9a9)
+ Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
+************************************************************************/
+
+body.holmes-debug[background]:hover::after {
+ content:'Deprecated or Non-W3C body attribute background';
+}
+
+body.holmes-debug[bgproperties]:hover::after {
+ content:'Deprecated or Non-W3C body attribute bgproperties';
+}
+
+body.holmes-debug[topmargin]:hover::after,
+body.holmes-debug[rightmargin]:hover::after,
+body.holmes-debug[bottommargin]:hover::after,
+body.holmes-debug[leftmargin]:hover::after {
+ content:'Deprecated or Non-W3C body attribute *margin';
+}
+
+.holmes-debug *[bordercolor]:hover::after,
+.holmes-debug *[bordercolordark]:hover::after,
+.holmes-debug *[bordercolorlight]:hover::after {
+ content:'Deprecated or Non-W3C attribute bordercolor';
+}
+
+.holmes-debug table[frame]:hover::after {
+ content:'Deprecated or Non-W3C table attribute frame';
+}
+
+.holmes-debug *[align]:hover::after,
+.holmes-debug *[valign]:hover::after {
+ content:'Deprecated or Non-W3C attribute *align';
+}
+
+.holmes-debug *[bgcolor]:hover::after {
+ content:'Deprecated or Non-W3C attribute bgcolor';
+}
+
+.holmes-debug *[clear]:hover::after {
+ content:'Deprecated or Non-W3C attribute clear';
+}
+
+.holmes-debug ul[type]:hover::after,
+.holmes-debug li[type]:hover::after {
+ content:'Deprecated or Non-W3C list attribute type';
+}
+
+/*********************
+ EMPTY ELEMENTS (warning level for now)
+**********************/
+
+.holmes-debug div:empty:hover::after,
+.holmes-debug span:empty:hover::after,
+.holmes-debug li:empty:hover::after,
+.holmes-debug p:empty:hover::after,
+.holmes-debug td:empty:hover::after,
+.holmes-debug th:empty:hover::after {
+ content:'Empty element!';
}
View
2 holmes.min.css
@@ -1 +1 @@
-.holmes-debug a:not([href]),.holmes-debug a[href=""]{outline:2px solid red;}.holmes-debug a[href="#"],.holmes-debug a[href^="javascript"],.holmes-debug a:not([title]),.holmes-debug a[title=""]{ outline:2px solid #fd0;}.holmes-debug img:not([alt]),.holmes-debug img[alt=""]{outline:2px solid red;}.holmes-debug label:not([for]),.holmes-debug label[for=""],.holmes-debug input:not([name]),.holmes-debug input[name=""],.holmes-debug select:not([name]),.holmes-debug select[name=""],.holmes-debug textarea:not([name]),.holmes-debug textarea[name=""],.holmes-debug abbr:not([title]),.holmes-debug abbr[title=""],.holmes-debug [class=""],.holmes-debug [id=""],.holmes-debug table:not([summary]),.holmes-debug table[summary=""]{ outline:2px solid red;}.holmes-debug [style]{ outline:2px solid #fd0;}.holmes-debug applet,.holmes-debug acronym,.holmes-debug center,.holmes-debug dir,.holmes-debug font,.holmes-debug strike,.holmes-debug u,.holmes-debug big,.holmes-debug tt,.holmes-debug marquee,.holmes-debug plaintext,.holmes-debug xmp{border:2px solid #a9a9a9;}body.holmes-debug[bgproperties],body.holmes-debug[topmargin],body.holmes-debug[rightmargin],body.holmes-debug[bottommargin],body.holmes-debug[leftmargin]{outline:2px solid #a9a9a9;}.holmes-debug *[bordercolor],.holmes-debug *[bordercolordark],.holmes-debug *[bordercolorlight],.holmes-debug table[frame]{border:2px solid #a9a9a9;}.holmes-debug div:empty,.holmes-debug span:empty,.holmes-debug li:empty,.holmes-debug p:empty,.holmes-debug td:empty,.holmes-debug th:empty{border:2px solid #fd0;}.holmes-debug a[href="#"]:hover::after,.holmes-debug a[href^="javascript"]:hover::after,.holmes-debug a:not([title]):hover::after,.holmes-debug a[title=""]:hover::after,.holmes-debug div:empty:hover::after,.holmes-debug span:empty:hover::after,.holmes-debug li:empty:hover::after,.holmes-debug p:empty:hover::after,.holmes-debug td:empty:hover::after,.holmes-debug th:empty:hover::after,.holmes-debug [style]:hover::after{border-radius:0.5em;display:block;padding:1em;margin:1em;background:#fd0;position:fixed;color:#000;left:0px;top:0px;z-index:9999;}.holmes-debug a:not([href]):hover::after,.holmes-debug a[href=""]:hover::after,.holmes-debug img:not([alt]):hover:after,.holmes-debug img[alt=""]:hover::after,.holmes-debug label:not([for]):hover::after,.holmes-debug label[for=""]:hover::after,.holmes-debug input:not([name]):hover::after,.holmes-debug input[name=""]:hover::after,.holmes-debug select:not([name]):hover::after,.holmes-debug select[name=""]:hover::after,.holmes-debug textarea:not([name]):hover::after,.holmes-debug textarea[name=""]:hover::after,.holmes-debug abbr:not([title]):hover::after,.holmes-debug abbr[title=""]:hover::after,.holmes-debug [class=""]:hover::after,.holmes-debug [id=""]:hover::after,.holmes-debug table:not([summary]):hover::after,.holmes-debug table[summary=""]:hover::after{border-radius:0.5em;display:block;padding:1em;margin:1em;background: red;position:fixed;color:#000;left:0px;top:0px;z-index:9999;text-decoration: none;}.holmes-debug applet:hover::after,.holmes-debug acronym:hover::after,.holmes-debug center:hover::after,.holmes-debug dir:hover::after,.holmes-debug font:hover::after,.holmes-debug strike:hover::after,.holmes-debug big:hover::after,.holmes-debug tt:hover::after,.holmes-debug marquee:hover::after,.holmes-debug plaintext:hover::after,.holmes-debug xmp:hover::after,.holmes-debug *[bordercolor]:hover::after,.holmes-debug *[bordercolordark]:hover::after,.holmes-debug *[bordercolorlight]:hover::after,.holmes-debug table[frame]:hover::after{border-radius:0.5em;display:block;padding:1em;margin:1em;background: red;position:fixed;background:#a9a9a9;color:#000;left:0px;top:0px;z-index:9999;}body.holmes-debug[bgproperties]:hover::after,body.holmes-debug[topmargin]:hover::after,body.holmes-debug[rightmargin]:hover::after,body.holmes-debug[bottommargin]:hover::after,body.holmes-debug[leftmargin]:hover::after{border-radius:0.5em;display:block;padding:1em;margin:1em;background: red;position:fixed;background:#a9a9a9;color:#000;bottom:0px;right:0px;z-index:9999;}.holmes-debug td:empty:hover::after,.holmes-debug th:empty:hover::after{top:4em;}.holmes-debug a:not([href]):hover::after,.holmes-debug a[href=""]:hover::after{content:'Missing href attribute';}.holmes-debug a[href="#"]:hover:after{ content:"href='#'";}.holmes-debug a[href^="javascript"]:hover:after{ content:'Href has javascript';}.holmes-debug a:not([title]):hover::after,.holmes-debug a[title=""]:hover::after{content:'Missing title attribute';}.holmes-debug img:not([alt]):hover::after,.holmes-debug img[alt=""]:hover::after{content:'Missing alt attribute';}.holmes-debug label:not([for]):hover::after,.holmes-debug label[for=""]:hover::after{ content:'Missing for attribute';}.holmes-debug input:not([name]):hover::after,.holmes-debug input[name=""]:hover::after,.holmes-debug select:not([name]):hover::after,.holmes-debug select[name=""]:hover::after,.holmes-debug textarea:not([name]):hover::after,.holmes-debug textarea[name=""]:hover::after{content:'Missing name attribute';}.holmes-debug abbr:not([title]):hover::after,.holmes-debug abbr[title=""]:hover::after{content:'Missing title attribute';}.holmes-debug [class=""]:hover::after{content:'Blank class attribute';}.holmes-debug [id=""]:hover::after{content:'Blank id attribute';}.holmes-debug table:not([summary]):hover::after,.holmes-debug table[summary=""]:hover::after{content:'Missing summary attribute';}.holmes-debug [style]:hover::after{content: 'Element has inline styles';}.holmes-debug applet:hover::after,.holmes-debug acronym:hover::after,.holmes-debug center:hover::after,.holmes-debug dir:hover::after,.holmes-debug font:hover::after,.holmes-debug strike:hover::after,.holmes-debug big:hover::after,.holmes-debug tt:hover::after,.holmes-debug marquee:hover::after,.holmes-debug plaintext:hover::after,.holmes-debug xmp:hover::after{content:'Deprecated or Non-W3C element';}body.holmes-debug[bgproperties]:hover::after{content:'Deprecated or Non-W3C body attribute bgproperties';}body.holmes-debug[topmargin]:hover::after,body.holmes-debug[rightmargin]:hover::after,body.holmes-debug[bottommargin]:hover::after,body.holmes-debug[leftmargin]:hover::after{content:'Deprecated or Non-W3C body attribute *margin';}.holmes-debug *[bordercolor]:hover::after,.holmes-debug *[bordercolordark]:hover::after,.holmes-debug *[bordercolorlight]:hover::after,.holmes-debug table[frame]:hover::after{content:'Deprecated or Non-W3C body attribute bordercolor';}.holmes-debug div:empty:hover::after,.holmes-debug span:empty:hover::after,.holmes-debug li:empty:hover::after,.holmes-debug p:empty:hover::after,.holmes-debug td:empty:hover::after,.holmes-debug th:empty:hover::after{content:'Empty element!';}
+.holmes-debug a:not([href]),.holmes-debug a[href=""]{outline:2px solid red}.holmes-debug a[href="#"],.holmes-debug a[href^="javascript"],.holmes-debug a:not([title]),.holmes-debug a[title=""]{outline:2px solid #fd0}.holmes-debug img:not([alt]),.holmes-debug img[alt=""]{outline:2px solid red}.holmes-debug label:not([for]),.holmes-debug label[for=""],.holmes-debug input:not([name]),.holmes-debug input[name=""],.holmes-debug select:not([name]),.holmes-debug select[name=""],.holmes-debug textarea:not([name]),.holmes-debug textarea[name=""],.holmes-debug abbr:not([title]),.holmes-debug abbr[title=""],.holmes-debug [class=""],.holmes-debug [id=""],.holmes-debug table:not([summary]),.holmes-debug table[summary=""]{outline:2px solid red}.holmes-debug [style]{outline:2px solid #fd0}.holmes-debug applet,.holmes-debug acronym,.holmes-debug center,.holmes-debug dir,.holmes-debug font,.holmes-debug strike,.holmes-debug big,.holmes-debug tt,.holmes-debug marquee,.holmes-debug plaintext,.holmes-debug xmp{border:2px solid #a9a9a9}body.holmes-debug[background],body.holmes-debug[bgproperties],body.holmes-debug[topmargin],body.holmes-debug[rightmargin],body.holmes-debug[bottommargin],body.holmes-debug[leftmargin]{outline:2px solid #a9a9a9}.holmes-debug *[bordercolor],.holmes-debug *[bordercolordark],.holmes-debug *[bordercolorlight],.holmes-debug table[frame]{border:2px solid #a9a9a9}.holmes-debug *[align],.holmes-debug *[valign],.holmes-debug *[bgcolor],.holmes-debug *[clear],.holmes-debug ul[type],.holmes-debug li[type]{border:2px solid #a9a9a9}.holmes-debug div:empty,.holmes-debug span:empty,.holmes-debug li:empty,.holmes-debug p:empty,.holmes-debug td:empty,.holmes-debug th:empty{border:2px solid #fd0}.holmes-debug a[href="#"]:hover::after,.holmes-debug a[href^="javascript"]:hover::after,.holmes-debug a:not([title]):hover::after,.holmes-debug a[title=""]:hover::after,.holmes-debug div:empty:hover::after,.holmes-debug span:empty:hover::after,.holmes-debug li:empty:hover::after,.holmes-debug p:empty:hover::after,.holmes-debug td:empty:hover::after,.holmes-debug th:empty:hover::after,.holmes-debug [style]:hover::after{border-radius:.5em;display:block;padding:1em;margin:1em;background:#fd0;position:fixed;color:#000;left:0;top:0;z-index:9999}.holmes-debug a:not([href]):hover::after,.holmes-debug a[href=""]:hover::after,.holmes-debug img:not([alt]):hover:after,.holmes-debug img[alt=""]:hover::after,.holmes-debug label:not([for]):hover::after,.holmes-debug label[for=""]:hover::after,.holmes-debug input:not([name]):hover::after,.holmes-debug input[name=""]:hover::after,.holmes-debug select:not([name]):hover::after,.holmes-debug select[name=""]:hover::after,.holmes-debug textarea:not([name]):hover::after,.holmes-debug textarea[name=""]:hover::after,.holmes-debug abbr:not([title]):hover::after,.holmes-debug abbr[title=""]:hover::after,.holmes-debug [class=""]:hover::after,.holmes-debug [id=""]:hover::after,.holmes-debug table:not([summary]):hover::after,.holmes-debug table[summary=""]:hover::after{border-radius:.5em;display:block;padding:1em;margin:1em;background:red;position:fixed;color:#000;left:0;top:0;z-index:9999;text-decoration:none}.holmes-debug applet:hover::after,.holmes-debug acronym:hover::after,.holmes-debug center:hover::after,.holmes-debug dir:hover::after,.holmes-debug font:hover::after,.holmes-debug strike:hover::after,.holmes-debug big:hover::after,.holmes-debug tt:hover::after,.holmes-debug marquee:hover::after,.holmes-debug plaintext:hover::after,.holmes-debug xmp:hover::after,.holmes-debug *[bordercolor]:hover::after,.holmes-debug *[bordercolordark]:hover::after,.holmes-debug *[bordercolorlight]:hover::after,.holmes-debug table[frame]:hover::after,.holmes-debug *[align]:hover::after,.holmes-debug *[valign]:hover::after,.holmes-debug *[bgcolor]:hover::after,.holmes-debug *[clear]:hover::after,.holmes-debug ul[type]:hover::after,.holmes-debug li[type]:hover::after{border-radius:.5em;display:block;padding:1em;margin:1em;background:red;position:fixed;background:#a9a9a9;color:#000;left:0;top:0;z-index:9999}body.holmes-debug[background]:hover::after,body.holmes-debug[bgproperties]:hover::after,body.holmes-debug[topmargin]:hover::after,body.holmes-debug[rightmargin]:hover::after,body.holmes-debug[bottommargin]:hover::after,body.holmes-debug[leftmargin]:hover::after{border-radius:.5em;display:block;padding:1em;margin:1em;background:red;position:fixed;background:#a9a9a9;color:#000;bottom:0;right:0;z-index:9999}.holmes-debug td:empty:hover::after,.holmes-debug th:empty:hover::after{top:4em}.holmes-debug a:not([href]):hover::after,.holmes-debug a[href=""]:hover::after{content:'Missing href attribute'}.holmes-debug a[href="#"]:hover:after{content:"href='#'"}.holmes-debug a[href^="javascript"]:hover:after{content:'Href has javascript'}.holmes-debug a:not([title]):hover::after,.holmes-debug a[title=""]:hover::after{content:'Missing title attribute'}.holmes-debug img:not([alt]):hover::after,.holmes-debug img[alt=""]:hover::after{content:'Missing alt attribute'}.holmes-debug label:not([for]):hover::after,.holmes-debug label[for=""]:hover::after{content:'Missing for attribute'}.holmes-debug input:not([name]):hover::after,.holmes-debug input[name=""]:hover::after,.holmes-debug select:not([name]):hover::after,.holmes-debug select[name=""]:hover::after,.holmes-debug textarea:not([name]):hover::after,.holmes-debug textarea[name=""]:hover::after{content:'Missing name attribute'}.holmes-debug abbr:not([title]):hover::after,.holmes-debug abbr[title=""]:hover::after{content:'Missing title attribute'}.holmes-debug [class=""]:hover::after{content:'Blank class attribute'}.holmes-debug [id=""]:hover::after{content:'Blank id attribute'}.holmes-debug table:not([summary]):hover::after,.holmes-debug table[summary=""]:hover::after{content:'Missing summary attribute'}.holmes-debug [style]:hover::after{content:'Element has inline styles'}.holmes-debug applet:hover::after,.holmes-debug acronym:hover::after,.holmes-debug center:hover::after,.holmes-debug dir:hover::after,.holmes-debug font:hover::after,.holmes-debug strike:hover::after,.holmes-debug big:hover::after,.holmes-debug tt:hover::after,.holmes-debug marquee:hover::after,.holmes-debug plaintext:hover::after,.holmes-debug xmp:hover::after{content:'Deprecated or Non-W3C element'}body.holmes-debug[background]:hover::after{content:'Deprecated or Non-W3C body attribute background'}body.holmes-debug[bgproperties]:hover::after{content:'Deprecated or Non-W3C body attribute bgproperties'}body.holmes-debug[topmargin]:hover::after,body.holmes-debug[rightmargin]:hover::after,body.holmes-debug[bottommargin]:hover::after,body.holmes-debug[leftmargin]:hover::after{content:'Deprecated or Non-W3C body attribute *margin'}.holmes-debug *[bordercolor]:hover::after,.holmes-debug *[bordercolordark]:hover::after,.holmes-debug *[bordercolorlight]:hover::after{content:'Deprecated or Non-W3C attribute bordercolor'}.holmes-debug table[frame]:hover::after{content:'Deprecated or Non-W3C table attribute frame'}.holmes-debug *[align]:hover::after,.holmes-debug *[valign]:hover::after{content:'Deprecated or Non-W3C attribute *align'}.holmes-debug *[bgcolor]:hover::after{content:'Deprecated or Non-W3C attribute bgcolor'}.holmes-debug *[clear]:hover::after{content:'Deprecated or Non-W3C attribute clear'}.holmes-debug ul[type]:hover::after,.holmes-debug li[type]:hover::after{content:'Deprecated or Non-W3C list attribute type'}.holmes-debug div:empty:hover::after,.holmes-debug span:empty:hover::after,.holmes-debug li:empty:hover::after,.holmes-debug p:empty:hover::after,.holmes-debug td:empty:hover::after,.holmes-debug th:empty:hover::after{content:'Empty element!'}
View
693 testsuite/testsuite.html
@@ -1,333 +1,362 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
-
- <title>holmes.css - Test Suite (v 1.0)</title>
- <link rel="stylesheet" href="../holmes.css" media="screen,projection,print,handheld" type="text/css" />
- <link rel="stylesheet" href="testsuite.css" media="screen,projection,print,handheld" type="text/css" />
-
- </head>
- <body class="holmes-debug" rightmargin="0" leftmargin="0" topmargin="0" bottommargin="0" bgproperties="">
- <div id="content">
- <div id="header">
- <h1>holmes.css - Test Suite (v 1.0)</h1>
- </div>
- <div id="tests">
- <div class="test">
- <h2>Links</h2>
- <ul>
- <li>
- <p>Normal Link</p>
- <a href="http://www.red-root.com" title="A link to red-root.com">red<strong>root</strong></a>
- </li>
- <li>
- <p>Link with no title</p>
- <a href="http://www.red-root.com" >red<strong>root</strong></a>
- </li>
- <li>
- <p>Link with an empty title</p>
- <a href="http://www.red-root.com" title="">red<strong>root</strong></a>
- </li>
- <li>
- <p>Link with no href</p>
- <a title="A link to red-root.com">red<strong>root</strong></a>
- </li>
- <li>
- <p>Link with an empty href</p>
- <a href="" title="A link to red-root.com">red<strong>root</strong></a>
- </li>
- <li>
- <p>Link with the href '#'</p>
- <a href="#" title="A link to red-root.com">red<strong>root</strong></a>
- </li>
- <li>
- <p>Link with href with 'javascript'</p>
- <a href="javascript:doSomething();" title="A link to red-root.com">red<strong>root</strong></a>
- </li>
- </ul>
- </div>
- <div class="test">
- <h2>Images</h2>
- <ul>
- <li>
- <p>Normal Image</p>
- <img src="http://dummyimage.com/200x100/000/fff.jpg" alt="Alternative Text" />
- </li>
- <li>
- <p>Image with no alt</p>
- <img src="http://dummyimage.com/200x100/000/fff.jpg" />
- </li>
- <li>
- <p>Image with an emtpy alt</p>
- <img src="http://dummyimage.com/200x100/000/fff.jpg" alt="" />
- </li>
- </ul>
- </div>
- <div class="test">
- <h2>Misc Attributes</h2>
- <ul>
- <li>
- <p>Normal Table</p>
- <table summary="a summary on this table">
- <thead>
- <th>Name</th>
- <th>Value</th>
- </thead>
- <tbody>
- <tr>
- <td>I'm a table</td>
- <td> 3</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li>
- <p>Table with no summary</p>
- <table>
- <thead>
- <th>Name</th>
- <th>Value</th>
- </thead>
- <tbody>
- <tr>
- <td>I'm a table</td>
- <td> 3</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li>
- <p>Table with an empty summary</p>
- <table summary="">
- <thead>
- <th>Name</th>
- <th>Value</th>
- </thead>
- <tbody>
- <tr>
- <td>I'm a table</td>
- <td> 3</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li>
- <p>Normal Label</p>
- <label for="anInput">Label for an input</label>
- </li>
- <li>
- <p>Label with no for</p>
- <label>Label for an input</label>
- </li>
- <li>
- <p>Label with an empty for</p>
- <label for="">Label for an input</label>
- </li>
- <li>
- <p>Normal Input</p>
- <input type="text" name="anInput" />
- </li>
- <li>
- <p>Input with no name</p>
- <input type="text" />
- </li>
- <li>
- <p>Input with empty name</p>
- <input type="text" name="" />
- </li>
- <li>
- <p>Normal Select</p>
- <select name="aSelect">
- <option value="value1">Value 1</option>
- <option value="value2">Value 2</option>
- </select>
- </li>
- <li>
- <p>Select with no name</p>
- <select>
- <option value="value1">Value 1</option>
- <option value="value2">Value 2</option>
- </select>
- </li>
- <li>
- <p>Select with empty name</p>
- <select name="">
- <option value="value1">Value 1</option>
- <option value="value2">Value 2</option>
- </select>
- </li>
- <li>
- <p>Normal Textarea</p>
- <textarea name="aTextArea">...</textarea>
- </li>
- <li>
- <p>Textarea with no name</p>
- <textarea>...</textarea>
- </li>
- <li>
- <p>Textarea with empty name</p>
- <textarea name="">...</textarea>
- </li>
- <li>
- <p>Normal Abbr</p>
- <span><abbr title="Cascading Style Sheets">CSS</abbr>3</span>
- </li>
- <li>
- <p>Abbr with no title</p>
- <span><abbr>CSS</abbr>3 </span>
- </li>
- <li>
- <p>Abbr with empty title</p>
- <span><abbr title="">CSS</abbr>3</span>
- </li>
- <li>
- <p>Element with empty class attr</p>
- <span class="">This element lacks implied class!</span>
- </li>
- <li>
- <p>Element with empty id attr</p>
- <span id="">This element lacks any id!</span>
- </li>
- <li>
- <p>Element with inline style attribute</p>
- <div style="background-color: #000; color: #fff;">Inline Styles!</div>
- </li>
- </ul>
- </div>
- <div class="test">
- <h2>Deprecated Elements</h2>
- <ul>
- <li>
- <p>applet Element</p>
- <applet code="" width="200" height="100">
- Java applet that draws animated bubbles.
- </applet>
- </li>
- <li>
- <p>acronym Element</p>
- <acronym title="Cascading Style Stylesheets">CSS</acronym>3
- </li>
- <li>
- <p>center Element</p>
- <span><center>Centred Text</center></span>
- </li>
- <li>
- <p>dir Element</p>
- <dir>
- <li>html</li>
- <li>xhtml</li>
- <li>css</li>
- </dir>
- </li>
- <li>
- <p>font Element</p>
- <span><font face="verdana" color="green">This is some text!</font></span>
- </li>
- <li>
- <p>strike Element</p>
- <strike>Strike me down</strike>
- </li>
- <li>
- <p>u Element</p>
- <u>Underline Me</u>
- </li>
- <li>
- <p>big Element</p>
- <big>BIG FONT</big>
- </li>
- <li>
- <p>tt Element</p>
- <tt>Not sure what this does</tt>
- </li>
- <li>
- <p>marquee Element</p>
- <marquee> Text message and/or images here. </marquee>
- </li>
- <li>
- <p>plaintext Element</p>
- <!-- removed as it BUTCHERS the rest of the document <plaintext>what? -->removed (see source)
- </li>
- <li>
- <p>xmp Element</p>
- <xmp>
-Stock ID Description
--------- -----------
-116 Inflatable Armchair
-119 Walkie Talkie
- </xmp>
- </li>
- </ul>
- </div>
- <div class="test">
- <h2>Deprecated &amp; Non-W3C Attributes</h2>
- <ul>
- <li>
- <p>Table with a frame attr</p>
- <table summary="A summary" frame="">
- <thead>
- <th>Name</th>
- <th>Value</th>
- </thead>
- <tbody>
- <tr>
- <td>I'm a table</td>
- <td>3</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li>
- <p>divs using bordercolor</p>
- <div bordercolor="blue">No inline bordercolors please</div>
- </li>
- <li>
- <p>divs using bordercolorlight and dark</p>
- <div bordercolordark="blue" bordercolorlight="blue">No inline bordercolors please</div>
- </li>
-
- </ul>
- </div>
- <div class="test">
- <h2>Empty Elements (warning)</h2>
- <ul>
- <li>
- <p>Empty div</p>
- <div></div>
- </li>
- <li>
- <p>Empty p</p>
- <p></p>
- </li>
- <li>
- <p>Empty li</p>
- <ul>
- <li>Some text</li>
- <li></li>
- </ul>
- </li>
- <li>
- <p>Empty span</p>
- <span></span>
- </li>
- <li>
- <p>Empty th and td</p>
- <table summary="">
- <thead>
- <th>Name</th>
- <th></th>
- </thead>
- <tbody>
- <tr>
- <td>I'm a table</td>
- <td></td>
- </tr>
- </tbody>
- </table>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+ <head>
+
+ <title>holmes.css - Test Suite (v 1.0)</title>
+ <link rel="stylesheet" href="../holmes.css" media="screen,projection,print,handheld" type="text/css" />
+ <link rel="stylesheet" href="testsuite.css" media="screen,projection,print,handheld" type="text/css" />
+
+ </head>
+ <body class="holmes-debug" rightmargin="0" leftmargin="0" topmargin="0" bottommargin="0" bgproperties="">
+ <div id="content">
+ <div id="header">
+ <h1>holmes.css - Test Suite (v 1.0)</h1>
+ </div>
+ <div id="tests">
+ <div class="test">
+ <h2>Links</h2>
+ <ul>
+ <li>
+ <p>Normal Link</p>
+ <a href="http://www.red-root.com" title="A link to red-root.com">red<strong>root</strong></a>
+ </li>
+ <li>
+ <p>Link with no title</p>
+ <a href="http://www.red-root.com" >red<strong>root</strong></a>
+ </li>
+ <li>
+ <p>Link with an empty title</p>
+ <a href="http://www.red-root.com" title="">red<strong>root</strong></a>
+ </li>
+ <li>
+ <p>Link with no href</p>
+ <a title="A link to red-root.com">red<strong>root</strong></a>
+ </li>
+ <li>
+ <p>Link with an empty href</p>
+ <a href="" title="A link to red-root.com">red<strong>root</strong></a>
+ </li>
+ <li>
+ <p>Link with the href '#'</p>
+ <a href="#" title="A link to red-root.com">red<strong>root</strong></a>
+ </li>
+ <li>
+ <p>Link with href with 'javascript'</p>
+ <a href="javascript:doSomething();" title="A link to red-root.com">red<strong>root</strong></a>
+ </li>
+ </ul>
+ </div>
+ <div class="test">
+ <h2>Images</h2>
+ <ul>
+ <li>
+ <p>Normal Image</p>
+ <img src="http://dummyimage.com/200x100/000/fff.jpg" alt="Alternative Text" />
+ </li>
+ <li>
+ <p>Image with no alt</p>
+ <img src="http://dummyimage.com/200x100/000/fff.jpg" />
+ </li>
+ <li>
+ <p>Image with an empty alt</p>
+ <img src="http://dummyimage.com/200x100/000/fff.jpg" alt="" />
+ </li>
+ </ul>
+ </div>
+ <div class="test">
+ <h2>Misc Attributes</h2>
+ <ul>
+ <li>
+ <p>Normal Table</p>
+ <table summary="a summary on this table">
+ <thead>
+ <th>Name</th>
+ <th>Value</th>
+ </thead>
+ <tbody>
+ <tr>
+ <td>I'm a table</td>
+ <td> 3</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <p>Table with no summary</p>
+ <table>
+ <thead>
+ <th>Name</th>
+ <th>Value</th>
+ </thead>
+ <tbody>
+ <tr>
+ <td>I'm a table</td>
+ <td> 3</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <p>Table with an empty summary</p>
+ <table summary="">
+ <thead>
+ <th>Name</th>
+ <th>Value</th>
+ </thead>
+ <tbody>
+ <tr>
+ <td>I'm a table</td>
+ <td> 3</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <p>Normal Label</p>
+ <label for="anInput">Label for an input</label>
+ </li>
+ <li>
+ <p>Label with no for</p>
+ <label>Label for an input</label>
+ </li>
+ <li>
+ <p>Label with an empty for</p>
+ <label for="">Label for an input</label>
+ </li>
+ <li>
+ <p>Normal Input</p>
+ <input type="text" name="anInput" />
+ </li>
+ <li>
+ <p>Input with no name</p>
+ <input type="text" />
+ </li>
+ <li>
+ <p>Input with empty name</p>
+ <input type="text" name="" />
+ </li>
+ <li>
+ <p>Normal Select</p>
+ <select name="aSelect">
+ <option value="value1">Value 1</option>
+ <option value="value2">Value 2</option>
+ </select>
+ </li>
+ <li>
+ <p>Select with no name</p>
+ <select>
+ <option value="value1">Value 1</option>
+ <option value="value2">Value 2</option>
+ </select>
+ </li>
+ <li>
+ <p>Select with empty name</p>
+ <select name="">
+ <option value="value1">Value 1</option>
+ <option value="value2">Value 2</option>
+ </select>
+ </li>
+ <li>
+ <p>Normal Textarea</p>
+ <textarea name="aTextArea">...</textarea>
+ </li>
+ <li>
+ <p>Textarea with no name</p>
+ <textarea>...</textarea>
+ </li>
+ <li>
+ <p>Textarea with empty name</p>
+ <textarea name="">...</textarea>
+ </li>
+ <li>
+ <p>Normal Abbr</p>
+ <span><abbr title="Cascading Style Sheets">CSS</abbr>3</span>
+ </li>
+ <li>
+ <p>Abbr with no title</p>
+ <span><abbr>CSS</abbr>3 </span>
+ </li>
+ <li>
+ <p>Abbr with empty title</p>
+ <span><abbr title="">CSS</abbr>3</span>
+ </li>
+ <li>
+ <p>Element with empty class attr</p>
+ <span class="">This element lacks implied class!</span>
+ </li>
+ <li>
+ <p>Element with empty id attr</p>
+ <span id="">This element lacks any id!</span>
+ </li>
+ <li>
+ <p>Element with inline style attribute</p>
+ <div style="background-color: #000; color: #fff;">Inline Styles!</div>
+ </li>
+ </ul>
+ </div>
+ <div class="test">
+ <h2>Deprecated Elements</h2>
+ <ul>
+ <li>
+ <p>applet Element</p>
+ <applet code="" width="200" height="100">
+ Java applet that draws animated bubbles.
+ </applet>
+ </li>
+ <li>
+ <p>acronym Element</p>
+ <acronym title="Cascading Style Stylesheets">CSS</acronym>3
+ </li>
+ <li>
+ <p>center Element</p>
+ <span><center>Centered Text</center></span>
+ </li>
+ <li>
+ <p>dir Element</p>
+ <dir>
+ <li>html</li>
+ <li>xhtml</li>
+ <li>css</li>
+ </dir>
+ </li>
+ <li>
+ <p>font Element</p>
+ <span><font face="verdana" color="green">This is some text!</font></span>
+ </li>
+ <li>
+ <p>strike Element</p>
+ <strike>Strike me down</strike>
+ </li>
+ <li>
+ <p>big Element</p>
+ <big>BIG FONT</big>
+ </li>
+ <li>
+ <p>tt Element</p>
+ <tt>Not sure what this does</tt>
+ </li>
+ <li>
+ <p>marquee Element</p>
+ <marquee> Text message and/or images here. </marquee>
+ </li>
+ <li>
+ <p>plaintext Element</p>
+ <!-- removed as it BUTCHERS the rest of the document <plaintext>what? -->removed (see source)
+ </li>
+ <li>
+ <p>xmp Element</p>
+ <xmp>
+Stock ID Description
+-------- -----------
+116 Inflatable Armchair
+119 Walkie Talkie
+ </xmp>
+ </li>
+ </ul>
+ </div>
+ <div class="test">
+ <h2>Deprecated &amp; Non-W3C Attributes</h2>
+ <ul>
+ <li>
+ <p>Table with a frame attr</p>
+ <table summary="A summary" frame="">
+ <thead>
+ <th>Name</th>
+ <th>Value</th>
+ </thead>
+ <tbody>
+ <tr>
+ <td>I'm a table</td>
+ <td>3</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <p>divs using bordercolor</p>
+ <div bordercolor="blue">No inline bordercolors please</div>
+ </li>
+ <li>
+ <p>divs using bordercolorlight and dark</p>
+ <div bordercolordark="blue" bordercolorlight="blue">No inline bordercolors please</div>
+ </li>
+ <li>
+ <p>Paragraph with an align attr</p>
+ <p align="center">Text centering should be done in CSS</p>
+ </li>
+ <li>
+ <p>Table containing tds with valign attr</p>
+ <table summary="A summary">
+ <tbody>
+ <tr>
+ <th>Deliberately long text goes here</th>
+ <td valign="top">Top</td>
+ </tr>
+ <tr>
+ <th>This text is also quite long</th>
+ <td valign="bottom">Bottom</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <p>Table with cells using the bgcolor attr</p>
+ <table summary="A summary" frame="">
+ <thead>
+ <th bgcolor="red">Name</th>
+ <th bgcolor="yellow">Value</th>
+ </thead>
+ <tbody>
+ <tr>
+ <td bgcolor="blue">I'm a table</td>
+ <td bgcolor="green">3</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ </ul>
+ </div>
+ <div class="test">
+ <h2>Empty Elements (warning)</h2>
+ <ul>
+ <li>
+ <p>Empty div</p>
+ <div></div>
+ </li>
+ <li>
+ <p>Empty p</p>
+ <p></p>
+ </li>
+ <li>
+ <p>Empty li</p>
+ <ul>
+ <li>Some text</li>
+ <li></li>
+ </ul>
+ </li>
+ <li>
+ <p>Empty span</p>
+ <span></span>
+ </li>
+ <li>
+ <p>Empty th and td</p>
+ <table summary="">
+ <thead>
+ <th>Name</th>
+ <th></th>
+ </thead>
+ <tbody>
+ <tr>
+ <td>I'm a table</td>
+ <td></td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </body>
</html>

0 comments on commit 32e6a1c

Please sign in to comment.