diff --git a/examples/01-simple.html b/examples/01-simple.html
index c03d59c..b5e9fd8 100644
--- a/examples/01-simple.html
+++ b/examples/01-simple.html
@@ -24,6 +24,11 @@ <h3>Color</h3>
                     <select ng-model="options.format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
                 </div>
 
+                <div class="row">
+                    <label class="control-label">Restrict To Format (restrictToFormat) - whether or not to restrict typing of the color to the selected format</label>
+                    <select ng-model="options.restrictToFormat" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
+                </div>
+
                 <div class="row">
                     <label class="control-label">Hue (hue) - whether or not to display the hue control</label>
                     <select ng-model="options.hue" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
@@ -116,8 +121,8 @@ <h3>Attributes</h3>
                 </div>
 
                 <div class="row">
-                    <label class="control-label">Input Class (input_class)</label>
-                    <input type="text" ng-model="options.input_class" placeholder="Input Class" class="form-control" />
+                    <label class="control-label">Input Class (inputClass)</label>
+                    <input type="text" ng-model="options.inputClass" placeholder="Input Class" class="form-control" />
                 </div>
 
                 <h3>Show/Hide</h3>
diff --git a/test/e2e/hide.protractor.js b/test/e2e/hide.protractor.js
index cc59108..4589657 100644
--- a/test/e2e/hide.protractor.js
+++ b/test/e2e/hide.protractor.js
@@ -10,7 +10,7 @@ describe('Options: ', () => {
         it('Should hide when clicking the swatch by default', () => {
             Page.input_field.click();
             expect(Page.color_picker_panel.isDisplayed()).toEqual(true);
-            browser.driver.executeScript('document.activeElement.blur()');
+            Page.blurColorPicker();
             expect(Page.color_picker_panel.isDisplayed()).toEqual(false);
         });
 
@@ -18,7 +18,7 @@ describe('Options: ', () => {
             Page.hide_blur_field.$('[label="No"]').click();
             Page.input_field.click();
             expect(Page.color_picker_panel.isDisplayed()).toEqual(true);
-            browser.driver.executeScript('document.activeElement.blur()');
+            Page.blurColorPicker();
             expect(Page.color_picker_panel.isDisplayed()).toEqual(true);
         });
 
@@ -26,7 +26,7 @@ describe('Options: ', () => {
             Page.hide_blur_field.$('[label="Yes"]').click();
             Page.input_field.click();
             expect(Page.color_picker_panel.isDisplayed()).toEqual(true);
-            browser.driver.executeScript('document.activeElement.blur()');
+            Page.blurColorPicker();
             expect(Page.color_picker_panel.isDisplayed()).toEqual(false);
         });
     });
diff --git a/test/e2e/input-class.protractor.js b/test/e2e/input-class.protractor.js
index be949ef..98c0ee5 100644
--- a/test/e2e/input-class.protractor.js
+++ b/test/e2e/input-class.protractor.js
@@ -7,31 +7,31 @@ describe('Options: ', () => {
             Page.waitTillPageLoaded();
         });
 
-        it('Should not have an input_class by default', () => {
+        it('Should not have an inputClass by default', () => {
             expect(Page.input_field.getAttribute('class')).toMatch('');
         });
 
-        it('Should update the input_class', () => {
-            let input_class = 'qwerty';
-            Page.input_class_field.clear().sendKeys(input_class);
-            expect(Page.input_field.getAttribute('class')).toMatch(input_class);
+        it('Should update the inputClass', () => {
+            let inputClass = 'qwerty';
+            Page.inputClass_field.clear().sendKeys(inputClass);
+            expect(Page.input_field.getAttribute('class')).toMatch(inputClass);
         });
 
-        it('Should not have an input_class', () => {
-            Page.input_class_field.clear();
+        it('Should not have an inputClass', () => {
+            Page.inputClass_field.clear();
             expect(Page.input_field.getAttribute('class')).toMatch('');
         });
 
-        it('Should update the input_class again', () => {
-            let input_class = 'asdf';
-            Page.input_class_field.clear().sendKeys(input_class);
-            expect(Page.input_field.getAttribute('class')).toMatch(input_class);
+        it('Should update the inputClass again', () => {
+            let inputClass = 'asdf';
+            Page.inputClass_field.clear().sendKeys(inputClass);
+            expect(Page.input_field.getAttribute('class')).toMatch(inputClass);
         });
 
-        it('Should update the input_class again', () => {
-            let input_class = 'zxcv';
-            Page.input_class_field.clear().sendKeys(input_class);
-            expect(Page.input_field.getAttribute('class')).toMatch(input_class);
+        it('Should update the inputClass again', () => {
+            let inputClass = 'zxcv';
+            Page.inputClass_field.clear().sendKeys(inputClass);
+            expect(Page.input_field.getAttribute('class')).toMatch(inputClass);
         });
     });
 });
diff --git a/test/page-object.js b/test/page-object.js
index 410a099..b0ed905 100644
--- a/test/page-object.js
+++ b/test/page-object.js
@@ -6,11 +6,13 @@ class Page {
 
         // attribute fields
         this.id_field = element(by.model('options.id'));
-        this.input_class_field = element(by.model('options.input_class'));
+        this.inputClass_field = element(by.model('options.inputClass'));
         this.name_field = element(by.model('options.name'));
         this.placeholder_field = element(by.model('options.placeholder'));
 
         // color fields
+        this.format_field = element(by.model('options.format'));
+        this.restrict_to_format_field = element(by.model('options.restrictToFormat'));
         this.hue_field = element(by.model('options.hue'));
         this.saturation_field = element(by.model('options.saturation'));
         this.lightness_field = element(by.model('options.lightness'));
@@ -73,6 +75,14 @@ class Page {
     openColorPicker() {
         this.input_field.click();
     }
+
+    closeColorPicker() {
+        this.input_field.sendKeys(protractor.Key.ESCAPE);
+    }
+
+    blurColorPicker() {
+        browser.driver.executeScript('document.activeElement.blur()');
+    }
 }
 
 module.exports = new Page();
diff --git a/test/test.html b/test/test.html
index 30ecb9a..2aa17f4 100644
--- a/test/test.html
+++ b/test/test.html
@@ -24,6 +24,11 @@ <h3>Color</h3>
                     <select ng-model="options.format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
                 </div>
 
+                <div class="row">
+                    <label class="control-label">Restrict To Format (restrictToFormat) - whether or not to restrict typing of the color to the selected format</label>
+                    <select ng-model="options.restrictToFormat" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
+                </div>
+
                 <div class="row">
                     <label class="control-label">Hue (hue) - whether or not to display the hue control</label>
                     <select ng-model="options.hue" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
@@ -116,8 +121,8 @@ <h3>Attributes</h3>
                 </div>
 
                 <div class="row">
-                    <label class="control-label">Input Class (input_class)</label>
-                    <input type="text" ng-model="options.input_class" placeholder="Input Class" class="form-control" />
+                    <label class="control-label">Input Class (inputClass)</label>
+                    <input type="text" ng-model="options.inputClass" placeholder="Input Class" class="form-control" />
                 </div>
 
                 <h3>Show/Hide</h3>