[html5] r8065 - [giow] (0) Update ImageBitmap to use Promises. Affected topics: Canvas, DOM APIs
whatwg at whatwg.org
whatwg at whatwg.org
Wed Jul 17 14:03:09 PDT 2013
Author: ianh
Date: 2013-07-17 14:03:08 -0700 (Wed, 17 Jul 2013)
New Revision: 8065
Modified:
complete.html
index
source
Log:
[giow] (0) Update ImageBitmap to use Promises.
Affected topics: Canvas, DOM APIs
Modified: complete.html
===================================================================
--- complete.html 2013-07-16 22:58:40 UTC (rev 8064)
+++ complete.html 2013-07-17 21:03:08 UTC (rev 8065)
@@ -256,7 +256,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 16 July 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 17 July 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -3580,7 +3580,7 @@
specification is defined in terms of the DOM, and some of the features are defined as extensions
to the DOM interfaces. <a href=#refsDOM>[DOM]</a> <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
- <p>In particular, the following features are defined in the DOM specification: <a href=#refsDOM>[DOM]</a></p>
+ <p>In particular, the following features are defined in the DOM specification: <a href=#refsDOM>[DOM]</a></p> <!-- aka DOM Core or DOMCORE -->
<ul class=brief><li><dfn id=attr><code>Attr</code></dfn> interface</li>
<li><dfn id=comment-0><code>Comment</code></dfn> interface</li>
@@ -3645,6 +3645,10 @@
<li>The <dfn id=mutationobserver-scripting-environment><code>MutationObserver</code> <var title="">scripting environment</var></dfn> concept</li>
<li>The <dfn id=concept-mo-invoke title=concept-mo-invoke>invoke <code>MutationObserver</code> objects</dfn> algorithm</li>
+ <li><dfn id=promise>Promise</dfn> interface</li>
+ <li>The <dfn id=concept-resolver title=concept-resolver>resolver</dfn> concept</li>
+ <li>The <dfn id=concept-resolver-fulfill title=concept-resolver-fulfill>fulfill</dfn> and <dfn id=concept-resolver-reject title=concept-resolver-reject>reject</dfn> algorithms</li>
+
</ul><p>The term <dfn id=throw>throw</dfn> in this specification is used as defined in the DOM specification.
The following <code><a href=#domexception>DOMException</a></code> types are defined in the DOM specification: <a href=#refsDOM>[DOM]</a></p>
@@ -75283,7 +75287,7 @@
[NoInterfaceObject]
interface <dfn id=imagebitmapfactories>ImageBitmapFactories</dfn> {
- void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#imagebitmapsource>ImageBitmapSource</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback, optional long sx, long sy, long sw, long sh);
+ <a href=#promise>Promise</a> <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#imagebitmapsource>ImageBitmapSource</a> image, optional long sx, long sy, long sw, long sh);
};
<a href=#window>Window</a> implements <a href=#imagebitmapfactories>ImageBitmapFactories</a>;
<a href=#workerglobalscope>WorkerGlobalScope</a> implements <a href=#imagebitmapfactories>ImageBitmapFactories</a>;</pre>
@@ -75296,19 +75300,18 @@
I/O, then the latency is probably undue; whereas if it only requires a blocking read from a GPU or
system RAM, the latency is probably acceptable.</p>
- <dl class=domintro><dt><var title="">Window</var> . <code title=dom-createImageBitmap><a href=#dom-createimagebitmap>createImageBitmap</a></code>(<var title="">image</var>, <var title="">callback</var> [, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var> ] )</dt>
+ <dl class=domintro><dt><var title="">promise</var> = <var title="">Window</var> . <code title=dom-createImageBitmap><a href=#dom-createimagebitmap>createImageBitmap</a></code>(<var title="">image</var> [, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var> ] )</dt>
<dd>
<p>Takes <var title="">image</var>, which can be an <code><a href=#the-img-element>img</a></code> element,
<code><a href=#the-video-element>video</a></code>, or <code><a href=#the-canvas-element>canvas</a></code> element, a <code><a href=#blob>Blob</a></code> object, an
<code><a href=#imagedata>ImageData</a></code> object, a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object, or another
- <code><a href=#imagebitmap>ImageBitmap</a></code> object, and asynchronously calls <var title="">callback</var> with a
- new <code><a href=#imagebitmap>ImageBitmap</a></code> as its argument when it has created one.</p>
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object, and return a <code><a href=#promise>Promise</a></code> that is resolved when a
+ new <code><a href=#imagebitmap>ImageBitmap</a></code> is created.</p>
<p>If no <code><a href=#imagebitmap>ImageBitmap</a></code> object can be constructed, for example because the provided
- <var title="">image</var> data is not actually an image, then the <var title="">callback</var>
- is invoked with null as the value instead.</p>
+ <var title="">image</var> data is not actually an image, then promise is rejected instead.</p>
<p>If <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, and <var title="">sh</var> arguments are provided, the source image is cropped to the given pixels, with
any pixels missing in the original replaced by transparent black. These coordinates are in the
@@ -75331,8 +75334,7 @@
object's media data can be decoded without errors, it is said to be <dfn id=concept-imagebitmap-good title=concept-ImageBitmap-good>fully decodable</dfn>.</p>
<p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object can be obtained from a variety of different objects, using
- the <dfn id=dom-createimagebitmap title=dom-createImageBitmap><code>createImageBitmap()</code></dfn> method. This method
- takes two arguments, <var title="">image</var> and <var title="">callback</var>. When invoked, the
+ the <dfn id=dom-createimagebitmap title=dom-createImageBitmap><code>createImageBitmap()</code></dfn> method. When invoked, the
method must act as follows:</p>
<!-- the canvas createPattern() and drawImage() methods have similar requirements -->
@@ -75366,10 +75368,12 @@
supported or is disabled), or, if there is no such image, the first frame of the
animation.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps
+ asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75399,10 +75403,11 @@
<a href=#current-playback-position>current playback position</a>, at the <a href=#media-resource>media resource</a>'s <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a> (i.e. after any aspect-ratio
correction has been applied), <a href=#cropped-to-the-source-rectangle>cropped to the source rectangle</a>.</p>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75428,10 +75433,11 @@
<code><a href=#the-canvas-element>canvas</a></code> element's bitmap data, <a href=#cropped-to-the-source-rectangle>cropped to the source
rectangle</a>.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75446,10 +75452,11 @@
<li><p>If the <code><a href=#blob>Blob</a></code> object has been neutered through the <code title=dom-Blob-close>close</code> method, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
exception and abort these steps.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
<li><p>Read the <code><a href=#blob>Blob</a></code> object's data. If an <a href=#file-error-read title=file-error-read>error
- occurs during reading of the object</a>, then <a href=#queue-a-task>queue a task</a> to invoke <var title="">callback</var> with null as the argument, and abort these steps.</li>
+ occurs during reading of the object</a>, then <a href=#concept-resolver-reject title=concept-resolver-reject>reject</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with null as the value, and abort these steps.</li>
<li><p>Apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a> to
determine the file format of the image data, with MIME type of the <code><a href=#blob>Blob</a></code> (as given
@@ -75458,8 +75465,8 @@
<li><p>If the image data is not in a supported file format (e.g. it's not actually an image at
all), or if the image data is corrupted in some fatal way such that the image dimensions cannot
- be obtained, <a href=#queue-a-task>queue a task</a> to invoke <var title="">callback</var> with null as the
- argument, and abort these steps.</li>
+ be obtained, then <a href=#concept-resolver-reject title=concept-resolver-reject>reject</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with null as the value, and abort these steps.</li>
<li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
@@ -75470,8 +75477,9 @@
supported or is disabled), or, if there is no such image, the first frame of the
animation.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75490,10 +75498,11 @@
of the object's <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attribute as the
object's pixel density.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75520,10 +75529,11 @@
<code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a>, <a href=#cropped-to-the-source-rectangle>cropped to
the source rectangle</a>.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75540,10 +75550,11 @@
<li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the <var title="">image</var> argument's bitmap data, <a href=#cropped-to-the-source-rectangle>cropped to the source
rectangle</a>.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75585,27 +75596,21 @@
<p>Using this API, a sprite sheet can be precut and prepared:</p>
<pre>var sprites = {};
-function loadMySprites(loadedCallback) {
- var pending = 0;
- function getSpriteAdder(name) {
- pending += 1;
- return function (image) {
- sprites[name] = image;
- pending -= 1;
- if (!pending)
- loadedCallback();
- };
- }
+function loadMySprites() {
var image = new Image();
image.src = 'mysprites.png';
+ var promise = new Promise();
image.onload = function () {
- createImageBitmap(image, getSpriteAdder('woman'), 0, 0, 40, 40);
- createImageBitmap(image, getSpriteAdder('man'), 40, 0, 40, 40);
- createImageBitmap(image, getSpriteAdder('tree'), 80, 0, 40, 40);
- createImageBitmap(image, getSpriteAdder('hut'), 0, 40, 40, 40);
- createImageBitmap(image, getSpriteAdder('apple'), 40, 40, 40, 40);
- createImageBitmap(image, getSpriteAdder('snake'), 80, 40, 40, 40);
+ Promise.every(
+ createImageBitmap(image, 0, 0, 40, 40).then(function (image) { sprites.woman = image }),
+ createImageBitmap(image, 40, 0, 40, 40).then(function (image) { sprites.man = image }),
+ createImageBitmap(image, 80, 0, 40, 40).then(function (image) { sprites.tree = image }),
+ createImageBitmap(image, 0, 40, 40, 40).then(function (image) { sprites.hut = image }),
+ createImageBitmap(image, 40, 40, 40, 40).then(function (image) { sprites.apple = image }),
+ createImageBitmap(image, 80, 40, 40, 40).then(function (image) { sprites.snake = image }),
+ ).then(function (value) { promise.fulfill(value) }, function (value) { promise.reject(value) } );
};
+ return promise;
}
function runDemo() {
@@ -75615,7 +75620,7 @@
context.drawImage(sprites.snake, 70, 10);
}
-loadMySprites(runDemo);</pre>
+loadMySprites().then(runDemo);</pre>
</div>
Modified: index
===================================================================
--- index 2013-07-16 22:58:40 UTC (rev 8064)
+++ index 2013-07-17 21:03:08 UTC (rev 8065)
@@ -256,7 +256,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 16 July 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 17 July 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -3580,7 +3580,7 @@
specification is defined in terms of the DOM, and some of the features are defined as extensions
to the DOM interfaces. <a href=#refsDOM>[DOM]</a> <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
- <p>In particular, the following features are defined in the DOM specification: <a href=#refsDOM>[DOM]</a></p>
+ <p>In particular, the following features are defined in the DOM specification: <a href=#refsDOM>[DOM]</a></p> <!-- aka DOM Core or DOMCORE -->
<ul class=brief><li><dfn id=attr><code>Attr</code></dfn> interface</li>
<li><dfn id=comment-0><code>Comment</code></dfn> interface</li>
@@ -3645,6 +3645,10 @@
<li>The <dfn id=mutationobserver-scripting-environment><code>MutationObserver</code> <var title="">scripting environment</var></dfn> concept</li>
<li>The <dfn id=concept-mo-invoke title=concept-mo-invoke>invoke <code>MutationObserver</code> objects</dfn> algorithm</li>
+ <li><dfn id=promise>Promise</dfn> interface</li>
+ <li>The <dfn id=concept-resolver title=concept-resolver>resolver</dfn> concept</li>
+ <li>The <dfn id=concept-resolver-fulfill title=concept-resolver-fulfill>fulfill</dfn> and <dfn id=concept-resolver-reject title=concept-resolver-reject>reject</dfn> algorithms</li>
+
</ul><p>The term <dfn id=throw>throw</dfn> in this specification is used as defined in the DOM specification.
The following <code><a href=#domexception>DOMException</a></code> types are defined in the DOM specification: <a href=#refsDOM>[DOM]</a></p>
@@ -75283,7 +75287,7 @@
[NoInterfaceObject]
interface <dfn id=imagebitmapfactories>ImageBitmapFactories</dfn> {
- void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#imagebitmapsource>ImageBitmapSource</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback, optional long sx, long sy, long sw, long sh);
+ <a href=#promise>Promise</a> <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#imagebitmapsource>ImageBitmapSource</a> image, optional long sx, long sy, long sw, long sh);
};
<a href=#window>Window</a> implements <a href=#imagebitmapfactories>ImageBitmapFactories</a>;
<a href=#workerglobalscope>WorkerGlobalScope</a> implements <a href=#imagebitmapfactories>ImageBitmapFactories</a>;</pre>
@@ -75296,19 +75300,18 @@
I/O, then the latency is probably undue; whereas if it only requires a blocking read from a GPU or
system RAM, the latency is probably acceptable.</p>
- <dl class=domintro><dt><var title="">Window</var> . <code title=dom-createImageBitmap><a href=#dom-createimagebitmap>createImageBitmap</a></code>(<var title="">image</var>, <var title="">callback</var> [, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var> ] )</dt>
+ <dl class=domintro><dt><var title="">promise</var> = <var title="">Window</var> . <code title=dom-createImageBitmap><a href=#dom-createimagebitmap>createImageBitmap</a></code>(<var title="">image</var> [, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var> ] )</dt>
<dd>
<p>Takes <var title="">image</var>, which can be an <code><a href=#the-img-element>img</a></code> element,
<code><a href=#the-video-element>video</a></code>, or <code><a href=#the-canvas-element>canvas</a></code> element, a <code><a href=#blob>Blob</a></code> object, an
<code><a href=#imagedata>ImageData</a></code> object, a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object, or another
- <code><a href=#imagebitmap>ImageBitmap</a></code> object, and asynchronously calls <var title="">callback</var> with a
- new <code><a href=#imagebitmap>ImageBitmap</a></code> as its argument when it has created one.</p>
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object, and return a <code><a href=#promise>Promise</a></code> that is resolved when a
+ new <code><a href=#imagebitmap>ImageBitmap</a></code> is created.</p>
<p>If no <code><a href=#imagebitmap>ImageBitmap</a></code> object can be constructed, for example because the provided
- <var title="">image</var> data is not actually an image, then the <var title="">callback</var>
- is invoked with null as the value instead.</p>
+ <var title="">image</var> data is not actually an image, then promise is rejected instead.</p>
<p>If <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, and <var title="">sh</var> arguments are provided, the source image is cropped to the given pixels, with
any pixels missing in the original replaced by transparent black. These coordinates are in the
@@ -75331,8 +75334,7 @@
object's media data can be decoded without errors, it is said to be <dfn id=concept-imagebitmap-good title=concept-ImageBitmap-good>fully decodable</dfn>.</p>
<p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object can be obtained from a variety of different objects, using
- the <dfn id=dom-createimagebitmap title=dom-createImageBitmap><code>createImageBitmap()</code></dfn> method. This method
- takes two arguments, <var title="">image</var> and <var title="">callback</var>. When invoked, the
+ the <dfn id=dom-createimagebitmap title=dom-createImageBitmap><code>createImageBitmap()</code></dfn> method. When invoked, the
method must act as follows:</p>
<!-- the canvas createPattern() and drawImage() methods have similar requirements -->
@@ -75366,10 +75368,12 @@
supported or is disabled), or, if there is no such image, the first frame of the
animation.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps
+ asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75399,10 +75403,11 @@
<a href=#current-playback-position>current playback position</a>, at the <a href=#media-resource>media resource</a>'s <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a> (i.e. after any aspect-ratio
correction has been applied), <a href=#cropped-to-the-source-rectangle>cropped to the source rectangle</a>.</p>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75428,10 +75433,11 @@
<code><a href=#the-canvas-element>canvas</a></code> element's bitmap data, <a href=#cropped-to-the-source-rectangle>cropped to the source
rectangle</a>.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75446,10 +75452,11 @@
<li><p>If the <code><a href=#blob>Blob</a></code> object has been neutered through the <code title=dom-Blob-close>close</code> method, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
exception and abort these steps.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
<li><p>Read the <code><a href=#blob>Blob</a></code> object's data. If an <a href=#file-error-read title=file-error-read>error
- occurs during reading of the object</a>, then <a href=#queue-a-task>queue a task</a> to invoke <var title="">callback</var> with null as the argument, and abort these steps.</li>
+ occurs during reading of the object</a>, then <a href=#concept-resolver-reject title=concept-resolver-reject>reject</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with null as the value, and abort these steps.</li>
<li><p>Apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a> to
determine the file format of the image data, with MIME type of the <code><a href=#blob>Blob</a></code> (as given
@@ -75458,8 +75465,8 @@
<li><p>If the image data is not in a supported file format (e.g. it's not actually an image at
all), or if the image data is corrupted in some fatal way such that the image dimensions cannot
- be obtained, <a href=#queue-a-task>queue a task</a> to invoke <var title="">callback</var> with null as the
- argument, and abort these steps.</li>
+ be obtained, then <a href=#concept-resolver-reject title=concept-resolver-reject>reject</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with null as the value, and abort these steps.</li>
<li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
@@ -75470,8 +75477,9 @@
supported or is disabled), or, if there is no such image, the first frame of the
animation.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75490,10 +75498,11 @@
of the object's <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attribute as the
object's pixel density.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75520,10 +75529,11 @@
<code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a>, <a href=#cropped-to-the-source-rectangle>cropped to
the source rectangle</a>.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75540,10 +75550,11 @@
<li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the <var title="">image</var> argument's bitmap data, <a href=#cropped-to-the-source-rectangle>cropped to the source
rectangle</a>.</li>
- <li><p>Return, but continue running these steps asynchronously.</li>
+ <li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
- <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+ <li><p><a href=#concept-resolver-fulfill title=concept-resolver-fulfill>Fulfill</a> the <code><a href=#promise>Promise</a></code>'s
+ associated <a href=#concept-resolver title=concept-resolver>resolver</a>, with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as the value.</li>
</ol></dd>
@@ -75585,27 +75596,21 @@
<p>Using this API, a sprite sheet can be precut and prepared:</p>
<pre>var sprites = {};
-function loadMySprites(loadedCallback) {
- var pending = 0;
- function getSpriteAdder(name) {
- pending += 1;
- return function (image) {
- sprites[name] = image;
- pending -= 1;
- if (!pending)
- loadedCallback();
- };
- }
+function loadMySprites() {
var image = new Image();
image.src = 'mysprites.png';
+ var promise = new Promise();
image.onload = function () {
- createImageBitmap(image, getSpriteAdder('woman'), 0, 0, 40, 40);
- createImageBitmap(image, getSpriteAdder('man'), 40, 0, 40, 40);
- createImageBitmap(image, getSpriteAdder('tree'), 80, 0, 40, 40);
- createImageBitmap(image, getSpriteAdder('hut'), 0, 40, 40, 40);
- createImageBitmap(image, getSpriteAdder('apple'), 40, 40, 40, 40);
- createImageBitmap(image, getSpriteAdder('snake'), 80, 40, 40, 40);
+ Promise.every(
+ createImageBitmap(image, 0, 0, 40, 40).then(function (image) { sprites.woman = image }),
+ createImageBitmap(image, 40, 0, 40, 40).then(function (image) { sprites.man = image }),
+ createImageBitmap(image, 80, 0, 40, 40).then(function (image) { sprites.tree = image }),
+ createImageBitmap(image, 0, 40, 40, 40).then(function (image) { sprites.hut = image }),
+ createImageBitmap(image, 40, 40, 40, 40).then(function (image) { sprites.apple = image }),
+ createImageBitmap(image, 80, 40, 40, 40).then(function (image) { sprites.snake = image }),
+ ).then(function (value) { promise.fulfill(value) }, function (value) { promise.reject(value) } );
};
+ return promise;
}
function runDemo() {
@@ -75615,7 +75620,7 @@
context.drawImage(sprites.snake, 70, 10);
}
-loadMySprites(runDemo);</pre>
+loadMySprites().then(runDemo);</pre>
</div>
Modified: source
===================================================================
--- source 2013-07-16 22:58:40 UTC (rev 8064)
+++ source 2013-07-17 21:03:08 UTC (rev 8065)
@@ -2375,7 +2375,7 @@
to the DOM interfaces. <a href="#refsDOM">[DOM]</a> <a href="#refsDOMEVENTS">[DOMEVENTS]</a></p>
<p>In particular, the following features are defined in the DOM specification: <a
- href="#refsDOM">[DOM]</a></p>
+ href="#refsDOM">[DOM]</a></p> <!-- aka DOM Core or DOMCORE -->
<ul class="brief">
@@ -2442,6 +2442,10 @@
<li>The <dfn><code>MutationObserver</code> <var title="">scripting environment</var></dfn> concept</li>
<li>The <dfn title="concept-mo-invoke">invoke <code>MutationObserver</code> objects</dfn> algorithm</li>
+ <li><dfn>Promise</dfn> interface</li>
+ <li>The <dfn title="concept-resolver">resolver</dfn> concept</li>
+ <li>The <dfn title="concept-resolver-fulfill">fulfill</dfn> and <dfn title="concept-resolver-reject">reject</dfn> algorithms</li>
+
</ul>
<p>The term <dfn>throw</dfn> in this specification is used as defined in the DOM specification.
@@ -84306,7 +84310,7 @@
[NoInterfaceObject]
interface <dfn>ImageBitmapFactories</dfn> {
- void <span title="dom-createImageBitmap">createImageBitmap</span>(<span>ImageBitmapSource</span> image, <span>ImageBitmapCallback</span> _callback, optional long sx, long sy, long sw, long sh);
+ <span>Promise</span> <span title="dom-createImageBitmap">createImageBitmap</span>(<span>ImageBitmapSource</span> image, optional long sx, long sy, long sw, long sh);
};
<span>Window</span> implements <span>ImageBitmapFactories</span>;
<span>WorkerGlobalScope</span> implements <span>ImageBitmapFactories</span>;</pre>
@@ -84321,19 +84325,18 @@
<dl class="domintro">
- <dt><var title="">Window</var> . <code title="dom-createImageBitmap">createImageBitmap</code>(<var title="">image</var>, <var title="">callback</var> [, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var> ] )</dt>
+ <dt><var title="">promise</var> = <var title="">Window</var> . <code title="dom-createImageBitmap">createImageBitmap</code>(<var title="">image</var> [, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var> ] )</dt>
<dd>
<p>Takes <var title="">image</var>, which can be an <code>img</code> element,
<code>video</code>, or <code>canvas</code> element, a <code>Blob</code> object, an
<code>ImageData</code> object, a <code>CanvasRenderingContext2D</code> object, or another
- <code>ImageBitmap</code> object, and asynchronously calls <var title="">callback</var> with a
- new <code>ImageBitmap</code> as its argument when it has created one.</p>
+ <code>ImageBitmap</code> object, and return a <code>Promise</code> that is resolved when a
+ new <code>ImageBitmap</code> is created.</p>
<p>If no <code>ImageBitmap</code> object can be constructed, for example because the provided
- <var title="">image</var> data is not actually an image, then the <var title="">callback</var>
- is invoked with null as the value instead.</p>
+ <var title="">image</var> data is not actually an image, then promise is rejected instead.</p>
<p>If <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, and <var
title="">sh</var> arguments are provided, the source image is cropped to the given pixels, with
@@ -84360,8 +84363,7 @@
title="concept-ImageBitmap-good">fully decodable</dfn>.</p>
<p>An <code>ImageBitmap</code> object can be obtained from a variety of different objects, using
- the <dfn title="dom-createImageBitmap"><code>createImageBitmap()</code></dfn> method. This method
- takes two arguments, <var title="">image</var> and <var title="">callback</var>. When invoked, the
+ the <dfn title="dom-createImageBitmap"><code>createImageBitmap()</code></dfn> method. When invoked, the
method must act as follows:</p>
<!-- the canvas createPattern() and drawImage() methods have similar requirements -->
@@ -84399,10 +84401,12 @@
supported or is disabled), or, if there is no such image, the first frame of the
animation.</p></li>
- <li><p>Return, but continue running these steps asynchronously.</p></li>
+ <li><p>Return a new <code>Promise</code>, but continue running these steps
+ asynchronously.</p></li>
- <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
- <code>ImageBitmap</code> object as its argument.</p></li>
+ <li><p><span title="concept-resolver-fulfill">Fulfill</span> the <code>Promise</code>'s
+ associated <span title="concept-resolver">resolver</span>, with the new
+ <code>ImageBitmap</code> object as the value.</p></li>
</ol>
@@ -84441,10 +84445,11 @@
title="concept-video-intrinsic-height">intrinsic height</span> (i.e. after any aspect-ratio
correction has been applied), <span>cropped to the source rectangle</span>.</p>
- <li><p>Return, but continue running these steps asynchronously.</p></li>
+ <li><p>Return a new <code>Promise</code>, but continue running these steps asynchronously.</p></li>
- <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
- <code>ImageBitmap</code> object as its argument.</p></li>
+ <li><p><span title="concept-resolver-fulfill">Fulfill</span> the <code>Promise</code>'s
+ associated <span title="concept-resolver">resolver</span>, with the new
+ <code>ImageBitmap</code> object as the value.</p></li>
</ol>
@@ -84475,10 +84480,11 @@
<code>canvas</code> element's bitmap data, <span>cropped to the source
rectangle</span>.</p></li>
- <li><p>Return, but continue running these steps asynchronously.</p></li>
+ <li><p>Return a new <code>Promise</code>, but continue running these steps asynchronously.</p></li>
- <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
- <code>ImageBitmap</code> object as its argument.</p></li>
+ <li><p><span title="concept-resolver-fulfill">Fulfill</span> the <code>Promise</code>'s
+ associated <span title="concept-resolver">resolver</span>, with the new
+ <code>ImageBitmap</code> object as the value.</p></li>
</ol>
@@ -84498,11 +84504,11 @@
title="dom-Blob-close">close</code> method, then throw an <code>InvalidStateError</code>
exception and abort these steps.</p></li>
- <li><p>Return, but continue running these steps asynchronously.</p></li>
+ <li><p>Return a new <code>Promise</code>, but continue running these steps asynchronously.</p></li>
<li><p>Read the <code>Blob</code> object's data. If an <span title="file-error-read">error
- occurs during reading of the object</span>, then <span>queue a task</span> to invoke <var
- title="">callback</var> with null as the argument, and abort these steps.</p></li>
+ occurs during reading of the object</span>, then <span title="concept-resolver-reject">reject</span> the <code>Promise</code>'s
+ associated <span title="concept-resolver">resolver</span>, with null as the value, and abort these steps.</p></li>
<li><p>Apply the <span title="Content-Type sniffing: image">image sniffing rules</span> to
determine the file format of the image data, with MIME type of the <code>Blob</code> (as given
@@ -84511,8 +84517,8 @@
<li><p>If the image data is not in a supported file format (e.g. it's not actually an image at
all), or if the image data is corrupted in some fatal way such that the image dimensions cannot
- be obtained, <span>queue a task</span> to invoke <var title="">callback</var> with null as the
- argument, and abort these steps.</p></li>
+ be obtained, then <span title="concept-resolver-reject">reject</span> the <code>Promise</code>'s
+ associated <span title="concept-resolver">resolver</span>, with null as the value, and abort these steps.</p></li>
<li><p>Create a new <code>ImageBitmap</code> object.</p></li>
@@ -84523,8 +84529,9 @@
supported or is disabled), or, if there is no such image, the first frame of the
animation.</p></li>
- <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
- <code>ImageBitmap</code> object as its argument.</p></li>
+ <li><p><span title="concept-resolver-fulfill">Fulfill</span> the <code>Promise</code>'s
+ associated <span title="concept-resolver">resolver</span>, with the new
+ <code>ImageBitmap</code> object as the value.</p></li>
</ol>
@@ -84547,10 +84554,11 @@
of the object's <code title="dom-imagedata-resolution">resolution</code> attribute as the
object's pixel density.</p></li>
- <li><p>Return, but continue running these steps asynchronously.</p></li>
+ <li><p>Return a new <code>Promise</code>, but continue running these steps asynchronously.</p></li>
- <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
- <code>ImageBitmap</code> object as its argument.</p></li>
+ <li><p><span title="concept-resolver-fulfill">Fulfill</span> the <code>Promise</code>'s
+ associated <span title="concept-resolver">resolver</span>, with the new
+ <code>ImageBitmap</code> object as the value.</p></li>
</ol>
@@ -84581,10 +84589,11 @@
<code>CanvasRenderingContext2D</code> object's <span>scratch bitmap</span>, <span>cropped to
the source rectangle</span>.</p></li>
- <li><p>Return, but continue running these steps asynchronously.</p></li>
+ <li><p>Return a new <code>Promise</code>, but continue running these steps asynchronously.</p></li>
- <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
- <code>ImageBitmap</code> object as its argument.</p></li>
+ <li><p><span title="concept-resolver-fulfill">Fulfill</span> the <code>Promise</code>'s
+ associated <span title="concept-resolver">resolver</span>, with the new
+ <code>ImageBitmap</code> object as the value.</p></li>
</ol>
@@ -84606,10 +84615,11 @@
title="">image</var> argument's bitmap data, <span>cropped to the source
rectangle</span>.</p></li>
- <li><p>Return, but continue running these steps asynchronously.</p></li>
+ <li><p>Return a new <code>Promise</code>, but continue running these steps asynchronously.</p></li>
- <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
- <code>ImageBitmap</code> object as its argument.</p></li>
+ <li><p><span title="concept-resolver-fulfill">Fulfill</span> the <code>Promise</code>'s
+ associated <span title="concept-resolver">resolver</span>, with the new
+ <code>ImageBitmap</code> object as the value.</p></li>
</ol>
@@ -84666,27 +84676,21 @@
<p>Using this API, a sprite sheet can be precut and prepared:</p>
<pre>var sprites = {};
-function loadMySprites(loadedCallback) {
- var pending = 0;
- function getSpriteAdder(name) {
- pending += 1;
- return function (image) {
- sprites[name] = image;
- pending -= 1;
- if (!pending)
- loadedCallback();
- };
- }
+function loadMySprites() {
var image = new Image();
image.src = 'mysprites.png';
+ var promise = new Promise();
image.onload = function () {
- createImageBitmap(image, getSpriteAdder('woman'), 0, 0, 40, 40);
- createImageBitmap(image, getSpriteAdder('man'), 40, 0, 40, 40);
- createImageBitmap(image, getSpriteAdder('tree'), 80, 0, 40, 40);
- createImageBitmap(image, getSpriteAdder('hut'), 0, 40, 40, 40);
- createImageBitmap(image, getSpriteAdder('apple'), 40, 40, 40, 40);
- createImageBitmap(image, getSpriteAdder('snake'), 80, 40, 40, 40);
+ Promise.every(
+ createImageBitmap(image, 0, 0, 40, 40).then(function (image) { sprites.woman = image }),
+ createImageBitmap(image, 40, 0, 40, 40).then(function (image) { sprites.man = image }),
+ createImageBitmap(image, 80, 0, 40, 40).then(function (image) { sprites.tree = image }),
+ createImageBitmap(image, 0, 40, 40, 40).then(function (image) { sprites.hut = image }),
+ createImageBitmap(image, 40, 40, 40, 40).then(function (image) { sprites.apple = image }),
+ createImageBitmap(image, 80, 40, 40, 40).then(function (image) { sprites.snake = image }),
+ ).then(function (value) { promise.fulfill(value) }, function (value) { promise.reject(value) } );
};
+ return promise;
}
function runDemo() {
@@ -84696,7 +84700,7 @@
context.drawImage(sprites.snake, 70, 10);
}
-loadMySprites(runDemo);</pre>
+loadMySprites().then(runDemo);</pre>
</div>
More information about the Commit-Watchers
mailing list