Merge branch 'master' of github.com:w3c/csswg-drafts

Author: frivoal

css-images/Overview.bs

@@ -1,5 +1,5 @@
 <pre class='metadata'>
-Title: CSS Image Values and Replaced Content Module Level 3
+Title: CSS Images Module Level 3
 Status: ED
 Shortname: css-images
 Level: 3
@@ -9,7 +9,12 @@ TR: https://www.w3.org/TR/css3-images/
 Work Status: Testing
 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
 Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
-Abstract: This module contains the features of CSS level 3 relating to the <<image>> type and replaced elements. It includes and extends the functionality of CSS level 2 [[CSS21]]. The main extensions compared to CSS2.1 are the generalization of the <<url>> type to the <<image>> type, several additions to the <<image>> type, a generic sizing algorithm for images and other replaced content in CSS, definitions for interpolating several <<image>> types, and several properties controlling the interaction of replaced elements and CSS's layout models.
+Abstract: This module contains the features of CSS level 3 relating to the <<image>> type and some replaced elements.
+	It includes and extends the functionality of CSS level 2 [[CSS21]].
+	The main extensions compared to CSS2.1 are the generalization of the <<url>> type to the <<image>> type,
+	several additions to the <<image>> type, a generic sizing algorithm for images and other replaced content in CSS,
+	definitions for interpolating several <<image>> types,
+	and several properties controlling the interaction of replaced elements and CSS's layout models.
 At Risk: 'image-orientation'
 At Risk: [[#interpolating-gradients]]
 Issue Tracking: Tracker http://www.w3.org/Style/CSS/Tracker/products/27
@@ -36,7 +41,7 @@ Introduction {#intro}
 	and for <a section href="#the-object-fit">sizing</a>
 	or <a section href="#the-object-position">positioning</a>
 	replaced elements such as images within the box determined by the CSS layout algorithms.
-	It also defines in a generic way CSS's <a section href="#sizing">sizing algorithm</a> for images and other replaced elements.
+	It also defines in a generic way CSS's <a section href="#sizing">sizing algorithm</a> for images and other similar replaced elements.
 
 
 <!--
@@ -89,7 +94,7 @@ Image References: the ''url()'' notation {#url-notation}
 		<pre>background-image: url(wavy.png);</pre>
 	</div>
 
-	If the UA cannot download, parse, or otherwise successfully display the contents at the URL as an image,
+	If the image is not <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-imagebitmap-good">fully decodable</a>,
 	it must be treated as an <a>invalid image</a>.
 
 

css-images/issues-cr-2012.json

@@ -389,14 +389,15 @@
 		{
 			"id": "26",
 			"summary": "Coordinate system for gradients and image-set()?",
-			"status": "new",
+			"status": "out-of-scope",
 			"from": "Florian Rivoal",
 			"comment": [
 				"https://lists.w3.org/Archives/Public/www-style/2015Apr/0193.html"
 			],
 			"response": [],
-			"openness": "open",
-			"tag": []
+			"openness": "closed",
+			"tag": [],
+			"notes": "Should be defined in CSS UI."
 		},
 		{
 			"id": "27",
@@ -430,7 +431,7 @@
 		{
 			"id": "29",
 			"summary": "Allow ellipse with 1 size in radial-gradient()?",
-			"status": "new",
+			"status": "out-of-scope",
 			"from": "Alan Stearns",
 			"comment": [
 				"https://lists.w3.org/Archives/Public/www-style/2015Dec/0091.html"
@@ -439,9 +440,10 @@
 				"https://lists.w3.org/Archives/Public/www-style/2015Dec/0092.html",
 				"https://lists.w3.org/Archives/Public/www-style/2015Dec/0130.html"
 			],
-			"openness": "open",
+			"openness": "closed",
 			"authorResponse": "https://lists.w3.org/Archives/Public/www-style/2015Dec/0129.html",
-			"tag": []
+			"tag": [],
+			"notes": "This is a Shapes issue."
 		},
 		{
 			"id": "30",
@@ -465,15 +467,15 @@
 		{
 			"id": "31",
 			"summary": "Add new value for high-quality image-rendering",
-			"status": "new",
+			"status": "accepted",
 			"from": "CSSWG",
 			"comment": [
 				"https://lists.w3.org/Archives/Public/www-style/2016Feb/0183.html",
 				"https://lists.w3.org/Archives/Public/www-style/2016Feb/0312.html",
 				"https://lists.w3.org/Archives/Public/www-style/2016Feb/0318.html"
 			],
 			"response": [],
-			"openness": "open",
+			"openness": "closed",
 			"tag": [
 				"image-rendering"
 			]
@@ -514,13 +516,13 @@
 		{
 			"id": "34",
 			"summary": "Clarify failed loading conditions per Fetch",
-			"status": "new",
+			"status": "accepted",
 			"from": "Henrik Andersson",
 			"comment": [
 				"https://lists.w3.org/Archives/Public/www-style/2016Sep/0105.html"
 			],
 			"response": [],
-			"openness": "open",
+			"openness": "closed",
 			"tag": []
 		},
 		{
@@ -595,13 +597,13 @@
 		{
 			"id": "40",
 			"summary": "Elements with intrinsic size but no aspect ratio",
-			"status": "new",
+			"status": "out-of-scope",
 			"from": "fantasai",
 			"comment": [
 				"https://github.com/w3c/csswg-drafts/issues/1044"
 			],
 			"response": [],
-			"openness": "open",
+			"openness": "closed",
 			"tag": [
 				"object sizing"
 			]

css-rhythm/Overview.bs

@@ -230,6 +230,30 @@ Notes on Block-level Boxes {#inline-block}
 Adjusting Block-level Box Heights {#block-height}
 =================================
 
+	Much web content includes blocks with varying font sizes, line heights, 
+	margins, etcetera. Adjusting line box heights may not be enough to 
+	achieve a vertical rhythm in these circumstances, 
+	and can negatively affect the readability of Latin scripts by altering line heights. 
+	Constraining block height, rather than line height, to a multiple of a step size 
+	can achieve a vertical rhythm in these circumstances.
+	
+
+		<div class="figure">
+			<img src="images/block-step-size-before.png"
+			style="width: 500px">
+			<figcaption>Heads and blockquotes have varying font sizes and line heights, 
+			resulting in uneven text across columns.</figcaption>
+		</div>
+
+
+
+		<div class="figure">
+			<img src="images/block-step-size-after.png"
+			style="width: 500px">
+			<figcaption>Space inserted before and after blocks (shown with colored borders) 
+			restores vertical rhythm.</figcaption>
+		</div>
+
 	ISSUE: This proposal can be simplified down to just the 'block-step-size' property, represented solely through its shortened form as 'block-step'.
 	This level will likely at most contain 'block-step-size' and 'block-step-insert', leaving 'block-step-align' and 'block-step-round' to be added if the future demands.
 	The full design is described herein for current discussion and future reference.

css-rhythm/images/block-step-size-after.png

@@ -331,7 +331,7 @@ The term <dfn>SVG layout box</dfn> refers to the same term in SVG.
 
 The term <dfn>layout box</dfn> refers to either a <a>CSS layout box</a> or an <a>SVG layout box</a>.
 
-The term <dfn>transforms</dfn> refers to SVG transforms and CSS transforms. [[!SVG]] [[!CSS-TRANSFORMS-1]]
+The term <dfn>transforms</dfn> refers to SVG transforms and CSS transforms. [[!SVG11]] [[!CSS-TRANSFORMS-1]]
 
 When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that
 e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.

css-rhythm/images/block-step-size-before.png

@@ -78,6 +78,10 @@ header {
 	background: hsl(200, 10%, 93%);
 }
 
+	[property="issue"].filtered {
+		display: none !important;
+	}
+
 	[property="issue"] h1 {
 		display: flex;
 		padding: .5rem 1rem;
@@ -276,6 +280,7 @@ form {
 	display: inline-block;
 	padding: .2em .5em .3em;
 	border-radius: .3em;
+	margin: .2em;
 	background: var(--dark-color, rgba(0,0,0,.4));
 	background-image: linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,100%,.2));
 	color: white;

cssom-view/Overview.bs

@@ -6,6 +6,7 @@
 	<link rel="stylesheet" href="shared/style/mavo.css">
 	<link rel="stylesheet" href="issues.css">
 	<script src="shared/scripts/mavo.js"></script>
+	<!-- <script src="../../mavo/dist/mavo.js"></script> -->
 </head>
 <body>
 
@@ -65,15 +66,17 @@ <h2>
 			<legend>Filter by tag</legend>
 
 			<label property="tagFilter" mv-multiple mv-value="unique(issue.tag)">
-				<input type="checkbox" property="show" checked>
+				<input type="checkbox" property="show">
 				<span property="tagFilter"></span>
 				({count(issue.tag = tagFilter)})
 			</label>
+			<meta property="selectedTags" content="{filter(tagFilter, tagFilter.show).tagFilter}" />
 		</fieldset>
 	</div>
 
-	<article property="issue" mv-multiple class="status-{status} issue-{openness}" id="issue-{id}" hidden="{filtered}">
-		<meta property="filtered" content="{(status and !get(statusFilter, status).show) or !get(openFilter, openness).show}" />
+	<article property="issue" mv-multiple class="status-{status} issue-{openness} {if(filtered, 'filtered')}" id="issue-{id}">
+		<meta property="filtered" content="{(status and !get(statusFilter, status).show) or !get(openFilter, openness).show or (count(selectedTags) and !intersects(tag, selectedTags))}" />
+
 		<h1>
 			<a href="#issue-{id}" property="id" mv-attribute="null" mv-default="{$previous.id + 1}">1</a>
 			<span property="summary">Summary of Issue</span>
@@ -116,8 +119,9 @@ <h1>
 				<div property="notes" class="markdown"></div>
 			</dd>
 		</dl>
-		
-		<span property="tag" mv-multiple></span>
+		<div>
+			<span property="tag" mv-multiple>Tag</span>
+		</div>
 	</article>
 </div>