changed informative notifications for code samples from CSS content to native dom content
--- a/longdesc1/longdesc.html Fri Jun 06 16:41:30 2014 -0400
+++ b/longdesc1/longdesc.html Sun Jun 08 17:25:09 2014 -0400
@@ -6,14 +6,14 @@
<style type="text/css">
.issue {border: dashed red 2px; background-color: #ffd}
.example {color: #404; background-color:#eee}
- .example::before {float:left;
- margin-top: -.2em;
+
+ span.informative {
background-color: white;
- display: block;
- border: 1px solid black;
- color: #404;
- padding: 2px;
- content: "Example: (Informative)"}
+ display: inline;
+ border: 1px solid black;
+ color: #404;
+ padding: 2px;
+ }
.example:first-child {padding-top:1em}
@@ -445,7 +445,10 @@
element that enabled a machine-discoverable description of an image to
be linked to the image. This extension specification defines a <code>longdesc</code>
attribute to provide that functionality for HTML5.</p>
- <pre class="example"><code class="language-markup">
+ <div class="example" role="region" aria-label="example">
+ <pre>
+<span class="informative">Example: (Informative)</span>
+<code class="language-markup">
<!-- The description is somewhere on the same page as the image -->
<img src="http://example.com/graph1" alt="Drinks are getting sweeter"
@@ -463,6 +466,7 @@
%3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20
touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20
capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E"></code></pre>
+</div>
</section>
<section id="conformance">
<h2><span class="secno">1. </span>Conformance</h2>
@@ -709,7 +713,8 @@
class="externalDFN"
data-spec="HTML5">HTMLImageElement</a></code>
Interface</h3>
- <pre class="idl"><span class="idlInterface" id="idl-def-Element">partial interface <span
+ <pre class="idl">
+<span class="idlInterface" id="idl-def-Element">partial interface <span
class="idlInterfaceID">HTMLImageElement</span> {
<span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span
class="idlAttrName"><a
@@ -751,13 +756,22 @@
</dl>
</dd>
</dl>
- <pre class="example"><code class="language-javascript">/*Make the first internal longdesc reference absolute*/
+ <div class="example" role="region" aria-label="example">
+ <pre class="example">
+<span class="informative">Example: (Informative)</span>
+
+<code class="language-javascript">/*Make the first internal longdesc reference absolute*/
var baseURL = document.location.origin + document.location.pathname
var someImage = document.querySelector('img[longdesc^=#]');
someImage.longdesc = baseURL + someImage.longdesc;</code></pre>
- <pre class="example"><code class="language-javascript">/*Open new windows for each longdesc found*/
+ </div>
+ <div class="example" role="region" aria-label="example">
+ <pre class="example">
+<span class="informative">Example: (Informative)</span>
+
+<code class="language-javascript">/*Open new windows for each longdesc found*/
var describedImages = document.querySelectorAll('img[longdesc]');
@@ -765,7 +779,12 @@
if (i.longdesc)
window.open(i.longdesc);
}</code></pre>
- <pre class="example"><code class="language-javascript">/*Tries to repair errors where the longdesc isn't a URI*/
+ </div>
+ <div class="example" role="region" aria-label="example">
+ <pre class="example">
+<span class="informative">Example: (Informative)</span>
+
+<code class="language-javascript">/*Tries to repair errors where the longdesc isn't a URI*/
var describedImages = document.querySelectorAll('img[longdesc]');
@@ -777,6 +796,7 @@
i.longdesc += theData;
}
}</code></pre>
+</div>
</section>
</section>
<section class="appendix" id="acknowledgements" aria-label="informative">