<!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 mouseDownOnSelect(selId, index, modifier) {
var sl = document.getElementById(selId);
var itemHeight = Math.floor(sl.offsetHeight / sl.size);
var border = 1;
var y = border + index * itemHeight;
sl.focus();
if (window.eventSender) {
eventSender.mouseMoveTo(sl.offsetLeft + border, sl.offsetTop + y - window.pageYOffset);
eventSender.mouseDown(0, [modifier]);
eventSender.mouseUp(0, [modifier]);
}
}
function makeInvalid() {
var select = document.createElement('select');
select.name = 'foo';
select.required = true;
select.value = '';
form.appendChild(select);
return select;
}
function appendOption(value, select) {
var option = document.createElement('option');
option.value = value;
option.innerText = value;
select.add(option);
return option;
}
function insertOptionBefore(value, select, before) {
var option = document.createElement('option');
option.value = value;
option.innerText = value;
select.add(option, before);
return option;
}
function removeOption(option, select) {
select.remove(option);
return option;
}
function backgroundOf(el) {
if (typeof(el) == 'string')
el = document.getElementById(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 transparentColor = 'rgba(0, 0, 0, 0)';
var validColor = 'rgb(0, 0, 255)';
// --------------------------------
// willValidate change
// --------------------------------
var el = makeInvalid();
var o1 = appendOption('', el);
var o2 = appendOption('X', el);
o1.selected = true;
// Confirm this element is invalid.
debug('Check 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();
o1 = appendOption('', el);
o2 = appendOption('X', el);
o1.selected = true;
el.disabled = true;
shouldBe(elBackground, 'disabledColor');
el.disabled = false;
shouldBe(elBackground, 'invalidColor');
debug('Inside/outside of a form:');
el = makeInvalid();
o1 = appendOption('', el);
o2 = appendOption('X', el);
o1.selected = true;
nonForm.appendChild(el);
shouldBe(elBackground, 'invalidColor');
form.appendChild(el);
shouldBe(elBackground, 'invalidColor');
// --------------------------------
// value change
// --------------------------------
debug('Change the values of select elements without explicit initializing values by clicking:');
form.innerHTML = '<select id="select-multiple" multiple required size="4">' +
' <option id="multiple-empty">empty</option>' +
' <option id="multiple-another">another</option>' +
'</select>' +
'<select id="select-size4" size="4" required>' +
' <option id="size4-empty">empty</option>' +
' <option id="size4-another">another</option>' +
'</select>';
mouseDownOnSelect('select-multiple', 0);
mouseDownOnSelect('select-size4', 0);
shouldBe('backgroundOf("select-multiple")', 'validColor');
shouldBe('backgroundOf("select-size4")', 'validColor');
debug('Change the value with a placeholder label option:');
el = makeInvalid();
o1 = appendOption('', el);
o2 = appendOption('X', el);
o2.selected = true;
shouldBe(elBackground, 'validColor');
o1.selected = true;
shouldBe(elBackground, 'invalidColor');
debug('Change the value without a placeholder label option:');
el = makeInvalid();
o1 = appendOption('X', el);
o2 = appendOption('', el);
o2.selected = true;
shouldBe(elBackground, 'validColor');
o1.selected = true;
shouldBe(elBackground, 'validColor');
debug('Insert/remove options:');
el = makeInvalid();
o1 = appendOption('', el);
o2 = appendOption('X', el);
o1.selected = true;
shouldBe(elBackground, 'invalidColor');
o3 = insertOptionBefore('Y', el, el.firstChild);
shouldBe(elBackground, 'validColor');
removeOption(o3, el);
shouldBe(elBackground, 'invalidColor');
o3 = appendOption('Z', el);
o3.selected = true;
shouldBe(elBackground, 'validColor');
el.length = 2;
shouldBe(elBackground, 'invalidColor');
debug('Set an attribute: multiple:');
el = makeInvalid();
o1 = appendOption('', el);
o2 = appendOption('X', el);
o1.selected = true;
shouldBe(elBackground, 'invalidColor');
el.multiple = true;
shouldBe(elBackground, 'validColor');
el.removeAttribute('multiple');
shouldBe(elBackground, 'invalidColor');
debug('Set an attribute: size:');
el = makeInvalid();
o1 = appendOption('', el);
o2 = appendOption('X', el);
o1.selected = true;
shouldBe(elBackground, 'invalidColor');
el.size = 2;
shouldBe(elBackground, 'validColor');
el.removeAttribute('size');
shouldBe(elBackground, 'invalidColor');
debug('SelectAll:');
el = makeInvalid();
o1 = appendOption('', el);
o2 = appendOption('X', el);
el.multiple = true;
o1.selected = false;
o2.selected = false;
shouldBe(elBackground, 'invalidColor');
el.focus();
document.execCommand("SelectAll");
shouldBe(elBackground, 'validColor');
el.multiple = false;
o1.selected = false;
o2.selected = true;
debug('Reset:');
el = makeInvalid();
o1 = appendOption('', el);
o2 = appendOption('X', el);
o2.selected = true;
shouldBe(elBackground, 'validColor');
form.reset();
shouldBe(elBackground, 'invalidColor');
// --------------------------------
// Constraints change
// --------------------------------
debug('Change required:');
el = makeInvalid();
o1 = appendOption('', el);
o2 = appendOption('X', el);
o1.selected = true;
el.required = false;
shouldBe(elBackground, 'validColor');
el.required = true;
shouldBe(elBackground, 'invalidColor');
</script>
</body>
</html>
Codebase Browser
chromium