✨amp-experiment: Base functionality for Demo

examples/experiment-1.0.amp.html

@@ -24,6 +24,7 @@ <h1>Title TBD</h1>
     <script type="application/json">
       {
         "background-color-test": {
+          "consentNotificationId": "amp-user-notification",
           "variants": {
             "yellow": {
               "weight": 50,
@@ -32,72 +33,43 @@ <h1>Title TBD</h1>
                   "type": "attributes",
                   "target": "h1",
                   "attributeName": "style",
-                  "value": "color: yellow"
+                  "value": "background-color: #FFFF00"
                 }
               ]
             },
-            "green": {
+            "red": {
               "weight": 50,
               "mutations": [
                 {
                   "type": "attributes",
                   "target": "h1",
                   "attributeName": "style",
-                  "value": "color: green"
+                  "value": "background-color: #FF0000"
                 }
               ]
             }
           }
         },
-        "font-color-test": {
+        "text-content-test": {
           "sticky": false,
           "variants": {
-            "blue": {
-              "weight": 20,
-              "mutations": [
-                {
-                  "type": "attributes",
-                  "target": "h1",
-                  "attributeName": "style",
-                  "value": "color: blue"
-                }
-              ]
-            },
-            "red": {
-              "weight": 20,
-              "mutations": [
-                {
-                  "type": "attributes",
-                  "target": "h1",
-                  "attributeName": "style",
-                  "value": "color: red"
-                }
-              ]
-            }
-          }
-        },
-        "border-test": {
-          "consentNotificationId": "amp-user-notification",
-          "variants": {
-            "solid": {
+            "firstVariant": {
               "weight": 50,
               "mutations": [
                 {
-                  "type": "attributes",
+                  "type": "characterData",
                   "target": "h1",
-                  "attributeName": "style",
-                  "value": "border: 1px black solid"
+                  "value": "First characterData Variant"
                 }
               ]
             },
-            "dashed": {
+            "secondVariant": {
               "weight": 50,
               "mutations": [
                 {
-                  "type": "attributes",
+                  "type": "characterData",
                   "target": "h1",
-                  "attributeName": "style",
-                  "value": "border: 1px black dashed"
+                  "value": "Second characterData Variant"
                 }
               ]
             }
@@ -106,11 +78,11 @@ <h1>Title TBD</h1>
       }
     </script>
   </amp-experiment>
-  <amp-pixel src="https://donot.worry/?background-color-test=VARIANT(background-color-test)&font-color-test=VARIANT(font-color-test)&variants=VARIANTS"></amp-pixel>
+  <amp-pixel src="https://donot.worry/?background-color-test=VARIANT(background-color-test)&text-content-test=VARIANT(text-content-test)&variants=VARIANTS"></amp-pixel>
   <amp-user-notification
       layout=nodisplay
       id="amp-user-notification">
-    Dismiss this notification to see a border around title on your next visit.
+    Dismiss this notification to see a background-color on the title on your next visit.
     <button on="tap:amp-user-notification.dismiss" role="button">I accept</button>
   </amp-user-notification>
 </body>

extensions/amp-experiment/1.0/mutation-parser.js

@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
+import {assertHttpsUrl} from '../../../src/url';
 import {isObject} from '../../../src/types';
-import {userAssert} from '../../../src/log';
+import {user, userAssert} from '../../../src/log';
+
+const TAG = 'amp-experiment mutation-parser';
 
 /**
  * Types of possibile mutations
@@ -28,6 +31,34 @@ const MUTATION_TYPES = [
   'childList',
 ];
 
+const SUPPORTED_ATTRIBUTES = {
+  style: value => {
+
+    // Do not allow Important or HTML Comments
+    if (value.match(/(!\s*important|<!--)/g)) {
+      return false;
+    }
+
+    // Allow Color
+    if (value.match(/^color:\s*#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3});?$/g)) {
+      return true;
+    }
+
+    // Allow Background color
+    if (value.match(/^background-color:\s*#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3});?$/g)) {
+      return true;
+    }
+
+    return false;
+  },
+  src: value => {
+    return assertHttpsUrl(value, 'attributes', 'mutation');
+  },
+  href: value => {
+    return assertHttpsUrl(value, 'attributes', 'mutation');
+  },
+};
+
 /**
  * Function to find all selectors of the mutation
  * and return a function to apply the identified
@@ -40,26 +71,39 @@ export function parseMutation(mutation, document) {
 
   const mutationRecord = assertMutationRecord(mutation);
 
-  setSelectorToElement('target', mutationRecord, document);
+  const stringifiedMutation = JSON.stringify(mutation);
 
-  // TODO (torch2424): Remove this NOOP after reviews
-  // This is done to allow for small PRS
-  const noopFunction = () => {};
+  setSelectorToElement('target', mutationRecord, document);
 
   if (mutationRecord['type'] === 'attributes') {
-    // NOOP for small PRs
-    // TODO (torch2424): Be sure to validate supported
-    // attributes (e.g style), and their values for
-    // security, and AMP validation (position: fixed).
-    return noopFunction;
+
+    assertAttributeMutation(mutationRecord, stringifiedMutation);
+
+    return () => {
+      mutationRecord['targetElement'].setAttribute(
+          mutationRecord['attributeName'],
+          mutationRecord['value']
+      );
+    };
   } else if (mutationRecord['type'] === 'characterData') {
-    // NOOP for small PRs
-    return noopFunction;
+
+    assertCharacterDataMutation(mutationRecord, stringifiedMutation);
+
+    return () => {
+      mutationRecord['targetElement'].textContent = mutationRecord['value'];
+    };
   } else {
     // childList type of mutation
 
-    // NOOP for small PRs
-    return noopFunction;
+    user().error(
+        TAG,
+        'childList mutations not supported ' +
+      'in the current experiment state.'
+    );
+
+    // TODO (torch2424): Remove this NOOP after reviews
+    // This is done to allow for small(er) PRS
+    return () => {};
   }
 }
 
@@ -121,5 +165,64 @@ function setSelectorToElement(selectorKey, mutationRecord, document) {
       mutationRecord[selectorKey]
   );
 
-  mutationRecord[selectorKey] = targetElement;
+  mutationRecord[selectorKey + 'Element'] = targetElement;
+}
+
+/**
+ * Function to assert allowing setting the textContent
+ * of a node.
+ * @param {!Object} mutationRecord
+ * @param {string} stringifiedMutation
+ */
+function assertAttributeMutation(mutationRecord, stringifiedMutation) {
+  // Assert the mutation value
+  userAssert(
+      mutationRecord['value'] !== undefined &&
+    typeof mutationRecord['value'] === 'string',
+      'Mutation %s must have a value.',
+      stringifiedMutation
+  );
+
+  // Assert mutation attributeName
+  userAssert(
+      mutationRecord['attributeName'] !== undefined &&
+    typeof mutationRecord['attributeName'] === 'string',
+      'Mutation %s must have a attributeName.',
+      stringifiedMutation
+  );
+
+  const supportedAttributeKeys =
+    Object.keys(SUPPORTED_ATTRIBUTES);
+
+  // Assert the mutation attribute is one of the following keys
+  userAssert(
+      supportedAttributeKeys.indexOf(mutationRecord['attributeName']) >= 0,
+      'Mutation %s has an unsupported attributeName.',
+      stringifiedMutation
+  );
+
+  // Assert the mutation attribute passes it's check
+  userAssert(
+      SUPPORTED_ATTRIBUTES[mutationRecord['attributeName']](
+          mutationRecord['value']
+      ),
+      'Mutation %s has an an unsupported value.',
+      stringifiedMutation
+  );
+}
+
+/**
+ * Function to assert allowing setting the textContent
+ * of a node.
+ * @param {!Object} mutationRecord
+ * @param {string} stringifiedMutation
+ */
+function assertCharacterDataMutation(mutationRecord, stringifiedMutation) {
+  // Assert the mutation value
+  userAssert(
+      mutationRecord['value'] !== undefined &&
+    typeof mutationRecord['value'] === 'string',
+      'Mutation %s must have a value.',
+      stringifiedMutation
+  );
 }