[e] (0) Adjust examples in <iframe> section to increase diversity

git-svn-id: http://svn.whatwg.org/webapps@8636 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · May 15, 2014 · e5a041e · e5a041e
1 parent b505cfc
commit e5a041e
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 52 deletions.
diff --git a/complete.html b/complete.html
@@ -23186,13 +23186,21 @@ <h4 id=the-iframe-element><span class=secno>4.7.2 </span>The <dfn><code>iframe</
   <div class=example>
 
    <p id=inclusion>An HTML inclusion is effected using this attribute as in the following example.
-   In this case, the inclusion is of a site-wide navigation bar.</p>
+   In this case, the inclusion is of a site-wide navigation bar. Any links in the
+   <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be automatically opened in the
+   <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for legacy user agents, the site could also
+   include a <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code>
+   attribute with the value <code title="">_parent</code>. Similarly, in new user agents the styles
+   of the parent page will be automatically applied to the contents of the frame, but to support
+   legacy user agents authors might wish to include the styles explicitly.</p>
 
    <pre>&lt;!DOCTYPE HTML&gt;
 &lt;title&gt;Mirror Mirror &mdash; MovieInfo&trade;&lt;/title&gt;
 &lt;header&gt;
- &lt;h1&gt;Mirror Mirror&lt;/h1&gt;
- &lt;p&gt;Part of the MovieInfo&trade; Database&lt;/p&gt;
+ &lt;hgroup&gt;
+  &lt;h1&gt;Mirror Mirror&lt;/h1&gt;
+  &lt;h2&gt;Part of the MovieInfo&trade; Database&lt;/h2&gt;
+ &lt;/hgroup&gt;
  &lt;nav&gt;
   <strong>&lt;iframe seamless src="nav.inc"&gt;&lt;/iframe&gt;</strong>
  &lt;/nav&gt;
@@ -23316,20 +23324,6 @@ <h4 id=the-iframe-element><span class=secno>4.7.2 </span>The <dfn><code>iframe</
   <p class=note>The attribute can be set or removed dynamically, with the rendering updating in
   tandem.</p>
 
-  <div class=example>
-
-   <p>In this example, the site's navigation is embedded using a client-side include using an
-   <code><a href=#the-iframe-element>iframe</a></code>. Any links in the <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be
-   automatically opened in the <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for legacy user
-   agents, the site could also include a <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute with the value <code title="">_parent</code>.
-   Similarly, in new user agents the styles of the parent page will be automatically applied to the
-   contents of the frame, but to support legacy user agents authors might wish to include the styles
-   explicitly.</p>
-
-   <pre>&lt;nav&gt;&lt;iframe seamless src="nav.include.html"&gt;&lt;/iframe&gt;&lt;/nav&gt;</pre>
-
-  </div>
-
   <p class=note>The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute does not
   propagate into <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> <code><a href=#the-iframe-element>iframe</a></code>s.</p>
 
@@ -23339,6 +23333,24 @@ <h4 id=the-iframe-element><span class=secno>4.7.2 </span>The <dfn><code>iframe</
   the <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#browsing-context>browsing context</a> are to be allowed to use <code title=dom-element-requestFullscreen><a href=#dom-element-requestfullscreen>requestFullscreen()</a></code> (if it's not blocked for other
   reasons, e.g. there is another ancestor <code><a href=#the-iframe-element>iframe</a></code> without this attribute set).</p>
 
+  <div class=example>
+
+   <p>Here, an <code><a href=#the-iframe-element>iframe</a></code> is used to embed a player from a video site. The <code title=attr-iframe-allowfullscreen><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> attribute is needed to enable the
+   player to show its video full-screen.</p>
+
+   <pre>&lt;article&gt;
+ &lt;header&gt;
+  &lt;p&gt;&lt;img src="/usericons/1627591962735"&gt; &lt;b&gt;Fred Flintstone&lt;/b&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a href="/posts/3095182851" rel=bookmark&gt;12:44&lt;/a&gt; &mdash; &lt;a href="#acl-3095182851"&gt;Private Post&lt;/a&gt;&lt;/p&gt;
+ &lt;/header&gt;
+ &lt;main&gt;
+  &lt;p&gt;Check out my new ride!&lt;/p&gt;
+  <strong>&lt;iframe src="https://video.example.com/embed?id=92469812" allowfullscreen&gt;&lt;/iframe&gt;</strong>
+ &lt;/main&gt;
+&lt;/article&gt;</pre>
+
+  </div>
+
 
   <hr><!-- DIM ATTRIBUTES --><p>The <code><a href=#the-iframe-element>iframe</a></code> element supports <a href=#dimension-attributes>dimension attributes</a> for cases where the
   embedded content has specific dimensions (e.g. ad units have well-defined dimensions).</p>

diff --git a/index b/index
@@ -23186,13 +23186,21 @@ href="?audio"&gt;audio&lt;/a&gt; test instead.)&lt;/p&gt;</pre>
   <div class=example>
 
    <p id=inclusion>An HTML inclusion is effected using this attribute as in the following example.
-   In this case, the inclusion is of a site-wide navigation bar.</p>
+   In this case, the inclusion is of a site-wide navigation bar. Any links in the
+   <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be automatically opened in the
+   <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for legacy user agents, the site could also
+   include a <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code>
+   attribute with the value <code title="">_parent</code>. Similarly, in new user agents the styles
+   of the parent page will be automatically applied to the contents of the frame, but to support
+   legacy user agents authors might wish to include the styles explicitly.</p>
 
    <pre>&lt;!DOCTYPE HTML&gt;
 &lt;title&gt;Mirror Mirror &mdash; MovieInfo&trade;&lt;/title&gt;
 &lt;header&gt;
- &lt;h1&gt;Mirror Mirror&lt;/h1&gt;
- &lt;p&gt;Part of the MovieInfo&trade; Database&lt;/p&gt;
+ &lt;hgroup&gt;
+  &lt;h1&gt;Mirror Mirror&lt;/h1&gt;
+  &lt;h2&gt;Part of the MovieInfo&trade; Database&lt;/h2&gt;
+ &lt;/hgroup&gt;
  &lt;nav&gt;
   <strong>&lt;iframe seamless src="nav.inc"&gt;&lt;/iframe&gt;</strong>
  &lt;/nav&gt;
@@ -23316,20 +23324,6 @@ href="?audio"&gt;audio&lt;/a&gt; test instead.)&lt;/p&gt;</pre>
   <p class=note>The attribute can be set or removed dynamically, with the rendering updating in
   tandem.</p>
 
-  <div class=example>
-
-   <p>In this example, the site's navigation is embedded using a client-side include using an
-   <code><a href=#the-iframe-element>iframe</a></code>. Any links in the <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be
-   automatically opened in the <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for legacy user
-   agents, the site could also include a <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute with the value <code title="">_parent</code>.
-   Similarly, in new user agents the styles of the parent page will be automatically applied to the
-   contents of the frame, but to support legacy user agents authors might wish to include the styles
-   explicitly.</p>
-
-   <pre>&lt;nav&gt;&lt;iframe seamless src="nav.include.html"&gt;&lt;/iframe&gt;&lt;/nav&gt;</pre>
-
-  </div>
-
   <p class=note>The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute does not
   propagate into <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> <code><a href=#the-iframe-element>iframe</a></code>s.</p>
 
@@ -23339,6 +23333,24 @@ href="?audio"&gt;audio&lt;/a&gt; test instead.)&lt;/p&gt;</pre>
   the <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#browsing-context>browsing context</a> are to be allowed to use <code title=dom-element-requestFullscreen><a href=#dom-element-requestfullscreen>requestFullscreen()</a></code> (if it's not blocked for other
   reasons, e.g. there is another ancestor <code><a href=#the-iframe-element>iframe</a></code> without this attribute set).</p>
 
+  <div class=example>
+
+   <p>Here, an <code><a href=#the-iframe-element>iframe</a></code> is used to embed a player from a video site. The <code title=attr-iframe-allowfullscreen><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> attribute is needed to enable the
+   player to show its video full-screen.</p>
+
+   <pre>&lt;article&gt;
+ &lt;header&gt;
+  &lt;p&gt;&lt;img src="/usericons/1627591962735"&gt; &lt;b&gt;Fred Flintstone&lt;/b&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a href="/posts/3095182851" rel=bookmark&gt;12:44&lt;/a&gt; &mdash; &lt;a href="#acl-3095182851"&gt;Private Post&lt;/a&gt;&lt;/p&gt;
+ &lt;/header&gt;
+ &lt;main&gt;
+  &lt;p&gt;Check out my new ride!&lt;/p&gt;
+  <strong>&lt;iframe src="https://video.example.com/embed?id=92469812" allowfullscreen&gt;&lt;/iframe&gt;</strong>
+ &lt;/main&gt;
+&lt;/article&gt;</pre>
+
+  </div>
+
 
   <hr><!-- DIM ATTRIBUTES --><p>The <code><a href=#the-iframe-element>iframe</a></code> element supports <a href=#dimension-attributes>dimension attributes</a> for cases where the
   embedded content has specific dimensions (e.g. ad units have well-defined dimensions).</p>

diff --git a/source b/source
@@ -23225,13 +23225,21 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
   <div class="example">
 
    <p id="inclusion">An HTML inclusion is effected using this attribute as in the following example.
-   In this case, the inclusion is of a site-wide navigation bar.</p>
+   In this case, the inclusion is of a site-wide navigation bar. Any links in the
+   <code>iframe</code> will, in new user agents, be automatically opened in the
+   <code>iframe</code>'s parent browsing context; for legacy user agents, the site could also
+   include a <code>base</code> element with a <code data-x="attr-base-target">target</code>
+   attribute with the value <code data-x="">_parent</code>. Similarly, in new user agents the styles
+   of the parent page will be automatically applied to the contents of the frame, but to support
+   legacy user agents authors might wish to include the styles explicitly.</p>
 
    <pre>&lt;!DOCTYPE HTML>
 &lt;title>Mirror Mirror &mdash; MovieInfo&trade;&lt;/title>
 &lt;header>
- &lt;h1>Mirror Mirror&lt;/h1>
- &lt;p>Part of the MovieInfo&trade; Database&lt;/p>
+ &lt;hgroup>
+  &lt;h1>Mirror Mirror&lt;/h1>
+  &lt;h2>Part of the MovieInfo&trade; Database&lt;/h2>
+ &lt;/hgroup>
  &lt;nav>
   <strong>&lt;iframe seamless src="nav.inc">&lt;/iframe></strong>
  &lt;/nav>
@@ -23368,21 +23376,6 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
   <p class="note">The attribute can be set or removed dynamically, with the rendering updating in
   tandem.</p>
 
-  <div class="example">
-
-   <p>In this example, the site's navigation is embedded using a client-side include using an
-   <code>iframe</code>. Any links in the <code>iframe</code> will, in new user agents, be
-   automatically opened in the <code>iframe</code>'s parent browsing context; for legacy user
-   agents, the site could also include a <code>base</code> element with a <code
-   data-x="attr-base-target">target</code> attribute with the value <code data-x="">_parent</code>.
-   Similarly, in new user agents the styles of the parent page will be automatically applied to the
-   contents of the frame, but to support legacy user agents authors might wish to include the styles
-   explicitly.</p>
-
-   <pre>&lt;nav>&lt;iframe seamless src="nav.include.html">&lt;/iframe>&lt;/nav></pre>
-
-  </div>
-
   <p class="note">The <code data-x="attr-contenteditable">contenteditable</code> attribute does not
   propagate into <code data-x="attr-iframe-seamless">seamless</code> <code>iframe</code>s.</p>
 
@@ -23395,6 +23388,25 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
   data-x="dom-element-requestFullscreen">requestFullscreen()</code> (if it's not blocked for other
   reasons, e.g. there is another ancestor <code>iframe</code> without this attribute set).</p>
 
+  <div class="example">
+
+   <p>Here, an <code>iframe</code> is used to embed a player from a video site. The <code
+   data-x="attr-iframe-allowfullscreen">allowfullscreen</code> attribute is needed to enable the
+   player to show its video full-screen.</p>
+
+   <pre>&lt;article>
+ &lt;header>
+  &lt;p>&lt;img src="/usericons/1627591962735"> &lt;b>Fred Flintstone&lt;/b>&lt;/p>
+  &lt;p>&lt;a href="/posts/3095182851" rel=bookmark>12:44&lt;/a> &mdash; &lt;a href="#acl-3095182851">Private Post&lt;/a>&lt;/p>
+ &lt;/header>
+ &lt;main>
+  &lt;p>Check out my new ride!&lt;/p>
+  <strong>&lt;iframe src="https://video.example.com/embed?id=92469812" allowfullscreen>&lt;/iframe></strong>
+ &lt;/main>
+&lt;/article></pre>
+
+  </div>
+
 
   <hr> <!-- DIM ATTRIBUTES -->