Merge pull request w3c#208 from ewilligers/fix-motion-examples

Jihye Hong · svgeesus · commit d917c2ae3d7e · 2017-08-03T09:24:58.000+09:00
[motion-1] Minor corrections to examples
diff --git a/motion-1/Overview.bs b/motion-1/Overview.bs
@@ -269,6 +269,7 @@ Values have the following meanings:
 
           offset-position: 20% 20%;
           offset-distance: 0%;
+          offset-rotate: 0deg;
           offset-anchor: 200% -300%;
         }
         #blueBox {
@@ -923,23 +924,23 @@ This example shows boxes centered at their offset-position.
 		}
 		#item1 {
 			offset-position: 90% 20%;
-			width: 60;
-			height: 20;
+			width: 60%;
+			height: 20%;
 		}
 		#item2 {
 			offset-position: 100% 100%;
-			width: 30;
-			height: 10;
+			width: 30%;
+			height: 10%;
 		}
 		#item3 {
 			offset-position: 50% 100%;
-			width: 20;
-			height: 60;
+			width: 20%;
+			height: 60%;
 		}
 		#item4 {
 			offset-position: 0% 100%;
-			width: 30;
-			height: 90;
+			width: 30%;
+			height: 90%;
 		}
 	&lt;/style>
 	&lt;body>
@@ -971,23 +972,23 @@ This example shows how offset-anchor computes to their offset-position.
 		}
 		#item1 {
 			offset-position: 90% 20%;
-			width: 60;
-			height: 20;
+			width: 60%;
+			height: 20%;
 		}
 		#item2 {
 			offset-position: 100% 100%;
-			width: 30;
-			height: 10;
+			width: 30%;
+			height: 10%;
 		}
 		#item3 {
 			offset-position: 50% 100%;
-			width: 20;
-			height: 60;
+			width: 20%;
+			height: 60%;
 		}
 		#item4 {
 			offset-position: 0% 100%;
-			width: 30;
-			height: 90;
+			width: 30%;
+			height: 90%;
 		}
 	&lt;/style>
 	&lt;body>
@@ -1115,8 +1116,9 @@ The computed value of <<angle>> is added to the computed value of ''auto'' or ''
 		}
 		.circle {
 			offset-position: 150px 150px;
-			width: 50px;
-			height: 50px;
+			offset-distance: 86%;
+			width: 42px;
+			height: 42px;
 			background-color: mediumpurple;
 			border-radius: 50%;
 			display: flex;
@@ -1125,32 +1127,26 @@ The computed value of <<angle>> is added to the computed value of ''auto'' or ''
 		}
 		#item1 {
 			offset-path: ray(0deg closest-side);
-			offset-distance: 90%;
 			offset-rotate: auto 90deg;
 		}
 		#item2 {
 			offset-path: ray(45deg closest-side);
-			offset-distance: 90%;
 			offset-rotate: auto 90deg;
 		}
 		#item3 {
 			offset-path: ray(135deg closest-side);
-			offset-distance: 90%;
 			offset-rotate: auto -90deg;
 		}
 		#item4 {
 			offset-path: ray(180deg closest-side);
-			offset-distance: 90%;
 			offset-rotate: auto -90deg;
 		}
 		#item5 {
 			offset-path: ray(225deg closest-side);
-			offset-distance: 90%;
 			offset-rotate: reverse 90deg;
 		}
 		#item6 {
 			offset-path: ray(-45deg closest-side);
-			offset-distance: 90%;
 			offset-rotate: reverse -90deg;
 		}
 	&lt;/style>
