--- test/html-webhacc/cc-style.css 2007/09/03 14:30:46 1.8 +++ test/html-webhacc/cc-style.css 2008/08/14 09:16:52 1.24 @@ -7,7 +7,7 @@ padding: 0.5em 1em; } -dt, strong { +dt, strong, th { font-weight: bolder; font-family: sans-serif; } @@ -30,7 +30,7 @@ font-size: 150%; } -h3 { +h3, th { font-weight: bolder; font-family: sans-serif; font-size: 100%; @@ -103,7 +103,32 @@ font-size: 90%; } -#parse-errors dd, #document-errors dd, #error-description h3 { +#dump-manifest tbody:empty { + display: table-caption; + caption-side: bottom; +} + +#dump-manifest tbody:empty::after { + content: "This cache manifest contains no oppotunistic caching namespace."; + font-style: italic; +} + +#dump-manifest dt:first-child + dt::before, +#dump-manifest dt:last-child::after { + display: block; + content: "This cache manifest contains no explicit entry."; + margin-left: 2.5em; + font-style: italic; + font-weight: normal; + font-family: serif; +} + +#dump-manifest dt:last-child::after { + content: "This cache manifest has an empty online whitelist."; +} + +#parse-errors dd, #document-errors dd, #error-description h3, +#result-para { margin-left: 20px; padding-left: 40px; min-height: 32px; @@ -112,13 +137,24 @@ background-repeat: no-repeat; } +#levels-table tbody th:first-child { + padding-left: 42px; + min-height: 32px; + background-image: url(large-stop); + background-position: 5px center; + background-repeat: no-repeat; + text-align: left; +} + #identifiers dd, #terms dd { margin-left: 20px; padding-left: 20px; min-height: 20px; } -#identifiers dd + dd, #terms dd + dd { +#identifiers dd + dd +/* , #terms dd + dd */ /* Now allowed - HTML5 revision 1467 */ +{ background-image: url(error); background-position: center left; background-repeat: no-repeat; @@ -129,20 +165,69 @@ margin-right: 1em; } -#document-errors dd.should, #error-description .should h3 { +#parse-errors dd.level-s, #document-errors dd.level-s, +#parse-errors dd.should, +#document-errors dd.should, #error-description .should h3, +#result-para.SEE-RESULT, #levels-table #level-s th { + background-image: url(large-stop); +} + +#parse-errors dd.level-w, #document-errors dd.level-w, +#parse-errors dd.warning, +#document-errors dd.warning, #error-description .warning h3, +#levels-table #level-w th { background-image: url(large-alert); } +#parse-errors dd.level-i, #document-errors dd.level-i, +#error-description .level-i h3, +#levels-table #level-i th { + background-image: url(large-info); +} + +#parse-errors dd.level-u, #document-errors dd.level-u, +#parse-errors dd.level-unsupported, #document-errors dd.level-unsupported, +#parse-errors dd.unsupported, #document-errors dd.unsupported { margin-left: 60px; border: red 0.2em solid; padding: 0.5em; } -#document-errors dd.unsupported, #error-description .unsupported h3 { +#parse-errors dd.unsupported, +#document-errors dd.unsupported, #error-description .unsupported h3, +#result-para.uncertain, +#parse-errors dd.level-u, #document-errors dd.level-u, +#levels-table #level-u th { background-image: none; } +.error-category-charset { + background-image: url(icons/char-16); + background-position: left center; + background-repeat: no-repeat; + padding-left: 20px; +} + +.format-charset, .tokenizer-error, .parse-error { + background-image: url(icons/syntax-16); + background-position: left center; + background-repeat: no-repeat; + padding-left: 20px; +} + +.content-model-error, .attribute-error, .attribute-value-error, +.attribute-value-warning, .table-model-error { + background-image: url(icons/structure-16); + background-position: left center; + background-repeat: no-repeat; + padding-left: 20px; +} + +#result-para.PASS { + background-image: url(ok); +} + #nav-items { display: block; position: fixed; @@ -173,6 +258,10 @@ text-decoration: none; } +body[data-scripted] #nav-items { + display: none; +} + img { border-style: none; } @@ -186,13 +275,294 @@ white-space: pre-wrap; } +.example { + background-color: #ececff; +} + +pre.example { + margin-left: 1em; + margin-right: 1em; + padding: 0.2em 0.5em; +} + +.example.bad { + background-color: #fff7f7; +} + +code.example.bad { + color: inherit; + background-color: #ffeeee; +} + +h3 code.example.bad { + color: orangered; + background-color: transparent; +} + +pre.example::before { + content: "Example"; + display: block; + color: #b0b0ff; + background-color: transparent; + font-weight: bolder; + font-family: sans-serif; +} + +pre.example.html::before { + content: "HTML Example"; +} + +pre.example.xml::before { + content: "XML Example"; +} + +pre.example.manifest::before { + content: "Cache Manifest Example"; +} + +pre.example.bad::before { + content: "Bad Example"; + color: #ffc1c1; +} + +pre.example.bad.html::before { + content: "HTML Bad Example"; +} + +pre.example.bad.xml::before { + content: "XML Bad Example"; +} + +pre.example.bad.manifest::before { + content: "Cache Manifest Bad Example"; +} + +.rfc2119 { + border-style: none; + text-transform: lowercase; + font-variant: small-caps; + font-style: normal; + text-decoration: none; + font-weight: normal; + font-family: sans-serif; +} + +#result-summary table { + margin-left: auto; + margin-right: auto; + border: 3px solid #800080; + border-collapse: collapse; +} + +#result-summary tbody, colgroup { + border: 3px solid #800080; +} + +#result-summary th { + background-color: #fff0f0; + color: black; +} + +#result-summary th, #result-summary td { + border: 1px solid #800080; + padding: 0.2em 0.5em; + text-align: center; + empty-cells: show; +} + +.uncertain td, p.uncertain, +#level-u, #level-u th { + background-color: #e1e1ff; + color: black; +} + +.FAIL, .uncertain td.FAIL, #level-m, #level-m th { + background-color: #ffcece; + color: black; +} + +.SEE-RESULT, .uncertain td.SEE-RESULT, #level-s, #level-s th { + background-color: #e1e1ff; + color: black; +} + +.PASS, #level-w, #level-w th, +#level-i, #level-i th { + background-color: #ddffdd; + color: black; +} + +#result-para { + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-right: 1em; +} + +/* dl.switch from WHATWG specification style sheet */ + +dl.switch { + padding-left: 2em; +} + +dl.switch dt { + display: block; + text-indent: -1.5em; + font-weight: bolder; + font-family: sans-serif; + font-style: normal; +} + +dl.switch dt:before { + content: '\21AA'; + padding: 0 0.5em 0 0; + display: inline-block; + width: 1em; + text-align: right; + line-height: 0.5em; +} + +dl.switch dt:after { + content: " :"; +} + +mark { + background-color: #ffff4d; +} + +/* Tab navigation */ + +body[data-scripted] > h1, +body[data-scripted] > #input > h2, +body[data-scripted] .section.subdoc > h2, +body[data-scripted] .section.subdoc > h3, +body[data-scripted] .section.subdoc > h4, +body[data-scripted] .section.subdoc > h5, +body[data-scripted] .section.subdoc > h6 { + float: left; + font-size: 100%; + margin: 0; + padding: 0 1em; +} + +body[data-scripted] > #input > h2, +body[data-scripted] .section.subdoc > h2, +body[data-scripted] .section.subdoc > h3, +body[data-scripted] .section.subdoc > h4, +body[data-scripted] .section.subdoc > h5, +body[data-scripted] .section.subdoc > h6 { + margin-right: 1em; + padding: 0.3em 0; + border: thin hidden; + background-color: transparent; + color: inherit; +} + +nav { + display: block; + z-index: 100; +} + +.section nav { + margin-left: 1em; +} + +nav ul { + margin: 0; + padding: 1em 0 0 0; +} + +#input nav ul, +.section.subdoc nav ul { + padding-top: 0; +} + +nav ul li { + display: inline; + margin: 0; + padding: 0 0.3em 0 0; + line-height: 2; +} + +nav a { + display: inline; + padding: 0.1em 0.3em; + text-decoration: none; + color: inherit; + border: thin outset gray; + -moz-border-radius: 0.2em; + min-width: 4em; + text-align: center; +} + +nav [data-active] a { + border-style: inset; + background-color: #C0C0C0; +} + +.section { + clear: both; +} + +body[data-scripted] > .section, +body[data-scripted] > #input > .section, +body[data-scripted] .section.subdoc > .section { + position: absolute; + top: 100px; /* h1 > img's height is 90px */ + bottom: 0; + left: 0; + right: 0; + min-height: 10em; + overflow: auto; +} + +body[data-scripted] > #input > .section, +body[data-scripted] .section.subdoc > .section { + top: 2em; +} + +/* details widgets */ + +.details .legend { + font-weight: bolder; +} + +.details .legend:after { + content: "..."; +} + +.details.open .legend:after, +body:not([data-scripted]) .details.default .legend:after { + content: ":"; +} + +body[data-scripted] .details .legend { + cursor: pointer; +} + +body[data-scripted] .details > div { + display: none; +} + +/* Data input forms */ + +input[type=url] { + width: 90%; + min-width: 30em; +} + +textarea { + width: 95%; + min-width: 30em; + height: 20em; +} + /* -Copyright 2007 Wakaba +Copyright 2007-2008 Wakaba . This library is free software; you can redistribute it and/or modify it under the same terms as Perl itself. -$Date: 2007/09/03 14:30:46 $ +$Date: 2008/08/14 09:16:52 $ */