textarea-live-pseudo-selectors.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../resources/live-pseudo-selectors.css">
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("This test performs a check that :valid/:invalid CSS psudo selectors are lively applied.");

// Setup for static elements.
var form = document.createElement('form');
document.body.appendChild(form);
var nonForm = document.createElement('div');
document.body.appendChild(nonForm);

function makeInvalid() {
    var i = document.createElement('textarea');
    i.name = 'foo';
    i.required = true;
    i.value = '';
    form.appendChild(i);
    return i;
}

function backgroundOf(el) {
    return document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color');
}

var elBackground = 'backgroundOf(el)';
var invalidColor = 'rgb(255, 0, 0)';
var normalColor = 'rgb(255, 255, 255)';
var disabledColor = 'rgb(0, 0, 0)';
var readOnlyColor = 'rgb(0, 255, 0)';
var validColor = 'rgb(0, 0, 255)';

// --------------------------------
//     willValidate change
// --------------------------------
var el = makeInvalid();
// Confirm this element is invalid.
debug('Chheck the initial state:');
shouldBe(elBackground, 'invalidColor');

debug('Change name:');
el.name = '';
shouldBe(elBackground, 'invalidColor');
el.name = 'bar';
shouldBe(elBackground, 'invalidColor');

debug('Change disabled:');
el = makeInvalid();
el.disabled = true;
shouldBe(elBackground, 'readOnlyColor');
el.disabled = false;
shouldBe(elBackground, 'invalidColor');

debug('Change readOnly:');
el = makeInvalid();
el.readOnly = true;
shouldBe(elBackground, 'readOnlyColor');
el.readOnly = false;
shouldBe(elBackground, 'invalidColor');

debug('Inside/outside of a form:');
el = makeInvalid();
nonForm.appendChild(el);
shouldBe(elBackground, 'invalidColor');
form.appendChild(el);
shouldBe(elBackground, 'invalidColor');

// --------------------------------
//     value change
// --------------------------------
debug('Change the value by DOM attribute:');
el = makeInvalid();
el.value = 'abc';
shouldBe(elBackground, 'validColor');
el.value = '';
shouldBe(elBackground, 'invalidColor');

debug('Change the value by key input:');
el = makeInvalid();
el.focus();
eventSender.keyDown('a');
shouldBe(elBackground, 'validColor');
eventSender.keyDown('Backspace', []);
shouldBe(elBackground, 'invalidColor');

// --------------------------------
//     Constraints change
// --------------------------------
debug('Change required:');
el = makeInvalid();
el.required = false;
shouldBe(elBackground, 'validColor');
el.required = true;
shouldBe(elBackground, 'invalidColor');

debug('Change maxlength:');
el = makeInvalid();
el.value = '1234567890';
shouldBe(elBackground, 'validColor');
// Make the value dirty by deleting the last character.
el.focus();
el.setSelectionRange(10, 10);
eventSender.keyDown('Backspace');
el.maxLength = 5;
shouldBe(elBackground, 'invalidColor');
el.maxLength = 10;
shouldBe(elBackground, 'validColor');
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/textarea/textarea-live-pseudo-selectors.html
