Add DOM fixture for unmasking passwords (#9269)

IE11 and Edge have a password unmask field that React prevents the
display of for controlled inputs. This commit adds DOM fixture
coverage for this test case.

fixtures/dom/src/components/Header.js

@@ -45,6 +45,7 @@ const Header = React.createClass({
               <option value="/range-inputs">Range Inputs</option>
               <option value="/text-inputs">Text Inputs</option>
               <option value="/number-inputs">Number Input</option>
+              <option value="/password-inputs">Password Input</option>
               <option value="/selects">Selects</option>
               <option value="/textareas">Textareas</option>
               <option value="/input-change-events">Input change events</option>

fixtures/dom/src/components/fixtures/index.js

@@ -4,7 +4,8 @@ import TextInputFixtures from './text-inputs';
 import SelectFixtures from './selects';
 import TextAreaFixtures from './textareas';
 import InputChangeEvents from './input-change-events';
-import NumberInputFixtures from './number-inputs/';
+import NumberInputFixtures from './number-inputs';
+import PasswordInputFixtures from './password-inputs';
 import ButtonFixtures from './buttons';
 
 /**
@@ -26,6 +27,8 @@ const FixturesPage = React.createClass({
         return <InputChangeEvents />;
       case '/number-inputs':
         return <NumberInputFixtures />;
+      case '/password-inputs':
+        return <PasswordInputFixtures />;
       case '/buttons':
         return <ButtonFixtures />
       default:

fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js

@@ -0,0 +1,34 @@
+const React = window.React;
+
+import Fixture from '../../Fixture';
+
+const PasswordTestCase = React.createClass({
+  getInitialState() {
+    return { value: '' };
+  },
+  onChange(event) {
+    this.setState({ value: event.target.value })
+  },
+  render() {
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled</legend>
+            <input type="password" value={this.state.value} onChange={this.onChange} />
+            <span className="hint"> Value: {JSON.stringify(this.state.value)}</span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input type="password" defaultValue="" />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  },
+});
+
+export default PasswordTestCase;

fixtures/dom/src/components/fixtures/password-inputs/index.js

@@ -0,0 +1,33 @@
+const React = window.React;
+
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import PasswordTestCase from './PasswordTestCase'
+
+const NumberInputs = React.createClass({
+  render() {
+    return (
+      <FixtureSet title="Password inputs" description="">
+        <TestCase
+          title="The show password icon"
+          description={`
+            Some browsers have an unmask password icon that React accidentally
+            prevents the display of.
+          `}
+          affectedBrowsers="IE Edge, IE 11">
+          <TestCase.Steps>
+            <li>Type any string (not an actual password</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The field should include the "unmasking password" icon.
+          </TestCase.ExpectedResult>
+
+          <PasswordTestCase />
+        </TestCase>
+      </FixtureSet>
+    );
+  },
+});
+
+export default NumberInputs;