From 33796783858f40139ce59f88b0c733565fb670d6 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Tue, 10 Jun 2014 01:56:46 +0200 Subject: [PATCH] Prepare a WD --- index.bs | 2 +- index.html | 164 ++++++++++++++++++++++++++--------------------------- 2 files changed, 83 insertions(+), 83 deletions(-) diff --git a/index.bs b/index.bs index 3222dcc6..2e0b44ad 100644 --- a/index.bs +++ b/index.bs @@ -1,7 +1,7 @@

The picture Element

 Group: ricg
-Status: ED
+Status: WD
 ED: http://picture.responsiveimages.org
 Shortname: picture-element
 Level: 1
diff --git a/index.html b/index.html
index 3f8437a8..b28eefc5 100644
--- a/index.html
+++ b/index.html
@@ -551,9 +551,9 @@
 
 

   
The picture Element

-  
Editor’s Draft,
+  
W3C Working Draft,
     9 June 2014

-  
This version:
http://picture.responsiveimages.org
Editor’s Draft:
http://picture.responsiveimages.org
Test Suite:
None Yet
Editors:
+  
   

   
CC0
@@ -615,7 +615,7 @@ 
1 [MEDIAQ] (CSS Media Queries),
 	a means to create specialized presentations of an image and control when they are presented to a user.
 	This is achieved by introducing the picture element to HTML,
-	and by enhancing the source element to support specifying multiple source urls.

+	and by enhancing the source element to support specifying multiple source urls.

 
 
By relying on [MEDIAQ], a user agent can respond to changes in the browsing environment
 	by selecting the image source that most closely matches the browsing environment –
@@ -627,8 +627,8 @@ 
1 
 
 
The picture element remains backwards compatible with legacy user agents
-	(they will use the child img element)
-	while offering the same accessibility options as the existing img element.

+	(they will use the child img element)
+	while offering the same accessibility options as the existing img element.

 
 
 
1.1 
@@ -638,10 +638,10 @@ 

 
-
The picture element is not a general replacement for the img element.
+
The picture element is not a general replacement for the img element.
 	When there is only a single image source,
 	or when an image source exists in multiple densities (without “art direction”),
-	authors are encouraged to use just the img element,
+	authors are encouraged to use just the img element,
 	rather than cluttering their page with additional unnecessary syntax.

 
 
@@ -649,7 +649,7 @@ 

 
 	

-		This example shows a basic usage of the img element
+		This example shows a basic usage of the img element
 		to present the same image at multiple resolutions.
 
 		
<img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x"
@@ -660,11 +660,11 @@ 

 
-
It will then load the chosen URL in the img element,
+
It will then load the chosen URL in the img element,
 		as if it were specified in the src attribute.

 
 
For backwards compatibility with older user agents that don’t yet understand the srcset attribute,
-		one of the URLs is specified in the img element’s src attribute.
+		one of the URLs is specified in the img element’s src attribute.
 		This will result in something useful
 		(though perhaps lower-resolution than the user would like)
 		being displayed even in older user agents.

@@ -678,7 +678,7 @@ 
source elements:
+		This can be accomplished with multiple source elements:
 
 		
<picture>
   <source media="(min-width: 45em)" srcset="large.jpg">
@@ -689,12 +689,12 @@ 
In this example, depending on the user’s screen size,
 		one of the URLs will be downloaded.
-		For example, on a large desktop screen “large.jpg” will be displayed in the img element.

+		For example, on a large desktop screen “large.jpg” will be displayed in the img element.

 	

 
 	

-		Of course, one can use both multiple source elements
-		and multiple sources within a single source element together:
+		Of course, one can use both multiple source elements
+		and multiple sources within a single source element together:
 
 		
<picture>
   <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x">
@@ -711,7 +711,7 @@ 

 
 	

-		If the final size of the img element isn’t known ahead of time,
+		If the final size of the img element isn’t known ahead of time,
 		it can be difficult or impossible to specify a density descriptor for the image sources.
 		For example,
 		if an image is meant to take up the full width of the user’s screen,
@@ -722,7 +722,7 @@ 
To help with this,
 		rather than specifying the densities of each image source,
 		the sizes of each image source can be specified directly,
-		along with the size of the img element.
+		along with the size of the img element.
 		The user agent will then automatically calculate the effective pixel density of the image
 		and choose which one to download accordingly.

 
@@ -731,7 +731,7 @@ 

 
 
In this example, the image source is provided at three sizes—400 pixels wide, 800 pixels wide, and 1600 pixels wide.
-		As well, it declares that the img element is intrinsically sized to be as wide as the entire viewport.
+		As well, it declares that the img element is intrinsically sized to be as wide as the entire viewport.
 		If the user’s device is 320px wide,
 		this is equivalent to specifying pic400.jpg 1.25x, pic800.jpg 2.5x, pic1600.jpg 5x.
 		On the other hand,
@@ -747,7 +747,7 @@ 

 
 	

-		The previous example showed how to deal with the img element’s size being unpredictable
+		The previous example showed how to deal with the img element’s size being unpredictable
 		because it was a fraction of the viewport’s size.
 		Sometimes, though, the size of an image can also change based on a site’s layout breakpoints.
 
@@ -785,7 +785,7 @@ 

 
-
Specifying this information with multiple source elements,
+
Specifying this information with multiple source elements,
 		one for each of the media queries,
 		is possible, but much more verbose,
 		as the srcset attributes have to be duplicated for each of them.

@@ -820,10 +820,10 @@ 
In this example, the user agent will choose the first source that has a
 		type attribute with a supported MIME type. If the
-		user agent supports WebP images, the first source element
+		user agent supports WebP images, the first source element
 		will be chosen. If not, but the user agent does support JPEG XR images,
-		the second source element will be chosen. If neither of
-		those formats are supported, the img element will be
+		the second source element will be chosen. If neither of
+		those formats are supported, the img element will be
 		chosen. Then, the user agent chooses which of the different-density
 		sources to load, based on information it knows about the user’s device.

 	

@@ -870,22 +870,22 @@ 
2 3 
 The picture Element

 
-
Name:picture
Categories:Flow content, Phrasing content, Embedded content, Palpable content
Contexts:Where embedded content is expected
Content model:Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.
Attributes:Global attributes

+
Name:picture
Categories:Flow content, Phrasing content, Embedded content, Palpable content
Contexts:Where embedded content is expected
Content model:Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.
Attributes:Global attributes

 
-
The picture element is a container which provides multiples sources to its contained img element,
+
The picture element is a container which provides multiples sources to its contained img element,
 	allowing the displayed image to vary based on the density of the screen
 	or other environmental factors expressed as media queries.

 
-
Note: picture is somewhat different from the similar-looking elements video and audio.
-	While all of them contain source elements,
+
Note: picture is somewhat different from the similar-looking elements video and audio.
+	While all of them contain source elements,
 	the src attribute has no meaning when the element is nested within picture,
 	and the resource selection algorithm is different.
 	As well,
 	the picture element itself does not display anything;
-	it merely provides a context for its contained img
+	it merely provides a context for its contained img
 	that enables it to choose from multiple source urls.

 
-
An img element is associated with a source set.

+
An img element is associated with a source set.

 
 
A source set is a set of zero or more image sources,
 	a source size,
@@ -897,10 +897,10 @@ 
A source size is a <source-size-value>.
 	When a source size has a unit relative to the viewport,
-	it must be interpreted relative to the img element’s document’s viewport.
+	it must be interpreted relative to the img element’s document’s viewport.
 	Other units must be interpreted the same as in media queries. [MEDIAQ]

 
-
The relevant mutations for an img element are as follows:

+
The relevant mutations for an img element are as follows:

 
 	
    
 		
  • 
@@ -918,17 +918,17 @@ 
    
 			The element’s parent is a picture element
-			and a source element is inserted as a
+			and a source element is inserted as a
 			previous sibling.
 
 		
  • 
 			The element’s parent is a picture element
-			and a source element that was a previous
+			and a source element that was a previous
 			sibling is removed.
 
 		
  • 
 			The element’s parent is a picture element
-			and a source element that is a previous
+			and a source element that is a previous
 			sibling has its srcset,
 			sizes,
 			media or
@@ -961,7 +961,7 @@ 
    Also in the HTML spec, in the algorithm "The user agent may at
 		any time run the following algorithm to update an
-		img element’s image in order to react to changes
+		img element’s image in order to react to changes
 		in the environment.", make the following changes:
    
 
 		
      
@@ -977,7 +977,7 @@ 
      
 				Replace "If the img element’s src, srcset, or
 				crossorigin attributes have been set, changed,
-				or removed" with "If the img
+				or removed" with "If the img
 				element has experienced relevant mutations"
 		
    
 
@@ -992,7 +992,7 @@ 
    update the image data
-				of an img element whenever that
+				of an img element whenever that
 				element experiences relevant mutations."
 
 			
  • 
@@ -1008,18 +1008,18 @@ 
    update the image data of an
-				img element whenever it needs the
+				img element whenever it needs the
 				image data (i.e. on demand), but only if the img
 				element is in the unavailable state. When an
-				img element experiences
+				img element experiences
 				relevant mutations, if the user agent
 				only obtains images on demand, the
-				img element must return to the
+				img element must return to the
 				unavailable state."
 		

 	

 
-
When asked to select an image source for a given img element el,
+
When asked to select an image source for a given img element el,
 	user agents must do the following:

 
 	
    
@@ -1048,7 +1048,7 @@ 
    3.1.2 
 Updating the Source Set
    
 
-
    When asked to update the source set for a given img element el,
+
    When asked to update the source set for a given img element el,
 	user agents must do the following:
    
 
 	
      
@@ -1093,9 +1093,9 @@ 
      
 
 				
    1. 
-					If child is not a source element,
+					If child is not a source element,
 					continue to the next child.
-					Otherwise, child is a source element.
+					Otherwise, child is a source element.
 
 				
    2. 
 					If child does not have a srcset attribute,
@@ -1139,10 +1139,10 @@ 
      
 
 	
      
-		Each img element independently considers its previous sibling source elements plus the img element itself
+		Each img element independently considers its previous sibling source elements plus the img element itself
 		for selecting an image source, ignoring any other (invalid) elements,
-		including other img elements in the same picture element,
-		or source elements that are following siblings of the relevant img element.
+		including other img elements in the same picture element,
+		or source elements that are following siblings of the relevant img element.
 
 
 
      3.1.3 
@@ -1478,11 +1478,11 @@ 
      image candidate string with no descriptors is equivalent to an image candidate string with a 1x descriptor.
      
 
-
      If the source or img element has a
+
      If the source or img element has a
 	sizes attribute present, all image candidate strings for that
 	element must have the width descriptor specified.
      
 
-
      If an image candidate string for an source or img element
+
      If an image candidate string for an source or img element
 	has the width descriptor specified,
 	all other image candidate strings for that element
 	must also have the width descriptor specified.
      
@@ -1502,7 +1502,7 @@ 
      
 		
    3. 
-			Remove all consecutive <whitespace-token>s
+			Remove all consecutive <whitespace-token>s
 			from the end of unparsed size.
 			If unparsed size is now empty,
 			continue to the next iteration of this algorithm.
@@ -1516,7 +1516,7 @@ 
      
-			Remove all consecutive <whitespace-token>s
+			Remove all consecutive <whitespace-token>s
 			from the end of unparsed size.
 			If unparsed size is now empty,
 			return size and exit this algorithm.
@@ -1539,7 +1539,7 @@ 
      <source-size-list> = <source-size># [ , <source-size-value> ]? | <source-size-value>
 <source-size> = <media-condition> <source-size-value>
-<source-size-value> = <length>
+<source-size-value> = <length>
 

 
 
A <source-size-value> must not be negative.

@@ -1601,7 +1601,7 @@ 
media queries.

 
 
If a UA uses a preload scanner,
-	it must recognize when a an img element is a child of a picture,
+	it must recognize when a an img element is a child of a picture,
 	and use the full algorithm to select an image source to determine which URL to pre-load,
 	with the following caveats:

 
@@ -1614,12 +1614,12 @@ 
media feature.
 			If it encounters an unknown media feature,
 			or one which it cannot correctly determine the truth value of,
-			it must not attempt to preload any URL for the given img element.
+			it must not attempt to preload any URL for the given img element.
 	
 	

 		In some cases, the preload scanner or the parser cannot be aware of the final viewport’s dimensions when it encounters a picture or a
-		img element. One example of such a case is when a @viewport definition is located in an external style-sheet. Another
-		is when the preload scanner is operating on a iframe based document, which has its dimensions defined in an external
+		img element. One example of such a case is when a @viewport definition is located in an external style-sheet. Another
+		is when the preload scanner is operating on a iframe based document, which has its dimensions defined in an external
 		style-sheet.
 
 
Authors should be aware of these limitations, and should follow the following best practices:
@@ -1636,7 +1636,7 @@ 
3.3 
 HTMLPictureElement interface

 
-	
interface HTMLPictureElement : HTMLElement {
+	
interface HTMLPictureElement : HTMLElement {
 };
 

 
@@ -1644,9 +1644,9 @@ 
HTMLPictureElement serves as an extension point for future API extensions.
 
 
4 
-Changes to the source Element

+Changes to the source Element

 
-
The source element, if it has a picture
+
The source element, if it has a picture
 	element as its parent, must have the
 	srcset attribute specified. The
 	value must consist of one or more image candidate strings, each
@@ -1656,46 +1656,46 @@ 
image candidate string, if there is one,
 	must begin with one or more space characters.

 
-
The source element, if it has a picture
+
The source element, if it has a picture
 	element as its parent, may also have the
 	sizes attribute specified. If it is
 	specified, the value must be a valid source size list.

 
-
The source element, if it has a picture
+
The source element, if it has a picture
 	element as its parent, may also have the
 	media attributes specified. If it
 	is specified, the value must contain a valid media query.

 
-
The source element, if it has a picture
+
The source element, if it has a picture
 	element as its parent, must not have the
 	src attribute specified.

 
 
The type attribute, when specified
-	on a source element that has a picture
+	on a source element that has a picture
 	element as its parent, gives the type of the images in the source
 	set, to allow the user agent to skip to the next
-	source if it does not support the given type.

+	source if it does not support the given type.

 
 	
If the type attribute
 	is not specified, the user agent will not select a different
-	source element if it finds that it does not support
+	source element if it finds that it does not support
 	the image format after fetching it.
 
 
The IDL attributes srcset,
 	sizes and
-	media must reflect the
+	media must reflect the
 	respective content attributes of the same name. [HTML]

 
-	
partial interface HTMLSourceElement {
+	
partial interface HTMLSourceElement {
   attribute DOMString srcset;
   attribute DOMString sizes;
-  attribute DOMString media;
+  attribute DOMString media;
 };
 

 
-
When a source element is a child of a
+
When a source element is a child of a
 	picture element and has a following sibling
-	source element or img element with a
+	source element or img element with a
 	srcset attribute specified, it must have
 	at least one of the following:
 	
    
@@ -1708,9 +1708,9 @@ 
    
 
 
    5 
-Changes to the img Element
    
+Changes to the img Element
    
 
-
    The img element, if it has a
+
    The img element, if it has a
 	srcset attribute, may have a
 	sizes attribute specified. If it is
 	specified, the value must be a valid source size list.
    
@@ -1719,7 +1719,7 @@ 
    sizes content attribute.
 	[HTML]
    
 
-	
    partial interface HTMLImageElement {
+	
    partial interface HTMLImageElement {
   attribute DOMString sizes;
   readonly attribute DOMString currentSrc;
 };
@@ -1729,16 +1729,16 @@ 
    update the image data algorithm queues a task to fire a load event, or an error event,
 	or when the algorithm to react to changes in the environment queues a task to fire a load event,
 	the user agent must in the same task, before firing the event,
-	set the currentSrc IDL attribute to the last selected source, resolved relative to the img element,
+	set the currentSrc IDL attribute to the last selected source, resolved relative to the img element,
 	or to the empty string if the last selected source is null.
    
 
-	
    The usemap and ismap attributes on img do not work well together with art direction.
+	
    The usemap and ismap attributes on img do not work well together with art direction.
 
 
    6 Drag and drop
    
 
-
    When an img element’s draggable content attribute has the state auto,
+
    When an img element’s draggable content attribute has the state auto,
 	and it has a parent that is a picture element,
-	the img element’s draggable IDL attribute must return false.
    
+	the img element’s draggable IDL attribute must return false.
    
 
 
    When a picture element’s draggable content attribute has the state auto,
 	its draggable IDL attribute must return true.
    
@@ -1871,7 +1871,7 @@ 
    Issues In
 
 
    Also in the HTML spec, in the algorithm "The user agent may at
 		any time run the following algorithm to update an
-		img element’s image in order to react to changes
+		img element’s image in order to react to changes
 		in the environment.", make the following changes:
    
 
 		
      
@@ -1887,7 +1887,7 @@ 
      Issues In
 			
    • 
 				Replace "If the img element’s src, srcset, or
 				crossorigin attributes have been set, changed,
-				or removed" with "If the img
+				or removed" with "If the img
 				element has experienced relevant mutations"
 		
    
 
@@ -1902,7 +1902,7 @@ 
    Issues In
 				attribute set, changed, or removed." with "A
 				user agent that obtains images immediately must
 				also synchronously update the image data
-				of an img element whenever that
+				of an img element whenever that
 				element experiences relevant mutations."
 
 			
  • 
@@ -1918,13 +1918,13 @@ 
    Issues In
 				return to the unavailable state." with "A user
 				agent that obtains images on demand must
 				update the image data of an
-				img element whenever it needs the
+				img element whenever it needs the
 				image data (i.e. on demand), but only if the img
 				element is in the unavailable state. When an
-				img element experiences
+				img element experiences
 				relevant mutations, if the user agent
 				only obtains images on demand, the
-				img element must return to the
+				img element must return to the
 				unavailable state."
 		

 	 ↵