Skip to content

Commit

Permalink
[e] (0) Put the status boxes into the spec itself for faster performa…
Browse files Browse the repository at this point in the history 
…nce; also, make them automatically derived from caniuse.com data

Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=23659
Affected topics: Canvas, DOM APIs, HTML

git-svn-id: https://svn.whatwg.org/webapps@8827 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Oct 3, 2014
1 parent c1852e7 commit b29fb58
Show file tree
Hide file tree
Showing 3 changed files with 784 additions and 641 deletions.
666 changes: 357 additions & 309 deletions complete.html
View file

Large diffs are not rendered by default.

666 changes: 357 additions & 309 deletions index
View file

Large diffs are not rendered by default.

93 changes: 70 additions & 23 deletions source
View file
Expand Up @@ -173,9 +173,16 @@
}
}, false);
</script>
<script>
function toggleStatus(div) {
div.parentNode.classList.toggle('wrapped');
}
</script>
<link w-nodev rel="stylesheet" href="https://whatwg.org/style/specification">
<link w-nodev rel="icon" href="https://whatwg.org/images/icon">
<style w-nodev>
[hidden] { display: none; }

.proposal { border: blue solid; padding: 1em; }
.bad, .bad *:not(.X\58X) { color: gray; border-color: gray; background: transparent; }
#updatesStatus { display: none; z-index: 10; }
Expand All @@ -197,13 +204,54 @@
#alert :link:hover, #alert :visited:hover { background: transparent; }
@media print { #configUI { display: none; } }

.rfc2119 { font-variant: small-caps; text-shadow: 0 0 0.5em yellow; position: static; }
.rfc2119::after { position: absolute; left: 0; width: 25px; text-align: center; color: yellow; text-shadow: 0.075em 0.075em 0.2em black; }
.rfc2119.m\ust::after { content: '\2605'; }
.rfc2119.s\hould::after { content: '\2606'; }
[hidden] { display: none; }

.fingerprint { float: right; }
.fingerprint { position: absolute; right: 0; z-index: 5; }

.status { font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; }
.status.wrapped { width: 1em; height: 1em; }
.status.wrapped > :not(input) { display: none; }
.status > input { position: absolute; right: 0; top: 0; width: 1em; height: 1em; border: none; background: transparent; }
.status > * { font-size: 0.6em; margin: 0; padding: 0; }
.status > * + * { padding-top: 0.5em; }
.status > .support { display: block; }
.status > .support > span { padding: 0.2em 0; display: block; display: table; }
.status > .support > span:first-of-type { padding-top: 0.5em; }
.status > .support > span > span { padding: 0 0.5em; display: table-cell; vertical-align: top; }
.status > .support > span > span:first-child { width: 100%; }
.status > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; }
.status > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; }
.status > .support > .and_chr::before { background-image: url(https://html5.org/tools/icons/chrome-android); }
.status > .support > .and_ff::before { background-image: url(https://html5.org/tools/icons/gecko-android); }
.status > .support > .and_uc::before { background-image: url(https://html5.org/tools/icons/uc); } /* UC Browser for Android */
.status > .support > .android::before { background-image: url(https://html5.org/tools/icons/android); }
.status > .support > .bb::before { background-image: url(https://html5.org/tools/icons/bb); } /* Blackberry Browser */
.status > .support > .chrome::before { background-image: url(https://html5.org/tools/icons/chrome); }
.status > .support > .firefox::before { background-image: url(https://html5.org/tools/icons/gecko); }
.status > .support > .ie::before { background-image: url(https://html5.org/tools/icons/internet-explorer); }
.status > .support > .ie_mob::before { background-image: url(https://html5.org/tools/icons/internet-explorer-mobile); }
.status > .support > .ios_saf::before { background-image: url(https://html5.org/tools/icons/ios-safari); }
.status > .support > .op_mini::before { background-image: url(https://html5.org/tools/icons/opera-mini); }
.status > .support > .op_mob::before { background-image: url(https://html5.org/tools/icons/opera-mobile); }
.status > .support > .opera::before { background-image: url(https://html5.org/tools/icons/opera); }
.status > .support > .safari::before { background-image: url(https://html5.org/tools/icons/webkit); }
.status > .caniuse { text-align: right; font-style: italic; }
.status > .caniuse::before { content: 'See also: '; font: inherit; }

.panel { position: fixed; z-index: 30; top: 10%; left: 0; margin: auto; right: 0; width: 35em; border: double thick; background: #EEEEEE; color: black; padding: 1em; font: 1em sans-serif; max-height: 70%; overflow: auto; }
.panel h2 { margin: 0; text-align: center; }
.panel ul { min-height: 6em; }
.panel p { text-align: right; margin: 0; }
.panel form { background: transparent; color: black; margin: 0.5em -0.5em 1em; padding: 0.5em; }
.panel form.changed { background: yellow; color: black; }
.panel form p { text-align: left; margin: 1em 0 0; }
.panel form p:first-child { margin-top: 0; }
.panel form p:last-child { margin-bottom: 0; }
.panel form p textarea { width: 100% /* need the keyword that makes it fit to the parent here XXX */; min-height: 4em; display: block; }
.panel form dl { line-height: 1.5em; }
.panel form dt { display: inline-block; width: 20em; white-space: nowrap; text-align: right; font-weight: normal; margin: 0; padding: 0; }
.panel form dd { display: inline; margin: 0 0 0 1em; padding: 0; }
.panel form dd:after { display: block; }
ul.checkboxes { list-style-type: none; }
.progress { text-decoration: blink; }

.applies .yes { background: yellow; }
</style>
Expand Down Expand Up @@ -317,7 +365,6 @@
src: url('/fonts/Essays1743-BoldItalic.ttf');
}
</style>
<link w-nodev rel="stylesheet" href="status.css">
</head>
<body onload="init()">
<header w-nodev class="head with-buttons" id="head">
Expand Down Expand Up @@ -10221,7 +10268,7 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0



<h6>Palpable content</h6>
<h6 id="palpable-content">Palpable content</h6>

<p>As a general rule, elements whose content model allows any <span>flow content</span> or
<span>phrasing content</span> should have at least one node in its <span
Expand Down Expand Up @@ -10633,8 +10680,8 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
<hr>

<p>To enable assistive technology products to expose a more fine-grained interface than is
otherwise possible with HTML elements and attributes, a set of <span data-x="WAI-ARIA">annotations
for assistive technology products</span> can be specified (the ARIA <code
otherwise possible with HTML elements and attributes, a set of <a href="#wai-aria">annotations
for assistive technology products</a> can be specified (the ARIA <code
data-x="attr-aria-role">role</code> and <code data-x="attr-aria-*">aria-*</code> attributes). <ref spec=ARIA></p>

<hr>
Expand Down Expand Up @@ -11846,9 +11893,9 @@ plaintext = *( %x0000-2029 / %x202F-2065 / %x206A-10FFFF )
</div>


<h4><dfn>WAI-ARIA</dfn></h4>
<h4 id="wai-aria">Annotations for assistive technology products (ARIA)</h4>

<p>Authors may use the ARIA <code data-x="attr-aria-role">role</code> and <code
<p id="annotations-for-assistive-technology-products-aria">Authors may use the ARIA <code data-x="attr-aria-role">role</code> and <code
data-x="attr-aria-*">aria-*</code> attributes on <span>HTML elements</span>, in accordance with
the requirements described in the ARIA specifications, except where these conflict with the
<span>strong native semantics</span> or are equal to the <span>default implicit ARIA
Expand Down Expand Up @@ -11880,7 +11927,7 @@ plaintext = *( %x0000-2029 / %x202F-2065 / %x206A-10FFFF )

</div>

<p>The following table defines the <span>strong native semantics</span> and corresponding
<p id="sec-strong-native-semantics">The following table defines the <span>strong native semantics</span> and corresponding
<span>default implicit ARIA semantics</span> that apply to <span>HTML elements</span>. Each
language feature (element or attribute) in a cell in the first column implies the ARIA semantics
(any role, states, and properties) given in the cell in the second column of the same row. <span
Expand Down Expand Up @@ -35784,7 +35831,7 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {



<h4>SVG</h4>
<h4 id="svg-0">SVG</h4>

<p>The <dfn><code>svg</code></dfn> element from the <span>SVG namespace</span> falls into the
<span>embedded content</span>, <span>phrasing content</span>, and <span>flow content</span>
Expand Down Expand Up @@ -44054,11 +44101,11 @@ ldh-str = &lt; as defined in <a href="http://tools.ietf.org/html/rfc1034#s
</div>


<h6><dfn data-x="attr-input-type-date">Date</dfn> state (<code data-x="">type=date</code>)</h6>
<h6 id="date-state-(type=date)"><dfn data-x="attr-input-type-date">Date</dfn> state (<code data-x="">type=date</code>)</h6>

<div w-nodev>

<p>When an <code>input</code> element's <code data-x="attr-input-type">type</code> attribute is in
<p id="date-state-%28type=date%29">When an <code>input</code> element's <code data-x="attr-input-type">type</code> attribute is in
the <span data-x="attr-input-type-date">Date</span> state, the rules in this section apply.</p>

</div>
Expand Down Expand Up @@ -45434,7 +45481,7 @@ ldh-str = &lt; as defined in <a href="http://tools.ietf.org/html/rfc1034#s



<h6><dfn data-x="attr-input-type-color">Colour</dfn> state (<code data-x="">type=color</code>)</h6>
<h6 id="color-state-(type=color)"><dfn data-x="attr-input-type-color">Colour</dfn> state (<code data-x="">type=color</code>)</h6>

<div w-nodev>

Expand Down Expand Up @@ -55452,7 +55499,7 @@ fur

<div w-nodev>

<p>The <dfn><code data-x="">application/x-www-form-urlencoded</code> encoding algorithm</dfn> is as
<p id="application-x-www-form-urlencoded-encoding-algorithm">The <dfn><code data-x="">application/x-www-form-urlencoded</code> encoding algorithm</dfn> is as
follows:</p>

<ol>
Expand Down Expand Up @@ -63883,7 +63930,7 @@ try {

<h6>Drawing text to the bitmap</h6>

<dl class="domintro">
<dl class="domintro" id="text-0">

<dt><var>context</var> . <code subdfn data-x="dom-context-2d-fillText">fillText</code>(<var>text</var>, <var>x</var>, <var>y</var> [, <var>maxWidth</var> ] )</dt>
<dt><var>context</var> . <code subdfn data-x="dom-context-2d-strokeText">strokeText</code>(<var>text</var>, <var>x</var>, <var>y</var> [, <var>maxWidth</var> ] )</dt>
Expand Down Expand Up @@ -79686,7 +79733,7 @@ x === this; // true</pre>
and forward buttons, the user agent must <span>traverse the history by a delta</span> equivalent
to the action specified by the user.</p>

<hr> <!--TOPIC:DOM APIs-->
<hr id="history-1"> <!--TOPIC:DOM APIs-->

<p>The <dfn><code data-x="dom-history-pushState">pushState(<var>data</var>, <var>title</var>, <var>url</var>)</code></dfn> method adds a state object entry to
the history.</p>
Expand Down Expand Up @@ -113262,7 +113309,7 @@ if (s = prompt('What is your name?')) {

<!-- NON-NORMATIVE SECTION -->

<table>
<table id="attributes-1">
<caption>List of attributes (excluding event handler content attributes)</caption>
<thead>
<tr>
Expand Down Expand Up @@ -116212,7 +116259,7 @@ INSERT INTERFACES HERE
</dl>


<h2 split-filename="acknowledgements" class="no-num">Acknowledgements</h2> <!-- ACKS -->
<h2 split-filename="acknowledgements" id="acknowledgments" class="no-num">Acknowledgements</h2> <!-- ACKS -->

<p>Thanks to Tim Berners-Lee for inventing HTML, without which none of this would exist.</p>

Expand Down

0 comments on commit b29fb58

Please sign in to comment.