[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