- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Thu, 10 Apr 2014 08:23:11 -0700
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/fb27a036fff0
branches:
changeset: 655:fb27a036fff0
user: Cameron McCormack <cam@mcc.id.au>
date: Fri Apr 11 01:14:53 2014 +1000
description:
First shot at simplifying SVG Integration.
diffstat:
specs/integration/master/Overview.html | 684 +++++++++-------
specs/integration/master/definitions.xml | 6 +-
specs/integration/master/style/default_no_issues.css | 2 +-
specs/integration/master/style/default_no_maturity.css | 23 +
specs/integration/master/style/default_svg.css | 121 +++
5 files changed, 542 insertions(+), 294 deletions(-)
diffs (1326 lines):
diff --git a/specs/integration/master/Overview.html b/specs/integration/master/Overview.html
--- a/specs/integration/master/Overview.html
+++ b/specs/integration/master/Overview.html
@@ -1,13 +1,13 @@
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
<head>
- <title>SVG Integration 1.0</title>
+ <title>SVG Integration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" title="Default" type="text/css" href="style/default_svg.css"/>
<link rel="alternate stylesheet" title="No issues/annotations" type="text/css" href="style/default_no_issues.css"/>
<style>
.feature {
text-align: right;
}
.embedcontext, table.ref_modes td {
@@ -77,16 +77,18 @@ a.button:link, a.button:visited {
vertical-align: baseline;
}
#element-index > tbody > tr > td > div + div {
margin-top: 0.5em;
}
#element-index dl, #element-index dt, #element-index dd { margin-top: 0; margin-bottom: 0; }
#element-index ul, #element-index li { display: inline; margin: 0; padding: 0; }
#element-index li::before { content: "\25cf "; }
+
+div.issue { margin-top: 1em; }
</style>
<script>
function overButton(event) {
var version = event.target.textContent;
if (version == "1.1" || version == "1.2T" || version == "2") {
var n = event.target;
while (n.localName != "th") {
n = n.parentNode;
@@ -112,50 +114,49 @@ function outButton(event) {
}
}
</script>
</head>
<body>
<div class="head">
<p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
- <h1 id="pagetitle">SVG Integration 1.0</h1>
+ <h1 id="pagetitle">SVG Integration</h1>
<h2 id="pagesubtitle">W3C <edit:maturity/> <em><edit:date/></em></h2>
<dl>
<dt>This version:</dt>
<dd><edit:thisversion/></dd>
<dt>Latest version:</dt>
<dd><edit:latestversion/></dd>
<edit:includelatesteditorsdraft/>
<!--
<dt>Previous version:</dt>
<dd><edit:previousversion/></dd>
-->
<dt>Public comments:</dt>
<dd><a href="mailto:www-svg@w3.org" class='url'>www-svg@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/www-svg/">archive</a>)</dd>
<dt class="top-editors">Editor:</dt>
+ <dd>Cameron McCormack, Mozilla Corporation <<a href="mailto:cam@mcc.id.au" class='url'>cam@mcc.id.au</a>></dd>
<dd>Doug Schepers, W3C <<a href="mailto:schepers@w3.org" class='url'>schepers@w3.org</a>></dd>
+ <dd>Dirk Schulze, Adobe Systems Inc. <<a href="mailto:dschulze@adboe.com" class='url'>dschulze@adobe.com</a>></dd>
</dl>
<edit:copyright/>
</div>
<hr/>
<h2 id="abstract">Abstract</h2>
-<p>The SVG Integration Module is intended as a guide to other markup
-and programming on how to best integrate SVG, within the context of
-that language's constraints. SVG may be integrated in whole or in part,
-and may be included in another language by reference or by inclusion
-(that is, through linking or inline). This specification contains
-normatively referenceable material, and discusses default behaviors
-and best practices, but is not intended to override the design of the
-referencing language.</p>
-
-<p>This specification contains references to other SVG specifications.</p>
+<p>This specification details requirements on how SVG documents must be
+processed when used in various contexts, such as CSS background images,
+HTML <span class='element-name'>'iframe'</span> elements, and so on.
+These requirements include which features are restricted or disabled,
+such as scripting and animation. A number of referencing modes are defined,
+which other specifications that allow the embedding or referencing of
+SVG documents can normatively reference.</p>
<h2 id="status">Status of This Document</h2>
<p><em>This section describes the status of this document at the time of its
publication. Other documents may supersede this document. A list of current W3C
publications and the latest revision of this technical report can be found in
the <a href="http://www.w3.org/TR/">W3C technical reports index</a> at http://www.w3.org/TR/</em>.</p>
@@ -195,209 +196,369 @@ must disclose the information in accorda
<p>Publication as a Working Draft does not imply endorsement by the W3C Membership.
This is a draft document and may be updated, replaced or obsoleted by other documents
at any time. It is inappropriate to cite this document as other than work in progress.</p>
<p>A list of current W3C Recommendations and other technical documents can be found at
<a href="http://www.w3.org/TR/" class='url'>http://www.w3.org/TR/</a>. W3C publications
may be updated, replaced, or obsoleted by other documents at any time.</p>
+<!--
<h2 id="feedback" edit:toc="no">How to read this document and give feedback</h2>
<p>This draft of SVG Integration introduces new normative prose for
integrating the SVG language into other markup languages. One of
the goals is that this specification can be re-used more easily by
other specifications that want to have well-defined interaction and
interoperability with SVG. Future drafts of this specification may
introduce syntax and markup for the SVG language that may not be
backwards compatible with older SVG User Agents, and the use of this
syntax should be accompanied by a fallback using the <a>'switch'</a>
element.</p>
+-->
<h2 id="toc">Table of Contents</h2>
<edit:fulltoc/>
<h2 id="intro">Introduction</h2>
-<p><em>Describe the technology and specification here.</em></p>
+<p><em>This section is non-normative.</em></p>
-<p>Note that even though this specification references parts of
-<a href="#ref-svg11">SVG 1.1</a> and <a href="#ref-svgt12">SVG Tiny 1.2</a>
-it does not require a complete implementation of those specifications.</p>
+<p>SVG is a vector graphics markup language used both for artwork and
+to create interactive, rich content applications. In addition to being
+able to render graphical primitives such as shapes, text and images,
+SVG also supports a number of more complex features, including declarative
+animation, scripting using ECMAScript, and the ability to reference
+external resources.</p>
-<p>This document is normative.</p>
+<p>For SVG to adhere to the security model of the Web platform, certain
+SVG features are required to be disabled depending on how the SVG document
+is being used. For example, SVG documents referenced by an HTML
+<span class='element-name'>'img'</span> element are required to have
+scripting disabled.</p>
-<p>This document contains explicit conformance criteria that overlap
-with some RNG definitions in requirements. If there is any conflict
-between the two, the explicit conformance criteria are the definitive
-reference.</p>
+<p>The primary purpose of this document, SVG Integration, is to define a number
+of <em>referencing modes</em> for SVG documents, which detail the requirements
+for processing an SVG document when it is used in a certain context.
+These requirements include the set of features that must be disabled,
+any user agent style sheet rules to apply, and more.</p>
-<h3 id="use-cases">Use Cases and Requirements</h3>
+<p>Normative requirements are given for contexts in other SVG documents,
+such as how an SVG <a>'image'</a> element must treat a referenced SVG
+documents. Non-normative recommendations are given for other languages,
+including HTML and CSS, with the expectation that these other specifications
+will normatively reference the referencing mode definitions in this document.</p>
-<p><em>This section is informative.</em></p>
+<div class="issue">
+ <p>There are other things we may wish to include in this document, including:</p>
+ <ul>
+ <li>Recommendations for how SVG can be used and responsibly extended in other,
+ non-Web markup languages.</li>
+ <li>Recommendations for how to embed data in SVG documents, and how
+ to use foreign namespace elements and attributes in SVG documents
+ using the XML serialization.</li>
+ <li>Requirements on how the sizing of SVG documents in CSS and other
+ contexts is performed.</li>
+ <li>Requirements on how the sizing of HTML content within <a>'foreignObject'</a>
+ elements is performed.</li>
+ <li>A table of all SVG elements, attributes and properties from all
+ published versions of SVG.</li>
+ <li>A table of element and attribute name case folding rules that can be
+ used by the HTML parser.</li>
+ <!-- from the old Use Cases and Requirements section:
+ <li>must address focus navigation across embedding boundaries</li>
+ <li>must address fragment identifiers behavior for compound documents</li>
+ <li>must address link traversal in compound documents</li>
+ <li>must discuss transparency and compositing</li>
+ <li>may define parameter defaulting syntax</li>
+ <li>may define or reference a data binding mechanism</li>
+ -->
+ </ul>
+</div>
-<p>Here are some of the use cases and requirements for this specification.</p>
+<h2 id="referencing-modes">Referencing modes</h2>
-<ul>
- <li>must have clear tables that integrate all known SVG elements, attributes, attribute values, and methods</li>
- <li>should link back to normative definitions for all the above</li>
- <li>should be automated (derive lists from SVG 1.1, SVG Tiny 1.2, Vector Effects, Filters, Compositing, Transforms, etc. via script)</li>
- <li>must be normatively referenceable, e.g. by HTML5, CSS, ODF, IPTV, and other languages where we expect SVG might be reused as a whole, or even referenced in part, as in the Widgets specs</li>
- <li>should have revision history [1]</li>
- <li>may have case-insensitive string equivalents [2]</li>
- <li>must cover different embedding and referencing scenarios (may work with HTML & CSS WGs here), with different expected capabilities</li>
- <li>must explain how to extend SVG properly (copying the chapter from SVG Tiny 1.2) [4]</li>
- <li>must address potential security issues (external references, circular references, that weird thing ROC brought up with pixel-sniffing)</li>
- <li>must address passed in parameters, fragment identifiers, etc.</li>
- <li>should cover other specific odds and ends with various elements</li>
- <li>must address focus navigation across embedding boundaries</li>
- <li>must address fragment identifiers behavior for compound documents</li>
- <li>must address link traversal in compound documents</li>
- <li>must discuss transparency and compositing</li>
- <li>should discuss embedding size and dimensions (including script access to rendered dimensions)</li>
- <li>may introduce new integration features</li>
- <li>may define parameter defaulting syntax</li>
- <li>may define or reference a data binding mechanism</li>
-</ul>
+<p>There are various ways that an SVG document fragment can be
+referenced by or included in other documents and then as a consequence
+be processed by a user agent. SVG documents can also be viewed as a
+top-level document. Each different method by which an SVG document fragment
+can be used implies a certain set of requirements on how the SVG document
+fragment is to be processed.</p>
-<h2 id="referencing-modes">Referencing Modes for SVG</h2>
+<p>This section defines a number of <dfn id="referencing-mode">referencing
+modes</dfn> that encompass the different ways SVG document fragments can
+be used on the Web platform and which specify how the SVG document fragments must be
+processed. Each referencing mode is defined by requiring the SVG document fragment
+be processed in a given <a href="#processing-mode">processing mode</a>.
+Processing modes are introduced in <a href="#processing-modes">section 3</a> below
+and define which features are enabled or disabled in the document.</p>
-<p>There are many different ways in which an external SVG file may be referenced
-in a host language. These different scenarios are known as
-<dfn id="TermReferencingMode">referencing modes</dfn>,
-and each <a>referencing mode</a> is suited to a different set of
-constraints, in terms of security, performance optimization, intended usage,
-and legacy considerations. Each <a>referencing mode</a> defines whether
-such features as script execution, external references, declarative animation,
-interactivity, and linking must or must not be supported. Different
-<a>referencing modes</a> may be specified for different aspects of the same
-language, or a language may use a single <a>referencing mode</a>, depending on
-the complexity of the language. A conforming User Agent must support the full
-feature set defined for each <a>referencing mode</a> for all languages that
-that User Agent supports, and must not permit behavior disallowed by the
-relevant <a>referencing mode</a>. Where multiple <a>referencing modes</a> are
-permitted, authors should choose the most restricted <a>referencing modes</a>
-that meets their needs.</p>
+<p class="note">This document does not place normative requirements on
+other specifications that can reference or include SVG documents, such as
+HTML and various CSS specifications. The intention is for these other
+specifications to normatively point to the appropriate referencing mode
+from this document.</p>
-<p>A DOM must be produced and maintained for SVG images using all
-<a>referencing modes</a> except <a href="#immediate_mode">Immediate Mode</a>,
-and the DOM must be exposed to Accessibility Technology User Agents.</p>
-
-<p class="issue">Should we have an Immediate Mode?</p>
-
-<p class="issue">Should we talk about CORS here?</p>
-
-
-<h3 id="definitions">Feature Definitions</h3>
+<p>The available <a href="#referencing-mode">referencing modes</a> are as follows:</p>
<dl>
- <dt><dfn id="def-declarative_animation">declarative animation</dfn></dt>
- <dd>Declarative animation is a change or set of changes
- to the presentation of the SVG image through the use of
- predefined elements or properties, as with the animation elements
- <a>'animate'</a>, <a>'set'</a>, etc., as
- opposed to procedural script. Declarative animation may be triggered
- by either a event timeline or by user-generated events (see
- <a href="#def-interaction"><span class="svg-term">interaction</span></a>).
- Because it has a bounded set of functionality, declarative animation may
- pose less of a security risk than
- <a href="#def-script_execution"><span class="svg-term">script execution</span></a>.
- Complex animations may be computationally intensive, and thus may not be
- suitable for all devices or <a>referencing modes</a>.</dd>
+ <dt><dfn id="top-level-document-mode">top-level document</dfn></dt>
+ <dd>
+ <p>This referencing mode is for SVG documents that are loaded as a top-level
+ document in a user agent.</p>
+ <p>SVG documents processed with the
+ <a href="#top-level-document-mode">top-level document</a>
+ <a href="#referencing-mode">referencing mode</a> must use the
+ <a href="#dynamic-interactive-mode">dynamic interactive</a>
+ <a href="#processing-mode">processing mode</a>.</p>
- <dt><dfn id="def-external_reference">external reference</dfn></dt>
+ <p class="note">This referencing mode is intended to be used when
+ an SVG document is loaded in a browser's
+ <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#top-level-browsing-context">top-level browsing context</a>.</p>
+ </dd>
+
+ <dt><dfn id="embedded-document-mode">embedded document</dfn></dt>
<dd>
- <p>An external reference is any link from the current file to
- another file for inclusion, rendering, or processing in the context
- of the current file. In some situations, external references may
- constitute a security concern; because it is difficult to detect
- when the use of an external resource is safe and when it is not,
- under secure circumstances, all external references should be
- disabled, unless there is an appropriate security mechanism in place
- (<span class="issue">CORS?</span>). External references include, but
- are not limited to:</p>
+ <p>This referencing mode is for SVG documents that are externally referenced
+ and embedded for presentation in a host document. SVG documents referenced by the
+ <a>'iframe'</a> element from SVG 2 or the
+ <a>'animation'</a> element from SVG Tiny 1.2 must use the
+ <a href="#embedded-document">embedded document</a>
+ <a href="#referencing-mode">referencing mode</a>.</p>
+
+ <p>SVG documents processed with the
+ <a href="#embedded-document-mode">embedded document</a>
+ <a href="#referencing-mode">referencing mode</a> must use the
+ <a href="#dynamic-interactive-mode">dynamic interactive</a>
+ <a href="#processing-mode">processing mode</a>.</p>
+
+ <p class="note">This referencing mode is intended to be used when
+ an SVG document is loaded in an HTML
+ <span class='element-name'>'embed'</span>,
+ <span class='element-name'>'iframe'</span> or
+ <span class='element-name'>'object'</span> element.</p>
+ </dd>
+
+ <dt><dfn id="animated-image-document-mode">animated image document</dfn></dt>
+ <dd>
+ <p>This referencing mode is for SVG documents that are used as images,
+ where the context would typically be expecting a raster image that can
+ animate. SVG documents referenced by the SVG <a>'image'</a> element must
+ use the <a href="#animated-image-document-mode">animated image document</a>
+ <a href="#referencing-mode">referencing mode</a> if
+ the referencing SVG document is using the
+ <a href='#top-level-document-mode'>top-level document</a>,
+ <a href='#embedded-document-mode'>embedded document</a> or
+ <a href='#animated-image-document-mode'>animated image document mode</a>.</p>
+
+ <p>SVG documents processed with the
+ <a href="#animated-image-document-mode">animated image document</a>
+ <a href="#referencing-mode">referencing mode</a> must use the
+ <a href="#secure-animated-mode">secure animated</a>
+ <a href="#processing-mode">processing mode</a>.</p>
+
+ <p class="note">This referencing mode is intended to be used when
+ an SVG document is referenced by an HTML
+ <span class='element-name'>'img'</span> element or
+ by any CSS property that takes an
+ <a href='http://www.w3.org/TR/css3-values/#images'><image></a>
+ value, and if animations can be run.</p>
+ </dd>
+
+ <dt><dfn id="static-image-document-mode">static image document</dfn></dt>
+ <dd>
+ <p>This referencing mode is for SVG documents that are used as images,
+ where the context would typically be expecting a raster image but where
+ animations are unable to run. SVG documents
+ referenced by the SVG <a>'image'</a> element must use the
+ <a href="#static-image-document-mode">static image document</a>
+ <a href="#referencing-mode">referencing mode</a> if
+ the referencing SVG document is using the
+ <a href='#static-image-document-mode'>static image document mode</a>.</p>
+
+ <p>SVG documents processed with the
+ <a href="#static-image-document-mode">static image document</a>
+ <a href="#referencing-mode">referencing mode</a> must use the
+ <a href="#secure-static-mode">secure static</a>
+ <a href="#processing-mode">processing mode</a>.</p>
+
+ <p class="note">This referencing mode is intended to be used when
+ an SVG document is referenced by an HTML
+ <span class='element-name'>'img'</span> element or
+ by any CSS property that takes an
+ <a href='http://www.w3.org/TR/css3-values/#images'><image></a>
+ value, and if animations cannot be run.</p>
+ </dd>
+
+ <dt><dfn id="resource-document-mode">resource document</dfn></dt>
+ <dd>
+ <p>This referencing mode is for SVG documents that are loaded
+ as resource documents in order to use their <a>'mask element'</a>,
+ <a>'pattern element'</a>, gradient, or other resource elements.
+ SVG documents loaded due to a reference to an external document from any
+ of the following features must use the
+ <a href="#resource-document-mode">resource document</a>
+ <a href="#referencing-mode">referencing mode</a>:</p>
<ul>
- <li><span class="attr-name">‘xlink:href’</span> attribute
- targets for elements, such as <a>'image'</a>, <a>'use'</a>,
- <a>'feImage'</a>, <a>'tref'</a>, <a>'video'</a>
- <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/multimedia.html#AudioElement"><span class="element-name">‘audio’</span></a>,
- <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/multimedia.html#AnimationElement"><span class="element-name">‘animation’</span></a>,
- <a>'font-face-uri'</a>, <a>'textPath'</a>, <a>'mpath'</a>,
- <a>'script'</a>, <a>'cursor element'</a>, <a>'altGlyph'</a>, <a>'glyphRef'</a>,
- <a>'color-profile element'</a>, <a>'foreignObject'</a>,
- <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/struct.html#PrefetchElement"><span class="element-name">‘prefetch’</span></a></li>
+ <li>the <a>'clip-path'</a>, <a>'cursor property'</a>, <a>'fill'</a>,
+ <a>'filter property'</a> <a>'stroke'</a>, <a>'marker-mid'</a>,
+ <a>'marker-start'</a>, <a>'marker-end'</a> and <a>'mask property'</a>
+ properties</li>
- <li>external stylesheets (XSL or CSS)</li>
+ <li>the <a>'altGlyph'</a>, <a>'cursor element'</a>, <a>'feImage'</a>,
+ <a>'filter element'</a>, <a>'linearGradient'</a>, <a>'mpath'</a>,
+ <a>'pattern'</a>, <a>'radialGradient'</a>, <a>'textPath'</a>,
+ <a>'tref'</a> and <a>'use'</a> elements</li>
+ </ul>
- <li>external references for CSS properties: <a>'fill'</a>,
- <a>'stroke'</a>, <a>'mask property'</a>, <a>'marker property'</a>, <a>'marker-mid'</a>,
- <a>'marker-start'</a>, <a>'marker-end'</a>, <a>'clip-path'</a>,
- <a>'filter property'</a></li>
+ <p>SVG documents processed with the
+ <a href="#resource-document-mode">resource document</a>
+ <a href="#referencing-mode">referencing mode</a> must use the
+ <a href="#secure-animated-mode">secure animated</a>
+ <a href="#processing-mode">processing mode</a>.</p>
- <li>CSS @import rule</li>
-
- <li>@font-face with external src</li>
-
- <li><a>'foreignObject'</a> may contain external resources (depends on
- the content inside, for html e.g. iframe, object etc)</li>
-
- <li>elements in other namespaces that load external resources (e.g.
- <span class="element-name">‘xhtml:link’</span>,
- <span class="element-name">‘xhtml:script’</span>, etc)</li>
- </ul>
+ <p class='issue'>Should animations run in the resource document?</p>
</dd>
- <dt><dfn id="def-link_traversal">link traversal</dfn></dt>
- <dd>Link traversal refers to changing of the user agent's
- current active document view by user activation of a hyperlink.
- In the context of <a>referencing modes</a>, link traversal
- only pertains to hyperlinks defined within the referenced SVG
- file. A host language may allow all or part of an SVG image to
- serve as a link in the host language's context and using that
- language's conventions and mechanisms, such as using HTML's
- <span class="element-name">‘a’</span> or
- <span class="element-name">‘map’</span> elements.</dd>
+ <dt><dfn id="font-document-mode">font document</dfn></dt>
+ <dd>
+ <p>This referencing mode is for SVG documents that are being used
+ to define font glyphs.</p>
- <dt><dfn id="def-script_execution">script execution</dfn></dt>
- <dd>Script execution is the processing and application of
- procedural (as opposed to declarative) code and events. Where a
- <a>referencing mode</a> does not allow script execution, this
- prohibition must apply to scripted events or changes to the SVG
- DOM whether the script is contained inside the referenced SVG file
- or in the host language file. In the context of
- <a>referencing modes</a>, script execution only pertains to the DOM of
- the SVG image, not to events or changes to the host language's DOM.
- For example, an SVG image would act the same as a PNG image in
- an HTML <span class="element-name">‘a’</span>
- element, such that a mouse event on that
- <span class="element-name">‘a’</span> element would fire and
- bubble up the HTML DOM, but would not be available to a script in the
- SVG DOM.</dd>
+ <p>SVG documents processed with the
+ <a href="#font-document-mode">font document</a>
+ <a href="#referencing-mode">referencing mode</a> must use the
+ <a href="#secure-animated-mode">secure animated</a>
+ <a href="#processing-mode">processing mode</a>.</p>
- <dt><dfn id="def-interaction">interaction</dfn></dt>
- <dd>Interaction means receiving and processing user-generated events,
- such as mouse or keyboard activity. Where a <a>referencing mode</a>
- does not allow interactivity, such as for performance or security
- reasons, the interactivity is prohibited in the SVG DOM only, and may
- trigger events normally in the the host language's context.</dd>
+ <p>Additionally, SVG documents processed with the
+ <a href="#font-document-mode">font document</a>
+ <a href="#referencing-mode">referencing mode</a> must apply the
+ following user agent style sheet:</p>
+
+ <pre style="background-color: #eee; padding: 0.5em">@namespace svg url(http://www.w3.org/2000/svg);
+
+svg|text, svg|foreignObject {
+ display: none !important;
+}
+
+:root {
+ fill: context-fill;
+ fill-opacity: context-fill-opacity;
+ stroke: context-stroke;
+ stroke-opacity: context-stroke-opacity;
+ stroke-width: context-value;
+ stroke-dasharray: context-value;
+ stroke-dashoffset: context-value;
+}</pre>
+ <p class="note">This referencing mode is intended to used by the
+ OpenType specification for processing documents from the "SVG"
+ table.</p>
+ <p class="issue">Should the CSS Variables that map the palette
+ colors into the document be defined here too? It probably makes
+ sense to keep that in the OpenType specification.</p>
+ </dd>
</dl>
-<h3 id="dynamic_interactive_mode">Dynamic Interactive Mode</h3>
+<p>SVG document fragments that are included inline in a host document
+use a <a href='#referencing-mode'>referencing mode</a> that matches
+that of the host document. SVG document fragments included as
+children of an SVG <a>'foreignObject'</a> element must use the
+<a href='#referencing-mode'>referencing mode</a> of the referencing
+SVG document.</p>
-<p>This <a>referencing mode</a> imposes no restrictions on any
-feature of the SVG language. This is the <a>referencing mode</a>
-that must be used for standalone SVG files in normal circumstances.
-This specification recommends that this <a>referencing mode</a>
-apply to those elements that are referred to in HTML5 as a
-<a href="http://www.w3.org/TR/html5/browsers.html#browsing-context">browsin g context</a>,
-such as the <span class="element-name">‘object’</span>,
-<span class="element-name">‘iframe’</span>, and
-<span class="element-name">‘embed’</span> elements.</p>
+<p class='note'>For example, if an SVG document is being used in
+<a href='#animated-image-document-mode'>animated image document mode</a>
+due to being referenced by an HTML <a>'image'</a> element, then any
+inline SVG fragment that is a child of a <a>'foreignObject'</a> element
+within that document is also processed using
+<a href='#animated-image-document-mode'>animated image document mode</a>.</p>
+
+
+<h2 id="processing-modes">Processing modes</h2>
+
+<p>This section defines a number of <dfn id="processing-mode">processing modes</dfn>
+for SVG documents. Each processing mode specifies whether certain high level
+SVG features are enabled.</p>
+
+<h3 id="features">Features</h3>
+
+<p>The features that can be enabled or disabled depending
+on the processing mode are as follows:</p>
+
+<dl>
+ <dt>declarative animation</dt>
+ <dd>
+ <p>Declarative animation includes both the SMIL animation elements in SVG –
+ <a>'animate'</a>, <a>'animateColor'</a>, <a>'animateMotion'</a>,
+ <a>'animateTransform'</a> and <a>'set'</a> – and CSS Transitions and Animations.
+ When declarative animations are disabled in an SVG document, any SMIL
+ animations or CSS Transitions or Animations must not be applied or run.</p>
+ <p class='note'>This is not the same as pausing the document's animated
+ state at 0s document time; if a SMIL animation is defined to begin at 0s,
+ it still will not be applied.</p>
+ </dd>
+
+ <dt>external references</dt>
+ <dd>
+ <p>External references are URLs specified when using any of the following
+ SVG features, where any of the URL's components, ignoring the fragment,
+ do not match the document's URL:</p>
+ <ul>
+ <li>the <a>'clip-path'</a>, <a>'cursor property'</a>, <a>'fill'</a>,
+ <a>'filter property'</a> <a>'stroke'</a>, <a>'marker-mid'</a>,
+ <a>'marker-start'</a>, <a>'marker-end'</a> and <a>'mask property'</a>
+ properties</li>
+
+ <li>the <a>'altGlyph'</a>, <a>'audio'</a>, <a>'color-profile element'</a>,
+ <a>'cursor element'</a>, <a>'feImage'</a>, <a>'filter element'</a>,
+ <a>'font-face-uri'</a>, <a>'foreignObject'</a>, <a>'glyphRef'</a>,
+ <a>'image'</a>, <a>'linearGradient'</a>, <a>'mpath'</a>, <a>'pattern'</a>,
+ <a>'radialGradient'</a>, <a>'script'</a>, <a>'textPath'</a>,
+ <a>'tref'</a>, <a>'use'</a> and <a>'video'</a> elements</li>
+
+ <li>any other network requests made by script, HTML, CSS or other
+ Web platform features used in the document</li>
+ </ul>
+ <p>When external references are disabled in an SVG document, any attempt to
+ fetch a document through an external reference must instead be treated as
+ if a network error occurred and no data was received.</p>
+ <p class='issue'>This is all too handwavy. And we perhaps shouldn't try
+ to make an exhaustive list. This needs to be defined in
+ terms of Fetch, probably. And the URL Standard for comparing the URLs.</p>
+ </dd>
+
+ <dt>script execution</dt>
+ <dd>
+ <p>Script execution is the execution of any SVG <a>'script'</a> elements,
+ script found in event listener attributes (such as <a>'onclick'</a> on
+ SVG elements), or any other script defined by other Web platform features
+ used in the document such as any HTML <a>'script'</a> elements.
+ When script execution is disabled in an SVG document, no script in the
+ document must be run.</p>
+ </dd>
+
+ <dt>interaction</dt>
+ <dd>
+ <p>Interaction refers to the delivery of DOM Events or the invocation of
+ any user agent specific UI behaviors such as text selection, focus changing,
+ link traversal, or animation or transition triggering that is done in
+ response to user input such as mouse or keyboard activity. When
+ interaction is disabled in an SVG document, any user input events that would
+ be targetted at the document or any elements within the document must have
+ no effect.</p>
+ </dd>
+</dl>
+
+<h3 id="dynamic-interactive-mode">Dynamic interactive Mode</h3>
+
+<p>This <a>processing mode</a> imposes no restrictions on any
+feature of the SVG language.</p>
<table class="features" border="0" cellpadding="2" cellspacing="2">
<thead>
<tr>
<th colspan="2">Dynamic Interactive Features</th>
</tr>
</thead>
<tbody>
@@ -412,35 +573,30 @@ such as the <span class="element-name">&
<tr>
<th>declarative animation</th>
<td>yes</td>
</tr>
<tr>
<th>interactivity</th>
<td>yes</td>
</tr>
- <tr>
- <th>link traversal</th>
- <td>yes</td>
- </tr>
</tbody>
</table>
-<h3 id="animated_mode">Animated Mode</h3>
+<h3 id="animated-mode">Animated mode</h3>
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance may be an issue, where there are limited security
-concerns, or where image support has traditionally been limited
-to raster images (such as JPEG or PNG), but where animation is
-desired. Animated mode allows declarative animation, but permits
-no script execution, interactivity, or link traversal. This is
-the <a>referencing mode</a> that must be supported for the SVG
-<a>'image'</a> element and is recommended to apply to the HTML
-<span class="element-name">‘img’</span> element and for
-use as a Widget icon.</p>
+<p>This <a>processing mode</a> is intended for circumstances where
+an SVG document is to be used as an animated image that is allowed
+to resolve external references, but which is not intended to be used
+as an interactive document.</p>
+
+<p class='note'>Note that this <a>processing mode</a> is not used
+by any of the <a>referencing modes</a> defined in this specification.</p>
+
+<p class='issue'>Should we remove this processing mode?</p>
<table class="features" border="0" cellpadding="2" cellspacing="2">
<thead>
<tr>
<th colspan="2">Animated Features</th>
</tr>
</thead>
<tbody>
@@ -455,31 +611,27 @@ use as a Widget icon.</p>
<tr>
<th>declarative animation</th>
<td>yes</td>
</tr>
<tr>
<th>interactivity</th>
<td>no</td>
</tr>
- <tr>
- <th>link traversal</th>
- <td>no</td>
- </tr>
</tbody>
</table>
-<h3 id="secure_animated_mode">Secure Animated Mode</h3>
+<h3 id="secure-animated-mode">Secure animated mode</h3>
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance may be an issue, where there are strict security concerns,
-or where image support has traditionally been limited to raster images
-(such as JPEG or PNG), but where animation is desired. Secure animated
-mode allows declarative animation, but permits no script execution,
-external references, interactivity, or link traversal.</p>
+<p>This <a>processing mode</a> is intended for circumstances where
+an SVG document is to be used as an animated image that is not allowed
+to resolve external references, and which is not intended to be used
+as an interactive document. This mode might be used where image support
+has traditionally been limited to raster images (such as JPEG, PNG and
+GIF).</p>
<table class="features" border="0" cellpadding="2" cellspacing="2">
<thead>
<tr>
<th colspan="2">Secure Animated Features</th>
</tr>
</thead>
<tbody>
@@ -494,30 +646,30 @@ external references, interactivity, or l
<tr>
<th>declarative animation</th>
<td>yes</td>
</tr>
<tr>
<th>interactivity</th>
<td>no</td>
</tr>
- <tr>
- <th>link traversal</th>
- <td>no</td>
- </tr>
</tbody>
</table>
-<h3 id="static_mode">Static Mode</h3>
+<h3 id="static-mode">Static mode</h3>
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance may be an issue, or where there are limited security
-concerns. Static mode permits no script execution, declarative
-animation, interactivity, or link traversal. This is the
-<a>referencing mode</a> that is recommended to apply to CSS background images.</p>
+<p>This <a>processing mode</a> is intended for circumstances where
+an SVG document is to be used as a non-animated image that is allowed
+to resolve external references, but which is not intended to be used
+as an interactive document.</p>
+
+<p class='note'>Note that this <a>processing mode</a> is not used
+by any of the <a>referencing modes</a> defined in this specification.</p>
+
+<p class='issue'>Should we remove this processing mode?</p>
<table class="features" border="0" cellpadding="2" cellspacing="2">
<thead>
<tr>
<th colspan="2">Static Features</th>
</tr>
</thead>
<tbody>
@@ -532,29 +684,27 @@ animation, interactivity, or link traver
<tr>
<th>declarative animation</th>
<td>no</td>
</tr>
<tr>
<th>interactivity</th>
<td>no</td>
</tr>
- <tr>
- <th>link traversal</th>
- <td>no</td>
- </tr>
</tbody>
</table>
-<h3 id="secure_static_mode">Secure Static Mode</h3>
+<h3 id="secure-static-mode">Secure static mode</h3>
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance may be an issue, or where there are strict security
-concerns. Secure static mode permits no script execution, external
-references, declarative animation, interactivity, or link traversal.</p>
+<p>This <a>processing mode</a> is intended for circumstances where
+an SVG document is to be used as a non-animated image that is not allowed
+to resolve external references, and which is not intended to be used
+as an interactive document. This mode might be used where image support
+has traditionally been limited to non-animated raster images (such as JPEG
+and PNG.)</p>
<table class="features" border="0" cellpadding="2" cellspacing="2">
<thead>
<tr>
<th colspan="2">Secure Static Features</th>
</tr>
</thead>
<tbody>
@@ -569,66 +719,24 @@ references, declarative animation, inter
<tr>
<th>declarative animation</th>
<td>no</td>
</tr>
<tr>
<th>interactivity</th>
<td>no</td>
</tr>
- <tr>
- <th>link traversal</th>
- <td>no</td>
- </tr>
- </tbody>
-</table>
-
-<h3 id="immediate_mode">Immediate Mode</h3>
-
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance is a major concern. Immediate mode permits no script
-execution, external references, declarative animation, interactivity,
-or link traversal. In addition, a User Agent may to discard the DOM
-representation from memory after rendering. This is only to be used
-in extreme circumstances, as it severely limits the usability and
-accessibility of SVG. <span class="issue">Should we have an Immediate
-Mode?</span></p>
-
-<table class="features" border="0" cellpadding="2" cellspacing="2">
- <thead>
- <tr>
- <th colspan="2">Immediate Features</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th>script execution</th>
- <td>no</td>
- </tr>
- <tr>
- <th>external references</th>
- <td>no</td>
- </tr>
- <tr>
- <th>declarative animation</th>
- <td>no</td>
- </tr>
- <tr>
- <th>interactivity</th>
- <td>no</td>
- </tr>
- <tr>
- <th>link traversal</th>
- <td>no</td>
- </tr>
</tbody>
</table>
<h3 id="examples">Examples</h3>
+<p><em>This section is non-normative.</em></p>
+
+<div class="example">
<p>Below are various methods of embedding SVG in an HTML page by
reference. Each <a>referencing mode</a> element should display a yellow
smiley face. In each example below, clicking on the eyes tests link
traversal, and clicking on the face tests declarative interactivity
and script execution. The link should replace the image with a blue
square (clicking on that will return you to the original image). The
declarative interactivity, which uses the <a>'set'</a> element, should change
the image from shades of yellow to shades of green. The script should fill
@@ -661,69 +769,53 @@ animation is supported if the left eye i
</td>
<td>
<img class="embedcontext" alt="smiley face" src="smiley.svg" />
</td>
<td class="bg"> </td>
</tr>
</tbody>
</table>
+</div>
-<h2 id="foreign-content">Foreign Content in SVG</h2>
+<h2 id="foreign-content">Embedding foreign content in SVG</h2>
-<p>SVG is designed to be used as a standalone format, or in combination with
-other formats such as X/HTML. These different formats can be used in SVG, by
-reference or by inclusion (inline), as with the
-<a>'foreignObject'</a> element described in
-<a href="http://www.w3.org/TR/SVGTiny12/extend.html#ForeignObjectElement">embedding foreign object types</a>.</p>
+<p>The SVG <a>'foreignObject'</a> element is an extension point that
+can be used to include document fragments from other languages to
+be rendered in an SVG document. This section defines how HTML and
+SVG elements are handled as children of <a>'foreignObject'</a>.</p>
-<h3 id="foreignobject">The <span class="element-name">'foreignObject'</span> Element</h3>
+<h3 id="foreign-content-html">Using HTML in <span class='element-name'>'foreignObject'</span></h3>
<p>When <a>'foreignObject'</a> is used to contain content which is styled by
CSS, the viewport establishes the initial containing block (as defined in CSS
2.1). The dimensions of the CSS viewport in pixels are the width and height
attribute values of the <a>'foreignObject'</a> element in user units.</p>
<div class="example">
<p>For example, if HTML content is included inline in SVG inside a
<a>'foreignObject'</a> element with a <a>'foreignObject/width'</a> of
<span class="attr-value">'400'</span> and a
<a>'foreignObject/height'</a> of <span class="attr-value">'600'</span>,
the HTML content will wrap to that area, as if it were an HTML
<span class="element-name">'div'</span> element with those dimensions.</p>
</div>
-<p class="issue">@@ What should we say about when to rasterize the
+<p class="issue">What should we say about when to rasterize the
foreign content? In existing implementations, HTML form controls in
-'foreignObject' often look pixelated</p>
+<a>'foreignObject'</a> often look pixelated.</p>
-<p class="issue">@@ Add examples of HTML in foreignObject, by reference
+<p class="issue">Add examples of HTML in foreignObject, by reference
and inline.</p>
-<p class="issue">@@ Link to CDR\WICD specs.</p>
+<h3 id="foreign-content-svg">Using SVG in <span class='element-name'>'foreignObject'</span></h3>
-<h2 id="inline-svg">SVG in Foreign Content</h2>
+<p class='issue'>TODO</p>
-<p>SVG is designed to be used as a standalone format, or in combination
-with other formats such as X/HTML. SVG can be used in these different
-formats, by reference or by inclusion (inline).</p>
-
-<p>When used as a reference, SVG content falls into one of the
-categories detailed in <a href="referencing_modes">Referencing Modes
-for SVG</a>. When used as inline, SVG must be used with the constraints
-established by that host language (such as HTML5).</p>
-
-<p class="issue">@@ Add examples of referenced and inline SVG.</p>
-
-<p class="issue">@@ Give details about
-<a href="http://www.w3.org/TR/SVGTiny12/linking.html#AElementTargetAttribute" title="Linking – SVG Tiny 1.2">link target keywords</a>
-in inline and referenced modes.</p>
-
-<p class="issue">@@ Link to CDR\WICD specs.</p>
-
+<!--
<h2 id="extend">Extending SVG</h2>
<h3 id="ConformingSVGExtensions">Extension conformance requirements</h3>
<p>Specifications and implementations are allowed to extend the SVG
specification but in order to claim conformance the following criteria
need to be met:</p>
@@ -752,24 +844,24 @@ need to be met:</p>
<p>SVG allows inclusion of elements from foreign namespaces
anywhere with the SVG content. In general, the SVG user agent
must include any unknown elements in the DOM, but must otherwise
ignore unknown elements. (The notable exception is described under
<a href="http://www.w3.org/TR/SVGTiny12/extend.html#ForeignObjectElement">Embedding foreign object types</a>.)</p>
<p>Extension elements in the SVG namespace must not be used.</p>
-<p>Additionally, SVG allows inclusion of attributes from
-foreign namespaces on any
-<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermSVGElement"><span class="svg-term">SVG element</span></a>.
-Extensions of SVG-namespaced elements in the form of attributes must be bound to
-a namespace by a prefix. Any unbound attributes not defined by an SVG
-specification must be treated as unknown attributes. The SVG user
-agent must include unknown attributes in the DOM, but may
-otherwise ignore unknown attributes. Attributes bound to a foreign
+<p>Additionally, SVG allows inclusion of attributes from foreign namespaces
+on any SVG element.
+Extensions of SVG-namespaced elements in the form of attributes must be
+in a namespace other than the SVG namespace. Any attributes which are not
+in a namespace and which are not defined by an SVG specification must be
+treated as unknown attributes. The SVG user agent must include unknown
+attributes in the DOM, but may otherwise ignore unknown attributes.
+Attributes bound to a foreign
namespace may extend the semantics or behavior of SVG elements
in user agents that support that foreign namespace.</p>
<p>SVG's ability to include foreign namespaces can be used for
the following purposes:</p>
<ul>
<li>Application-specific information to allow authoring
@@ -805,25 +897,25 @@ this case) upon reading it back in:</p>
<defs>
<myapp:piechart xmlns:myapp="http://example.org/myapp"
title="Sales by Region">
<myapp:pieslice label="Northern Region" value="1.23"/>
<myapp:pieslice label="Eastern Region" value="2.53"/>
<myapp:pieslice label="Southern Region" value="3.89"/>
<myapp:pieslice label="Western Region" value="2.04"/>
- <!-- Other private data goes here -->
+ <!_- Other private data goes here -_>
</myapp:piechart>
</defs>
<desc>This chart includes private data in another namespace</desc>
- <!-- In here would be the actual SVG graphics elements which
- draw the pie chart -->
+ <!_- In here would be the actual SVG graphics elements which
+ draw the pie chart -_>
</svg></pre>
</div>
</div>
<h2 id="SVGEncoding">SVG Encoding</h2>
<h3 id="XMLEncoding">XML encoding conformance requirements</h3>
@@ -849,16 +941,17 @@ must always render, animate, and interac
original. Note that this requires a high-level of fidelity from the encoding
including, but not limited to, the ability to encode non-conforming content
and content from foreign namespaces without loss, maintaining ID typing,
and not removing non-rendered elements such as
<a>'title'</a>, <a>'desc'</a>, <a>'metadata'</a>,
or elements not included in the <a>rendering tree</a> through use of
<a>conditional processing attributes</a>.</p>
+
<h2 id="svg-tokens">SVG Elements, Attributes, and Properties</h2>
<p>This is a comprehensive list of all SVG elements from the SVG 1.1 [SVG11]
and SVG Tiny 1.2 [SVGT12] specifications. This document will be updated as
new elements are minted.</p>
<h3 id="case-matching">Case Matching</h3>
@@ -1094,16 +1187,18 @@ using <a href="http://www.asahi-net.or.j
document instance. There is no equivalent to the DOCTYPE declaration. Simply
point your editor or other validation tool to the IRI of the schema (or your
local cached copy, as you prefer).</p>
<p>The RNG is under construction, and only the individual RNG snippets are
available at this time. They have not yet been integrated into a functional
schema. The individual RNG files are available <a href="rng">here</a>.</p>
+-->
+
<h2 id="refs">References</h2>
<h3 id="normrefs">Normative References</h3>
<dl>
<dt id="ref-RFC2119"><strong class="normref">[RFC2119]</strong></dt>
<dd><cite><a href="http://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a></cite>,
S. Bradner, March 1997.
@@ -1117,16 +1212,23 @@ schema. The individual RNG files are ava
<br />The <a href="http://www.w3.org/TR/SVG11/">latest edition of SVG 1.1</a> is available at http://www.w3.org/TR/SVG11/.</dd>
<dt id="ref-SVGT12"><strong class="normref">[SVGT12]</strong></dt>
<dd><cite class="w3crec"><a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/">Scalable Vector Graphics (SVG) Tiny 1.2</a></cite>,
O. Andersson, R. Berjon, E. Dahlström, A. Emmons, J. Ferraiolo, A. Grasso, V. Hardy, S. Hayman, D. Jackson, C. Lilley, C. McCormack, A. Neumann, C. Northway, A. Quint, N. Ramani, D. Schepers, A. Shellshear, eds.
World Wide Web Consortium, 22 December 2008.
<br />This edition of SVG Tiny 1.2 is http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/.
<br />The <a href="http://www.w3.org/TR/SVGTiny12/">latest edition of SVG Tiny 1.2</a> is available at http://www.w3.org/TR/SVGTiny12/.</dd>
+
+ <dt id="ref-SVG2"><strong class="normref">[SVG2]</strong></dt>
+ <dd><cite class="w3cwd"><a href="http://www.w3.org/TR/2014/WD-SVG2-20140211/">Scalable Vector Graphics (SVG) 2</a></cite>,
+ N. Anrdronikos, T. Bah, B. Birtles, C. Concolato, E. Dahlström, C. Lilley, C. McCormack, D. Schepers, D. Schulze, R. Schwerdtfeger, S. Takagi, J. Watt, eds.
+ World Wide Web Consortium, 11 February 2014.
+ <br />This edition of SVG 2 is http://www.w3.org/TR/2014/WD-SVG2-20140211/.
+ <br />The <a href="http://www.w3.org/TR/SVG2/">latest edition of SVG 2</a> is available at http://www.w3.org/TR/SVG2/.</dd>
</dl>
<h3 id="informrefs">Informative References</h3>
<dl>
<dt class="w3ccr"><strong class="informref">[CSS2]</strong></dt>
<dd><cite><a href="http://www.w3.org/TR/2010/CR-CSS2-20090908/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a></cite>,
B. Bos, T. Çelik, I. Hickson, H.W. Lie, Editors. World Wide Web Consortium, 23 April 2009, <strong>Work in Progress</strong>.
diff --git a/specs/integration/master/definitions.xml b/specs/integration/master/definitions.xml
--- a/specs/integration/master/definitions.xml
+++ b/specs/integration/master/definitions.xml
@@ -1,18 +1,20 @@
<!-- Definitions for SPECIFICATION. -->
<definitions xmlns='http://mcc.id.au/ns/local' xmlns:x='http://mcc.id.au/ns/local'>
<!-- === defined in this specification ================================== -->
<!-- ... -->
- <term name='referencing mode' href='#TermReferencingMode'/>
- <term name='referencing modes' href='#TermReferencingMode'/>
+ <term name='processing mode' href='#processing-mode'/>
+ <term name='processing modes' href='#processing-mode'/>
+ <term name='referencing mode' href='#referencing-mode'/>
+ <term name='referencing modes' href='#referencing-mode'/>
<!-- === defined in other specifications ================================ -->
<term name='SVG document fragment' href='http://www.w3.org/TR/SVGTiny12/conform.html#ConformingSVGDocuments'/>
<term name='SVG stand-alone document' href='http://www.w3.org/TR/SVGTiny12/conform.html#ConformingSVGStandAloneFiles'/>
<term name='SVG included document fragment' href='http://www.w3.org/TR/SVGTiny12/conform.html#ConformingSVGIncludedDocuments'/>
<term name='rendering tree' href='http://www.w3.org/TR/SVGTiny12/intro.html#TermRenderingTree'/>
diff --git a/specs/integration/master/style/default_no_issues.css b/specs/integration/master/style/default_no_issues.css
--- a/specs/integration/master/style/default_no_issues.css
+++ b/specs/integration/master/style/default_no_issues.css
@@ -1,11 +1,11 @@
/*
* Turns off issues and annotations.
*/
-@import url(default_svg.css);
+@import url(default_no_maturity.css);
p.issue, div.issue, p.annotation, div.annotation {
display:none;
}
diff --git a/specs/integration/master/style/default_no_maturity.css b/specs/integration/master/style/default_no_maturity.css
new file mode 100644
--- /dev/null
+++ b/specs/integration/master/style/default_no_maturity.css
@@ -0,0 +1,23 @@
+@import url(default_svg.css);
+
+body, h1, h2, h3 {
+ background-color: white ! important;
+}
+
+body.ready-for-wg-review,
+h1.ready-for-wg-review,
+h2.ready-for-wg-review,
+h3.ready-for-wg-review,
+.ready-for-wg-review > h1,
+.ready-for-wg-review > h2,
+.ready-for-wg-review > h3,
+.ready-for-wg-review {
+ background-color: white ! important;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+p.annotation, div.annotation { display: none }
+div.annotation.svg2-requirement { display: block }
diff --git a/specs/integration/master/style/default_svg.css b/specs/integration/master/style/default_svg.css
--- a/specs/integration/master/style/default_svg.css
+++ b/specs/integration/master/style/default_svg.css
@@ -79,32 +79,34 @@ div.element-summary {
border-left-width: .5em;
border-left-style: solid;
margin-top: 1em;
}
/*.element-summary { background: #d9e8ff; padding: 1em; margin-top: 1em }*/
.element-summary-name { float: right; font-size: 110% }
+.element-summary-name dfn { font-style: normal; }
.element-summary dl, .element-summary dt { margin-top: 0; margin-bottom: 0; }
.element-summary * + dt { margin-top: 0.5em; }
.element-summary dd { margin-top: 0; }
.element-summary ul.no-bullets { list-style: none; margin-left: 0; padding-left: 0 }
.element-summary ul.no-bullets li { padding-left: 2em; text-indent: -2em; }
.expander { color: #888; text-decoration: underline; cursor: pointer; font-size: 85% }
.expander { }
.expander:active { color: #C00 }
.expander:hover { background: #ffa }
.expander:after { content: 'show »' }
.xgrammar { color: #A52A2A; font-family: monospace; font-size: 90% }
pre.idl, pre.dtd-fragment { color: black; padding: 1em; margin-top: 1em; margin-left: 0; font-size: 1em; overflow: auto; font-size: 14px }
pre.idl { background: #d9e8ff }
pre.idl a:link, pre.idl a:visited { color: black; }
+pre.idl .comment { color: #005A9C; }
dl.interface dt {
margin-top: 1em;
}
dl.interface dt.attribute,
dl.interface dt.constant,
dl.interface dt.operation {
@@ -250,16 +252,78 @@ div[role="math"] > :first-child ~ * {
.bordered { border: 1px solid #888; background-color: white }
dl.attrdef-list dl { margin-top: 1em }
dl.attrdef-list > dt { font-weight: normal }
/* Make issue and example counters work correctly. */
body { counter-reset: exampleno figure issue example; }
+/*
+ * Temporary styles for use only while the spec is in development:
+ */
+
+body, h1, h2, h3 {
+ /* mark everything as not yet reviewed */
+ background-color: #FFEEEE ! important;
+}
+
+body.ready-for-wg-review,
+h1.ready-for-wg-review,
+h2.ready-for-wg-review,
+h3.ready-for-wg-review,
+.ready-for-wg-review > h1,
+.ready-for-wg-review > h2,
+.ready-for-wg-review > h3,
+.ready-for-wg-review {
+ background-color: #FBFBB6 ! important;
+}
+
+body.ready-for-wg-review,
+h1.ready-for-wg-review,
+h2.ready-for-wg-review,
+h3.ready-for-wg-review,
+.ready-for-wg-review > h1,
+.ready-for-wg-review > h2,
+.ready-for-wg-review > h3,
+div.ready-for-wg-review {
+ margin-left: -16px;
+ margin-right: -16px;
+ padding-left: 16px;
+ padding-right: 16px;
+}
+
+.chapter-Overview,
+.chapter-Overview h1,
+.chapter-Overview h2,
+.chapter-Overview h3,
+body.ready-for-wider-review,
+h1.ready-for-wider-review,
+h2.ready-for-wider-review,
+h3.ready-for-wider-review,
+.ready-for-wider-review > h1,
+.ready-for-wider-review > h2,
+.ready-for-wider-review > h3,
+.ready-for-wider-review {
+ background-color: white ! important;
+}
+
+h1.ready-for-wider-review,
+h2.ready-for-wider-review,
+h3.ready-for-wider-review,
+.ready-for-wider-review > h1,
+.ready-for-wider-review > h2,
+.ready-for-wider-review > h3,
+div.ready-for-wider-review {
+ margin-left: -16px;
+ margin-right: -16px;
+ padding-left: 16px;
+ padding-right: 16px;
+}
+
.svg2-requirement table { border-collapse: collapse; width: 100% }
.svg2-requirement table th { font-weight: normal; font-style: italic; padding-right: 1em; white-space: nowrap; width: 1px }
.svg2-requirement tr:first-child td,
.svg2-requirement tr:first-child th { font-weight: bold; font-style: normal; border-top: none }
.svg2-requirement table th, .svg2-requirement table td { text-align: left; vertical-align: baseline; border-top: 1px solid #D398E0; padding: 0.5em }
table.proptable tbody td:first-child { white-space: nowrap }
table.proptable tbody td .property { display: inline; font-weight: normal }
@@ -305,16 +369,25 @@ table.propdef.attrdef th:first-child + t
table.propdef.attrdef td:first-child + td { width: auto }
table.propdef.attrdef th:first-child + th + th,
table.propdef.attrdef td:first-child + td + td { width: 6em }
table.propdef.attrdef th:first-child + th + th + th,
table.propdef.attrdef td:first-child + td + td + td { width: 6em; padding-right: 0 !important }
+ol.algorithm ol {
+ border-left: 1px solid #90b8de;
+ margin-left: 1em;
+}
+ol.algorithm ol.algorithm {
+ border-left: none;
+ margin-left: 0;
+}
+
/* HTML5-like switch statements. */
dl.switch > dd > ol.only {
margin-left: 0;
}
dl.switch > dd > ol.algorithm {
margin-left: -2em;
}
dl.switch {
@@ -330,8 +403,56 @@ dl.switch > dt + dt {
dl.switch > dt:before {
content: '\21AA';
padding: 0 0.5em 0 0;
display: inline-block;
width: 1em;
text-align: right;
line-height: 0.5em;
}
+
+table.vert {
+ border-collapse: collapse;
+ border-top: 2px solid #005a9c;
+ border-bottom: 2px solid #005a9c;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ margin-left: auto;
+ margin-right: auto;
+}
+table.vert td {
+ background: #f0f6ff;
+}
+table.vert th {
+ text-align: left;
+ vertical-align: bottom;
+ border-bottom: 2px solid #005a9c;
+ white-space: nowrap;
+ color: #d9e8ff;
+ background: #005a9c;
+}
+table.vert.compact { font-size: 90% }
+table.vert.compact td, table.vert.compact th { padding: 2px 8px }
+table.vert th a:link,
+table.vert th a:visited { color: #d9e8ff; }
+table.vert th a:hover { color: black; }
+table.vert th, table.vert td { padding: 0.5em 0.75em; }
+table.vert th .attr-name { color: white }
+table.vert th a:hover .element-name { color: #2A2AA5 }
+table.vert th .prop-name { color: white }
+table.vert th a:hover .element-name { color: black }
+table.vert th .element-name { color: white }
+table.vert th a:hover .element-name { color: #A52A2A }
+table.vert td { vertical-align: top; border-top: 1px solid #005a9c; border-top-color: rgb(127, 172, 206) }
+table.offset { margin-left: 2em; margin-right: 2em; }
+table.graph > tbody > tr > td { vertical-align: top }
+table.graph > tbody > tr > td { padding-right: 1em }
+.indented {
+ margin-left: 2em;
+}
+.math var, .math sub, .math sup {
+ font-family: serif;
+}
+.separated {
+ word-spacing: 1em;
+}
+
+.definitions > dt > dfn { font-style: normal; }
Received on Thursday, 10 April 2014 15:23:42 UTC