[css-grid] Add images.

tabatkins · tabatkins · commit 2667e1f7acd6 · 2014-01-15T17:13:14.000-08:00
diff --git a/css-grid/images/abspos-grid.svg b/css-grid/images/abspos-grid.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 702 402">
+	<style>
+		text { font-family: sans-serif; font-size: 16px; }
+	</style>
+	<rect width="700" height="400" fill="#f8f8f8" stroke="silver" stroke-width="3" />
+	<g transform="translate(60.5, 0.5)">
+		<rect width="580" height="399.5" fill="transparent" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="145" x2="145" y1="0" y2="100%" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="290" x2="290" y1="0" y2="100%" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="435" x2="435" y1="0" y2="100%" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="0" x2="580" y1="100" y2="100" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="0" x2="580" y1="200" y2="200" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="0" x2="580" y1="300" y2="300" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+	</g>
+	<g transform="translate(350.5, 0.5)">
+		<rect width="349.5" height="200" fill="transparent" stroke="orange" stroke-width="2" />
+		<rect x="100" y="70" height="90" width="220" fill="hsl(220, 80%, 90%)" stroke="hsl(220, 80%, 65%)" stroke-width="3" />
+		<line x1="210" x2="210" y1="0" y2="68" stroke="orange" stroke-width="3" stroke-dasharray="5 3"/>
+		<path d="M 210 0 l 7 10 h -14 z" fill="orange" />
+		<path d="M 210 69 l 7 -10 h -14 z" fill="orange" />
+		<line x1="210" x2="210" y1="162" y2="200" stroke="orange" stroke-width="3" stroke-dasharray="5 3"/>
+		<path d="M 210 161 l 7 10 h -14 z" fill="orange" />
+		<path d="M 210 200 l 7 -10 h -14 z" fill="orange" />
+		<line x1="0" x2="98" y1="115" y2="115" stroke="orange" stroke-width="3" stroke-dasharray="5 3" />
+		<path d="M 0 115 l 10 7 v -14 z" fill="orange" />
+		<path d="M 99 115 l -10 7 v -14 z" fill="orange" />
+		<line x1="322" x2="350" y1="115" y2="115" stroke="orange" stroke-width="3" stroke-dasharray="5 3" />
+		<path d="M 321 115 l 10 7 v -14 z" fill="orange" />
+		<path d="M 350 115 l -10 7 v -14 z" fill="orange" />
+		<text x="10" y="190" fill="orange">containing block</text>
+		<text x="210" y="120" text-anchor="middle" fill="hsl(220, 80%, 65%)">abspos</text>
+		<text x="50" y="132" text-anchor="middle" fill="orange">offset</text>
+	</g>
+	<rect x="10" width="60" y="375" height="18" fill="#f8f8f8" />
+	<text x="10" y="390" fill="gray">grid container</text>
+	<text x="70" y="290">grid</text>
+
+</svg>
diff --git a/css-grid/images/align-justify-content.svg b/css-grid/images/align-justify-content.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 352 252">
+	<style>
+		text { font-family: sans-serif; font-size: 16px; }
+	</style>
+	<rect width="350" height="250" fill="#f8f8f8" stroke="silver" stroke-width="3" />
+	<g transform="translate(60, 25.5)">
+		<rect width="290" height="199.5" fill="transparent" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="72" x2="72" y1="0" y2="200" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="145" x2="145" y1="0" y2="200" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="218" x2="218" y1="0" y2="200" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="0" x2="290" y1="50" y2="50" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="0" x2="290" y1="100" y2="100" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<line x1="0" x2="290" y1="150" y2="150" stroke="#000" stroke-width="1" stroke-dasharray="5 3" />
+		<text x="10" y="190">grid</text>
+	</g>
+	<text x="10" y="240" fill="gray">grid container</text>
+</svg>
