[css-multicol] replacement images for the column-span section

Author: rachelandrew

css-multicol-1/Overview.bs

@@ -846,70 +846,17 @@ Spanning columns</h2>
 		In paged media spanning elements are honored on all pages.
 		In this example, the first three paragraphs have column breaks after them.
 		An spanning <code>H2</code> element appears after the fourth paragraph.
-		This would appear on the first page:
-
-		<div class=cols style="height: 80px; border-bottom: none">
-			<div class="col" style="">
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz.
-			</div>
-
-			<div class="col" style="left: 175px">
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz. A bc<br>
-				def g hij klm nopqrs<br>
-				tuv wxy z.
-			</div>
-
-			<div class="col" style="left: 350px">
-				Ab cde fgh i jkl mno.<br>
-				Pq rstu vwxyz.
-			</div>
-
-			<div class=gap style="left: 150px"></div>
-			<div class=gap style="left: 325px"></div>
-		</div>
-
-		This would appear on the second page:
-
-		<div class=cols style="height: 200px; border-top: none">
-			Ab cde fgh i jkl. Mno<br>
-			pqr stu vw xyz. A bc<br>
-			<br><br>
-			M nop qrst uv wx yz.<br>
-			Ab cde fgh i jkl. Mno<br>
-			pqr stu vw xyz. A bc<br>
-			def g hij klm nopqrs<br>
-			tuv wxy z. Abc de fg<br>
-			hi jklmno. Pqrstu vw<br>
-
-			<div class="col" style="left: 175px">
-				def g hij klm nopqrs<br>
-				tuv wxy z. Abc de fg<br>
-				<br><br>
-				x yz. Abc def ghi jkl.<br>
-				M nop qrst uv wx yz.<br>
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz. A bc<br>
-				def g hij klm nopqrs<br>
-				tuv wxy z. Abc de fg<br>
-			</div>
+		
 
-			<div class="col" style="left: 350px">
-				hi jklmno. Pqrstu vw<br>
-				x yz. Abc def ghi jkl.<br>
-				<br><br>
-				hi jklmno. Pqrstu vw<br>
-				x yz. Abc def ghi jkl.<br>
-				M nop qrst uv wx yz.<br>
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz.
-			</div>
+		<figure>
+			<img src="images/spanner-page-break1.svg" alt="Three columns with two lines of text each">
+			<figcaption>This would appear on the first page</figcaption>
+		</figure>
 
-			<div class=rep style="width: 490px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An H2 element</div>
-			<div class=gap style="left: 150px"></div>
-			<div class=gap style="left: 325px"></div>
-		</div>
+		<figure>
+			<img src="images/spanner-page-break2.svg" alt="A spanning element across the three columns, text above and below.">
+			<figcaption>This would appear on the second page</figcaption>
+		</figure>
 	</div>
 
 	<div class="example">
@@ -930,39 +877,10 @@ Spanning columns</h2>
 		p { margin-top: 1em }
 		</pre>
 
-		<div class=cols style="border-top: none">
-			<br><br><br><br>
-			<br>
-			Ab cde fgh i jkl. Mno<br>
-			pqr stu vw xyz. A bc<br>
-			def g hij klm nopqrs<br>
-			tuv wxy z. Abc de fg<br>
-			hi jklmno. Pqrstu vw<br>
-
-			<div class="col" style="left: 175px">
-				<br><br><br><br>
-				x yz. Abc def ghi jkl.<br>
-				M nop qrst uv wx yz.<br>
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz. A bc<br>
-				def g hij klm nopqrs<br>
-				tuv wxy z. Abc de fg<br>
-			</div>
-
-			<div class="col" style="left: 350px">
-				<br><br><br><br>
-				hi jklmno. Pqrstu vw<br>
-				x yz. Abc def ghi jkl.<br>
-				M nop qrst uv wx yz.<br>
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz.
-			</div>
-
-			<div class=rep style="width: 490px; top: 0; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An H2 element</div>
-			<div class=rep style="width: 490px; top: 40px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">Another H2 element</div>
-			<div class=gap style="top: 80px; left: 150px"></div>
-			<div class=gap style="top: 80px; left: 325px"></div>
-		</div>
+		<figure>
+			<img src="images/two-spanners-margin-no-collapse.svg" alt="Two spanning elements after a page break">
+			<figcaption>Margins collapse between two spanning elements, but not the bottom margin of a spanner and top margin of next element.</figcaption>
+		</figure>
 	</div>