Permalink
Browse files

Test cases added. Fixed inconsistency with colors for deprecated tags.

  • Loading branch information...
1 parent 06a39de commit 4b054bbc38ec64c0d8a8ff19a0537d71a10b4937 @imbrianj committed Oct 5, 2011
Showing with 708 additions and 8 deletions.
  1. +6 −2 debugCSS.css
  2. +289 −0 playgrounds/accessibility.html
  3. +309 −0 playgrounds/other.html
  4. +104 −6 playgrounds/tables.html
View
@@ -227,10 +227,14 @@ font:after {
/* These may not be "wrong", but let's bug you anyway. */
b:after,
-i:after,
+i:after {
+ background: green;
+ content: 'Should you be using STRONG or EM?';
+}
+
blink:after,
marquee:after {
- background: green;
+ background: yellow;
content: 'Should you be using STRONG or EM?';
}
@@ -0,0 +1,289 @@
+<!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">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="keywords" content="CSS, CSS Development, Web Development, Cascading Style Sheets, Web Styles" />
+ <meta name="description" content="debugCSS: (X)HTML debugging tool built with CSS" />
+ <title>debugCSS : (X)HTML debugging tool built with CSS</title>
+ <style type="text/css">
+ html,
+ body,
+ div,
+ span,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ pre,
+ a,
+ code,
+ em,
+ dl,
+ dt,
+ dd,
+ ol,
+ ul,
+ li {
+ border: 0;
+ font-family: inherit;
+ font-size: 100%;
+ font-style: inherit;
+ font-weight: inherit;
+ margin: 0;
+ outline: 0;
+ padding: 0;
+ vertical-align: baseline;
+ }
+
+ :focus {
+ outline: #000 dotted thin;
+ }
+
+ a {
+ color: #286EA0;
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ a:visited {
+ color: #6B899F;
+ }
+
+ body {
+ background: #FFF;
+ color: #000;
+ font-family: helvetica;
+ line-height: 1.3;
+ }
+
+ ol,
+ ul {
+ list-style: none;
+ }
+
+ p,
+ pre,
+ .mod li {
+ margin: .5em 0;
+ }
+
+ code,
+ pre {
+ font-family: monospace;
+ }
+
+ pre {
+ border: 1px solid #CCC;
+ -moz-border-radius: .5em;
+ -webkit-border-radius: .5em;
+ border-radius: .5em;
+ padding: .5em;
+ }
+
+ pre:hover {
+ background-color: #EAEAEA;
+ -moz-box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ -webkit-box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ dl {
+ margin-bottom: .5em;
+ }
+
+ dt {
+ font-weight: bold;
+ margin-top: .5em;
+ }
+
+ dd {
+ text-indent: 2em;
+ }
+
+ .wrapper {
+ margin: 1em auto;
+ max-width: 1280px;
+ min-width: 640px;
+ width: 80%;
+ }
+
+ #hd h1 {
+ font-size: 2em;
+ text-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ .mod .hd h3 {
+ border-bottom: 1px solid #CCC;
+ font-size: 1.5em;
+ margin-bottom: .5em;
+ text-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ #hd,
+ .mod {
+ margin-bottom: 3em;
+ }
+
+ cite {
+ font-style: italic;
+ }
+
+ #install .bd a.install {
+ background: #4970A7;
+ background-image: -moz-linear-gradient(top, #4B71A9 0%, #2A5797 50%, #235293 54%, #14468B 100%);
+ background-image: -webkit-linear-gradient(top, #4B71A9 0%, #2A5797 50%, #235293 54%, #14468B 100%);
+ border: 1px solid #14468B;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ -webkit-box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ color: #FFF;
+ cursor: pointer;
+ display: block;
+ *display: inline;
+ padding: 1em;
+ text-align: center;
+ width: 5em;
+ zoom: 1;
+ }
+
+ .mod ul {
+ list-style: disc outside none;
+ padding-left: 3em;
+ }
+
+ #playground li {
+ clear: left;
+ margin-top: 20px;
+ }
+
+ #playground table,
+ #playground th,
+ #playground td {
+ border: 1px dotted #000;
+ }
+
+ #playground h4 {
+ font-weight: bold;
+ }
+ </style>
+
+ <script>
+ var fileSource = '../debugCss.css'; //'//imbrianj.github.com/debugCSS/debugCSS.css';
+ </script>
+</head>
+<body>
+
+ <a href="https://github.com/yahoo/debugCSS"><img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0; right: 0; border: 0;"></a>
+ <div class="wrapper">
+ <div id="hd">
+ <h1>debugCSS : (X)HTML debugging tool built with CSS</h1>
+ </div>
+ <div id="bd">
+ <div class="mod" id="summary">
+ <div class="hd">
+
+ <h3>Summary</h3>
+ </div>
+ <div class="bd">
+ <p>
+ debugCSS is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.
+ </p>
+ <p>
+ Not all "errors" are created equally, so they are color coded to highlight severity. Green is "probably not a big problem", yellow is "worth looking at" and red is "you really should fix this."
+ </p>
+
+ </div>
+ </div>
+ <div class="mod" id="install">
+ <div class="hd">
+ <h3>Install</h3>
+ </div>
+ <div class="bd">
+ <p>
+
+ Click and drag the link below to your bookmark toolbar to install - or right click "Bookmark This Link".
+ </p>
+ <a href="javascript:(function(d,i,l){l=d.getElementById(i);if(l){l.parentNode.removeChild(l);return;}l=d.createElement('link');l.id=i;l.rel='stylesheet';l.type='text/css';l.href=fileSource;d.getElementsByTagName('head')[0].appendChild(l);}(document,'debugCSS'))" class="install">debugCSS</a>
+ <p>
+ Get the source code on GitHub : <a href="https://github.com/yahoo/debugCSS">yahoo/debugCSS</a>
+ </p>
+ </div>
+ </div>
+
+ <div class="mod" id="playground">
+ <div class="hd">
+ <h3>Accessibility Playground</h3>
+ </div>
+ <div class="bd">
+ <ul>
+ <li>
+ <h4>img:not([alt])</h4>
+ <img src="https://secure.gravatar.com/avatar/cf776780e895d2c099f8fb13cb7c6af2?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-orgs.png" />
+ </li>
+ <li>
+ <h4>a:not([href])</h4>
+ <a>Link with no href</a>
+ </li>
+ <li>
+ <h4>a[href="#"]</h4>
+ <a href="#">Link with # href</a>
+ </li>
+ <li>
+ <h4>a[href*=javascript\:]</h4>
+ <a href="javascript:;">Link with javascript href</a>
+ </li>
+ <li>
+ <h4>a[onclick]</h4>
+ <a href="#blah" onclick="/* */">Link with onclick attribute</a>
+ </li>
+ <li>
+ <h4>a[onmouseover]</h4>
+ <a href="#blah" onmouseover="/* */">Link with onmouseover attribute</a>
+ </li>
+ <li>
+ <h4>a[onmouseout]</h4>
+ <a href="#blah" onmouseout="/* */">Link with onmouseout attribute</a>
+ </li>
+ <li>
+ <h4>label:not([for])</h4>
+ <label>Label without for attribute</label>
+ </li>
+ <li>
+ <h4>nav:not([role])</h4>
+ <nav>Nav without role attribute</nav>
+ </li>
+ <li>
+ <h4>div[role="img"]:not([aria-label])</h4>
+ <div role="img">Div with img role and no aria-label</div>
+ </li>
+ <li>
+ <h4>form > *:not(fieldset)</h4>
+ <form>
+ <span>Form has no fieldset</span>
+ </form>
+ </li>
+ <li>
+ <h4>fieldset *:not(legend):first-child</h4>
+ <form>
+ <fieldset>
+ <h5>First child of a fieldset is not a legend</h5>
+ </fieldset>
+ </form>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 4b054bb

Please sign in to comment.