115 lines
3.0 KiB
JavaScript
115 lines
3.0 KiB
JavaScript
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('input');
|
|
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 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, 'disabledColor');
|
|
el.disabled = false;
|
|
shouldBe(elBackground, 'invalidColor');
|
|
|
|
debug('Change readOnly:');
|
|
el = makeInvalid();
|
|
el.readOnly = true;
|
|
shouldBe(elBackground, 'normalColor');
|
|
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 DOM attribute for a focused text field:');
|
|
el = makeInvalid();
|
|
el.focus();
|
|
el.value = 'abc';
|
|
shouldBe(elBackground, 'validColor');
|
|
|
|
debug('Change the value by key input:');
|
|
el = makeInvalid();
|
|
el.focus();
|
|
eventSender.keyDown('a');
|
|
shouldBe(elBackground, 'validColor');
|
|
eventSender.keyDown('\x08', []);
|
|
shouldBe(elBackground, 'invalidColor');
|
|
|
|
// --------------------------------
|
|
// Constraints change
|
|
// --------------------------------
|
|
debug('Change required:');
|
|
el = makeInvalid();
|
|
el.required = false;
|
|
shouldBe(elBackground, 'validColor');
|
|
el.required = true;
|
|
shouldBe(elBackground, 'invalidColor');
|
|
|
|
debug('Change pattern:');
|
|
el = makeInvalid();
|
|
el.value = 'abc';
|
|
shouldBe(elBackground, 'validColor');
|
|
el.pattern = 'a..c';
|
|
shouldBe(elBackground, 'invalidColor');
|
|
el.pattern = 'a.c';
|
|
shouldBe(elBackground, 'validColor');
|
|
|
|
debug('Change step:');
|
|
el = makeInvalid();
|
|
el.value = '1';
|
|
el.type = 'number';
|
|
shouldBe(elBackground, 'validColor');
|
|
el.step = '2';
|
|
shouldBe(elBackground, 'invalidColor');
|
|
el.step = '0.5';
|
|
shouldBe(elBackground, 'validColor');
|