[html5] r8750 - [giow] (0) Make the default styling for modal dialogs not overflow the device on [...]
whatwg at whatwg.org
whatwg at whatwg.org
Fri Sep 5 13:47:50 PDT 2014
Author: ianh
Date: 2014-09-05 13:47:46 -0700 (Fri, 05 Sep 2014)
New Revision: 8750
Modified:
complete.html
index
source
Log:
[giow] (0) Make the default styling for modal dialogs not overflow the device on small screens
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=24991
Affected topics: Rendering
Modified: complete.html
===================================================================
--- complete.html 2014-09-04 23:01:59 UTC (rev 8749)
+++ complete.html 2014-09-05 20:47:46 UTC (rev 8750)
@@ -291,7 +291,7 @@
</style><link rel=stylesheet href=status.css><body onload=init()>
<header id=head class="head with-buttons">
<p><a href=//www.whatwg.org/ class=logo><img src=/images/logo width=101 alt=WHATWG height=101></a></p>
- <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>4 September 2014</span></h2></hgroup>
+ <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>5 September 2014</span></h2></hgroup>
<nav>
<div>
@@ -17941,7 +17941,7 @@
optionally with the <i>restart animations</i> flag set,
it must run the following steps:</p>
- <ol><li><p>If the element's <code id=the-img-element:document-5><a href=#document>Document</a></code> is not the <a href=#active-document id=the-img-element:active-document>active document</a>,
+ <ol><li><p>If the element's <a id=the-img-element:node-document href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not the <a href=#active-document id=the-img-element:active-document>active document</a>,
abort these steps.<li><p>If the user agent cannot support images, or its support for images has been disabled, then
<a href=#abort-the-image-request id=the-img-element:abort-the-image-request>abort the image request</a> for the <a href=#current-request id=the-img-element:current-request-3>current request</a> and the <a href=#pending-request id=the-img-element:pending-request-2>pending request</a>,
set <a href=#current-request id=the-img-element:current-request-4>current request</a> to the <a href=#img-none id=the-img-element:img-none-4>unavailable</a> state,
@@ -17964,7 +17964,7 @@
abort these inner set of steps.<li><p>Let <var>key</var> be a tuple consisting of the resulting <a href=#absolute-url id=the-img-element:absolute-url-2>absolute
URL</a>, the <code id=the-img-element:the-img-element-20><a href=#the-img-element>img</a></code> element's <code id=the-img-element:attr-img-crossorigin-3><a href=#attr-img-crossorigin>crossorigin</a></code>
attribute's mode, and, if that mode is not <a href=#attr-crossorigin-none id=the-img-element:attr-crossorigin-none-2>No CORS</a>,
- the <code id=the-img-element:document-6><a href=#document>Document</a></code> object's <a href=#origin-2 id=the-img-element:origin-2-2>origin</a>.<li><p>If the <a href=#list-of-available-images id=the-img-element:list-of-available-images-6>list of available images</a> contains an entry for <var>key</var>, then
+ the <a id=the-img-element:node-document-2 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=#origin-2 id=the-img-element:origin-2-2>origin</a>.<li><p>If the <a href=#list-of-available-images id=the-img-element:list-of-available-images-6>list of available images</a> contains an entry for <var>key</var>, then
set the <a href=#ignore-higher-layer-caching id=the-img-element:ignore-higher-layer-caching-3>ignore higher-layer caching</a> flag for that entry,
<a href=#abort-the-image-request id=the-img-element:abort-the-image-request-2>abort the image request</a> for the <a href=#current-request id=the-img-element:current-request-5>current request</a> and the <a href=#pending-request id=the-img-element:pending-request-4>pending request</a>,
let <a href=#pending-request id=the-img-element:pending-request-5>pending request</a> be null,
@@ -18046,7 +18046,7 @@
with the <i>mode</i> being the current state of
the element's <code id=the-img-element:attr-img-crossorigin-5><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
the <i>origin</i> being the <a href=#origin-2 id=the-img-element:origin-2-3>origin</a> of the <code id=the-img-element:the-img-element-27><a href=#the-img-element>img</a></code> element's
- <code id=the-img-element:document-7><a href=#document>Document</a></code>, and the <i>default origin behaviour</i> set to <i>taint</i>.
+ <a id=the-img-element:node-document-3 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, and the <i>default origin behaviour</i> set to <i>taint</i>.
Let this instance of the <a href=#fetch id=the-img-element:fetch-2>fetching</a> algorithm be associated with <var>image request</var>.</p>
<p>If the element has a <code id=the-img-element:attr-img-srcset-8><a href=#attr-img-srcset>srcset</a></code> attribute
@@ -18062,7 +18062,7 @@
the <a href=#origin-2 id=the-img-element:origin-2-4>origin</a> of the image itself (e.g. when used on a <code id=the-img-element:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code>).</p>
- <p>Fetching the image must <a href=#delay-the-load-event id=the-img-element:delay-the-load-event>delay the load event</a> of the element's document until the
+ <p>Fetching the image must <a href=#delay-the-load-event id=the-img-element:delay-the-load-event>delay the load event</a> of the element's <a id=the-img-element:node-document-4 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> until the
<a href=#concept-task id=the-img-element:concept-task-2>task</a> that is <a href=#queue-a-task id=the-img-element:queue-a-task-6>queued</a> by the
<a href=#networking-task-source id=the-img-element:networking-task-source>networking task source</a> once the resource has been <a href=#fetch id=the-img-element:fetch-3>fetched</a> (<a href=#img-load>defined below</a>) has been run.
</p>
@@ -18221,8 +18221,8 @@
and otherwise <a href=#fire-a-simple-event id=the-img-element:fire-a-simple-event-12>fire a simple event</a> named <var>type</var> at <var>e</var>.</p>
<p>While a user agent is running the above algorithm for an element <var>x</var>, there
- must be a strong reference from the element's <code id=the-img-element:document-8><a href=#document>Document</a></code> to the element <var>x</var>, even if that element is not <a href=#in-a-document id=the-img-element:in-a-document>in</a> its
- <code id=the-img-element:document-9><a href=#document>Document</a></code>.</p>
+ must be a strong reference from the element's <a id=the-img-element:node-document-5 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> to the element <var>x</var>,
+ even if that element is not <a href=#in-a-document id=the-img-element:in-a-document>in its <code>Document</code></a>.</p>
<p>When an <code id=the-img-element:the-img-element-44><a href=#the-img-element>img</a></code> element is in the <a href=#img-all id=the-img-element:img-all-5>completely available</a>
state <em>and</em> the user agent can decode the media data without errors, then the
@@ -18259,7 +18259,7 @@
<p>A <dfn id=source-size-2>source size</dfn> is a <a href=#source-size-value id=the-img-element:source-size-value-6><source-size-value></a>.
When a <a href=#source-size-2 id=the-img-element:source-size-2-2>source size</a> has a unit relative to the viewport,
- it must be interpreted relative to the <code id=the-img-element:the-img-element-48><a href=#the-img-element>img</a></code> element's document's viewport.
+ it must be interpreted relative to the <code id=the-img-element:the-img-element-48><a href=#the-img-element>img</a></code> element's <a id=the-img-element:node-document-6 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s viewport.
Other units must be interpreted the same as in Media Queries. <a href=#refsMQ>[MQ]</a></p>
<p>When asked to <dfn id=select-an-image-source>select an image source</dfn> for a given <code id=the-img-element:the-img-element-49><a href=#the-img-element>img</a></code> element <var>el</var>,
@@ -18532,7 +18532,7 @@
<p>Do a <a href=#potentially-cors-enabled-fetch id=the-img-element:potentially-cors-enabled-fetch-2>potentially CORS-enabled fetch</a> of the resulting <a href=#absolute-url id=the-img-element:absolute-url-3>absolute
URL</a>, with the <i>mode</i> being <var>CORS mode</var>, the <i>origin</i>
- being the <a href=#origin-2 id=the-img-element:origin-2-6>origin</a> of the <code id=the-img-element:the-img-element-57><a href=#the-img-element>img</a></code> element's <code id=the-img-element:document-10><a href=#document>Document</a></code>, and the
+ being the <a href=#origin-2 id=the-img-element:origin-2-6>origin</a> of the <code id=the-img-element:the-img-element-57><a href=#the-img-element>img</a></code> element's <a id=the-img-element:node-document-7 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, and the
<i>default origin behaviour</i> set to <i>taint</i>.</p>
<p>If this download fails in any way (other than the response code not being a 2xx code, as
@@ -18765,7 +18765,8 @@
When invoked as a constructor, this must return a new <code id=the-img-element:htmlimageelement-2><a href=#htmlimageelement>HTMLImageElement</a></code> object (a new
<code id=the-img-element:the-img-element-72><a href=#the-img-element>img</a></code> element). If the <var>width</var> argument is present, the new object's
<code id=the-img-element:attr-dim-width-3><a href=#attr-dim-width>width</a></code> content attribute must be set to <var>width</var>. If the <var>height</var> argument is also present, the new object's
- <code id=the-img-element:attr-dim-height-3><a href=#attr-dim-height>height</a></code> content attribute must be set to <var>height</var>. The element's document must be the <a href=#active-document id=the-img-element:active-document-2>active document</a> of the
+ <code id=the-img-element:attr-dim-height-3><a href=#attr-dim-height>height</a></code> content attribute must be set to <var>height</var>.
+ The element's <a id=the-img-element:node-document-8 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> must be the <a href=#active-document id=the-img-element:active-document-2>active document</a> of the
<a href=#browsing-context id=the-img-element:browsing-context-3>browsing context</a> of the <code id=the-img-element:window><a href=#window>Window</a></code> object on which the interface object of
the invoked constructor is found.</p>
@@ -77326,8 +77327,18 @@
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.1);
-}</pre>
+}
+/* for small devices, modal dialogs go full-screen */
+ at media screen and (max-width: 540px) {
+ dialog:modal {
+ top: 0;
+ width: auto;
+ margin: 1em;
+ }
+}
+</pre>
+
<p>The following rules are also expected to apply, as <a href=#presentational-hints id=flow-content-3:presentational-hints>presentational hints</a>:</p>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
Modified: index
===================================================================
--- index 2014-09-04 23:01:59 UTC (rev 8749)
+++ index 2014-09-05 20:47:46 UTC (rev 8750)
@@ -291,7 +291,7 @@
</style><link rel=stylesheet href=status.css><body onload=init()>
<header id=head class="head with-buttons">
<p><a href=//www.whatwg.org/ class=logo><img src=/images/logo width=101 alt=WHATWG height=101></a></p>
- <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>4 September 2014</span></h2></hgroup>
+ <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>5 September 2014</span></h2></hgroup>
<nav>
<div>
@@ -17941,7 +17941,7 @@
optionally with the <i>restart animations</i> flag set,
it must run the following steps:</p>
- <ol><li><p>If the element's <code id=the-img-element:document-5><a href=#document>Document</a></code> is not the <a href=#active-document id=the-img-element:active-document>active document</a>,
+ <ol><li><p>If the element's <a id=the-img-element:node-document href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not the <a href=#active-document id=the-img-element:active-document>active document</a>,
abort these steps.<li><p>If the user agent cannot support images, or its support for images has been disabled, then
<a href=#abort-the-image-request id=the-img-element:abort-the-image-request>abort the image request</a> for the <a href=#current-request id=the-img-element:current-request-3>current request</a> and the <a href=#pending-request id=the-img-element:pending-request-2>pending request</a>,
set <a href=#current-request id=the-img-element:current-request-4>current request</a> to the <a href=#img-none id=the-img-element:img-none-4>unavailable</a> state,
@@ -17964,7 +17964,7 @@
abort these inner set of steps.<li><p>Let <var>key</var> be a tuple consisting of the resulting <a href=#absolute-url id=the-img-element:absolute-url-2>absolute
URL</a>, the <code id=the-img-element:the-img-element-20><a href=#the-img-element>img</a></code> element's <code id=the-img-element:attr-img-crossorigin-3><a href=#attr-img-crossorigin>crossorigin</a></code>
attribute's mode, and, if that mode is not <a href=#attr-crossorigin-none id=the-img-element:attr-crossorigin-none-2>No CORS</a>,
- the <code id=the-img-element:document-6><a href=#document>Document</a></code> object's <a href=#origin-2 id=the-img-element:origin-2-2>origin</a>.<li><p>If the <a href=#list-of-available-images id=the-img-element:list-of-available-images-6>list of available images</a> contains an entry for <var>key</var>, then
+ the <a id=the-img-element:node-document-2 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=#origin-2 id=the-img-element:origin-2-2>origin</a>.<li><p>If the <a href=#list-of-available-images id=the-img-element:list-of-available-images-6>list of available images</a> contains an entry for <var>key</var>, then
set the <a href=#ignore-higher-layer-caching id=the-img-element:ignore-higher-layer-caching-3>ignore higher-layer caching</a> flag for that entry,
<a href=#abort-the-image-request id=the-img-element:abort-the-image-request-2>abort the image request</a> for the <a href=#current-request id=the-img-element:current-request-5>current request</a> and the <a href=#pending-request id=the-img-element:pending-request-4>pending request</a>,
let <a href=#pending-request id=the-img-element:pending-request-5>pending request</a> be null,
@@ -18046,7 +18046,7 @@
with the <i>mode</i> being the current state of
the element's <code id=the-img-element:attr-img-crossorigin-5><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
the <i>origin</i> being the <a href=#origin-2 id=the-img-element:origin-2-3>origin</a> of the <code id=the-img-element:the-img-element-27><a href=#the-img-element>img</a></code> element's
- <code id=the-img-element:document-7><a href=#document>Document</a></code>, and the <i>default origin behaviour</i> set to <i>taint</i>.
+ <a id=the-img-element:node-document-3 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, and the <i>default origin behaviour</i> set to <i>taint</i>.
Let this instance of the <a href=#fetch id=the-img-element:fetch-2>fetching</a> algorithm be associated with <var>image request</var>.</p>
<p>If the element has a <code id=the-img-element:attr-img-srcset-8><a href=#attr-img-srcset>srcset</a></code> attribute
@@ -18062,7 +18062,7 @@
the <a href=#origin-2 id=the-img-element:origin-2-4>origin</a> of the image itself (e.g. when used on a <code id=the-img-element:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code>).</p>
- <p>Fetching the image must <a href=#delay-the-load-event id=the-img-element:delay-the-load-event>delay the load event</a> of the element's document until the
+ <p>Fetching the image must <a href=#delay-the-load-event id=the-img-element:delay-the-load-event>delay the load event</a> of the element's <a id=the-img-element:node-document-4 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> until the
<a href=#concept-task id=the-img-element:concept-task-2>task</a> that is <a href=#queue-a-task id=the-img-element:queue-a-task-6>queued</a> by the
<a href=#networking-task-source id=the-img-element:networking-task-source>networking task source</a> once the resource has been <a href=#fetch id=the-img-element:fetch-3>fetched</a> (<a href=#img-load>defined below</a>) has been run.
</p>
@@ -18221,8 +18221,8 @@
and otherwise <a href=#fire-a-simple-event id=the-img-element:fire-a-simple-event-12>fire a simple event</a> named <var>type</var> at <var>e</var>.</p>
<p>While a user agent is running the above algorithm for an element <var>x</var>, there
- must be a strong reference from the element's <code id=the-img-element:document-8><a href=#document>Document</a></code> to the element <var>x</var>, even if that element is not <a href=#in-a-document id=the-img-element:in-a-document>in</a> its
- <code id=the-img-element:document-9><a href=#document>Document</a></code>.</p>
+ must be a strong reference from the element's <a id=the-img-element:node-document-5 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> to the element <var>x</var>,
+ even if that element is not <a href=#in-a-document id=the-img-element:in-a-document>in its <code>Document</code></a>.</p>
<p>When an <code id=the-img-element:the-img-element-44><a href=#the-img-element>img</a></code> element is in the <a href=#img-all id=the-img-element:img-all-5>completely available</a>
state <em>and</em> the user agent can decode the media data without errors, then the
@@ -18259,7 +18259,7 @@
<p>A <dfn id=source-size-2>source size</dfn> is a <a href=#source-size-value id=the-img-element:source-size-value-6><source-size-value></a>.
When a <a href=#source-size-2 id=the-img-element:source-size-2-2>source size</a> has a unit relative to the viewport,
- it must be interpreted relative to the <code id=the-img-element:the-img-element-48><a href=#the-img-element>img</a></code> element's document's viewport.
+ it must be interpreted relative to the <code id=the-img-element:the-img-element-48><a href=#the-img-element>img</a></code> element's <a id=the-img-element:node-document-6 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s viewport.
Other units must be interpreted the same as in Media Queries. <a href=#refsMQ>[MQ]</a></p>
<p>When asked to <dfn id=select-an-image-source>select an image source</dfn> for a given <code id=the-img-element:the-img-element-49><a href=#the-img-element>img</a></code> element <var>el</var>,
@@ -18532,7 +18532,7 @@
<p>Do a <a href=#potentially-cors-enabled-fetch id=the-img-element:potentially-cors-enabled-fetch-2>potentially CORS-enabled fetch</a> of the resulting <a href=#absolute-url id=the-img-element:absolute-url-3>absolute
URL</a>, with the <i>mode</i> being <var>CORS mode</var>, the <i>origin</i>
- being the <a href=#origin-2 id=the-img-element:origin-2-6>origin</a> of the <code id=the-img-element:the-img-element-57><a href=#the-img-element>img</a></code> element's <code id=the-img-element:document-10><a href=#document>Document</a></code>, and the
+ being the <a href=#origin-2 id=the-img-element:origin-2-6>origin</a> of the <code id=the-img-element:the-img-element-57><a href=#the-img-element>img</a></code> element's <a id=the-img-element:node-document-7 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, and the
<i>default origin behaviour</i> set to <i>taint</i>.</p>
<p>If this download fails in any way (other than the response code not being a 2xx code, as
@@ -18765,7 +18765,8 @@
When invoked as a constructor, this must return a new <code id=the-img-element:htmlimageelement-2><a href=#htmlimageelement>HTMLImageElement</a></code> object (a new
<code id=the-img-element:the-img-element-72><a href=#the-img-element>img</a></code> element). If the <var>width</var> argument is present, the new object's
<code id=the-img-element:attr-dim-width-3><a href=#attr-dim-width>width</a></code> content attribute must be set to <var>width</var>. If the <var>height</var> argument is also present, the new object's
- <code id=the-img-element:attr-dim-height-3><a href=#attr-dim-height>height</a></code> content attribute must be set to <var>height</var>. The element's document must be the <a href=#active-document id=the-img-element:active-document-2>active document</a> of the
+ <code id=the-img-element:attr-dim-height-3><a href=#attr-dim-height>height</a></code> content attribute must be set to <var>height</var>.
+ The element's <a id=the-img-element:node-document-8 href=http://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> must be the <a href=#active-document id=the-img-element:active-document-2>active document</a> of the
<a href=#browsing-context id=the-img-element:browsing-context-3>browsing context</a> of the <code id=the-img-element:window><a href=#window>Window</a></code> object on which the interface object of
the invoked constructor is found.</p>
@@ -77326,8 +77327,18 @@
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.1);
-}</pre>
+}
+/* for small devices, modal dialogs go full-screen */
+ at media screen and (max-width: 540px) {
+ dialog:modal {
+ top: 0;
+ width: auto;
+ margin: 1em;
+ }
+}
+</pre>
+
<p>The following rules are also expected to apply, as <a href=#presentational-hints id=flow-content-3:presentational-hints>presentational hints</a>:</p>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
Modified: source
===================================================================
--- source 2014-09-04 23:01:59 UTC (rev 8749)
+++ source 2014-09-05 20:47:46 UTC (rev 8750)
@@ -105738,8 +105738,18 @@
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.1);
-}</pre>
+}
+/* for small devices, modal dialogs go full-screen */
+ at media screen and (max-width: 540px) {
+ dialog:modal {
+ top: 0;
+ width: auto;
+ margin: 1em;
+ }
+}
+</pre>
+
<p>The following rules are also expected to apply, as <span>presentational hints</span>:</p>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
More information about the Commit-Watchers
mailing list