:read-write test cases

by CyberAP

HTML

<div class="tests">
  <div class="test">
    <div class="title">
      Contenteditable
    </div>
    <div contenteditable>
    </div>
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Typeless input
    </div>
    <input />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Textarea
    </div>
    <textarea></textarea>
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Text
    </div>
    <input type="text" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Date
    </div>
    <input type="date" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Datetime
    </div>
    <input type="datetime" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Datetime-local
    </div>
    <input type="datetime-local" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Number
    </div>
    <input type="number" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Email
    </div>
    <input type="email" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Password
    </div>
    <input type="password" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Tel
    </div>
    <input type="tel" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Month
    </div>
    <input type="month" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Search
    </div>
    <input type="search" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
      Time
    </div>
    <input type="time" />
    <div class="result"></div>
  </div>
  <div class="test">
    <div class="title">
...

CSS

.tests
{
  max-width: 300px;
}

.test
{
  display: flex;
  align-items: center;
  margin: 10px 0;
  position: relative;
}

.title
{
  position: absolute;
  right: 0;
  top: 0;
}

.result
{
  background: red;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: auto;
  order: -1;
  margin-right: 10px;
}

:read-write + .result
{
  background: green;
}

:read-only + .result
{
  box-shadow: 0 0 0 2px blue;
}

:-moz-read-write + .result
{
  background: orange;
}

:-moz-read-only + .result
{
  box-shadow: 0 0 0 2px purple;
}

/* Select text-only elements */

:read-write
{
  border: 1px solid green;
  background: #eee;
  min-width: 16px;
  min-height: 16px;
}

:-moz-read-write
{
  border: 1px solid green;
  background: #eee;
  min-width: 16px;
  min-height: 16px;
}

input[readonly],
input[type=date],
input[type=time],
textarea
{
  border: 1px solid green;
  background: #eee;
  min-width: 16px;
  min-height: 16px;
}