<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<style>
:invalid { background: rgb(255, 0, 0); }
:valid { background: rgb(0, 255, 0); }
form:invalid input[type=submit] { background-color: rgb(127, 0, 0); }
form:valid input[type=submit] { background-color: rgb(0, 127, 0); }
</style>
</head>
<body>
<script>
description('Check if :valid/:invalid CSS pseudo selectors are lively applied for forms');

function $(id) {
    return document.getElementById(id);
}

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

var invalidColor = 'rgb(255, 0, 0)';
var validColor = 'rgb(0, 255, 0)';
var subInvalidColor = 'rgb(127, 0, 0)';
var subValidColor = 'rgb(0, 127, 0)';

var parent = document.createElement('div');
document.body.appendChild(parent);

debug('Removing and adding required text inputs and modifying their value by a DOM tree mutation:');
parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></form>';
var form1 = $('form1');
var input1 = $('input1');
var input2 = $('input2');
var sub1 = $('sub1');
shouldBe('backgroundOf(form1)', 'invalidColor');
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
shouldBe('form1.removeChild(input1); backgroundOf(form1)', 'validColor');
shouldBe('backgroundOf(sub1)', 'subValidColor');
shouldBe('form1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
shouldBe('input1.setAttribute("value", "a"); backgroundOf(form1)', 'validColor');
shouldBe('backgroundOf(sub1)', 'subValidColor');
shouldBe('input2.setAttribute("value", ""); backgroundOf(form1)', 'invalidColor');
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
debug('')

debug('Disabling and marking inputs readonly by a DOM tree mutation:');
parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></form>';
var form1 = $('form1');
var input1 = $('input1');
var sub1 = $('sub1');
shouldBe('backgroundOf(form1)', 'invalidColor');
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
shouldBe('input1.disabled=1; backgroundOf(form1)', 'validColor');
shouldBe('backgroundOf(sub1)', 'subValidColor');
shouldBe('input1.disabled=0; backgroundOf(form1)', 'invalidColor');
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(form1)', 'validColor');
shouldBe('backgroundOf(sub1)', 'subValidColor');
debug('')

debug('Move element under datalist by a DOM tree mutation:');
parent.innerHTML = '<form id=form1></form><datalist id=dl1></datalist><input type=text id=input1 required form=form1>';
var form1 = $('form1');
var input1 = $('input1');
var dl1 = $('dl1');
shouldBe('backgroundOf(form1)', 'invalidColor');
shouldBe('parent.removeChild(input1); backgroundOf(form1)', 'validColor');
shouldBe('dl1.appendChild(input1); backgroundOf(form1)', 'validColor');
shouldBe('parent.appendChild(input1); backgroundOf(form1)', 'invalidColor');
debug('')

debug('Adding a required text input that is not a direct child of the form:');
parent.innerHTML = '<form id=form1></form>';
var form1 = $('form1');
shouldBe('backgroundOf(form1)', 'validColor');
var div1 = document.createElement('div');
var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('required', '');
form1.appendChild(div1);
shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
debug('');

debug('Render multiple forms and reassign an invalid input from one to another:');
parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value="a"></form>'
    + '<form id=form2><input type=text id=input3><input type=text id=input4 required value="a"></form>'
    + '<form id=form3></form>';
shouldBe('backgroundOf($("form1"))', 'invalidColor');
shouldBe('backgroundOf($("form2"))', 'validColor');
shouldBe('backgroundOf($("form3"))', 'validColor');
var input1 = $('input1');
input1.setAttribute("form", "form3");
shouldBe('backgroundOf($("form1"))', 'validColor');
shouldBe('backgroundOf($("form3"))', 'invalidColor');
debug('');

debug('Ensure that invalid event was not triggered on style evaluation:');
var val = '0';
parent.innerHTML = '<form id=form1><input type=text id=input1 required oninvalid="val=\'1\';"></form>';
var form1 = $('form1');
shouldBe('backgroundOf(form1)', 'invalidColor');
shouldBeEqualToString('val', '0');
shouldBeEqualToString('form1.checkValidity(); val', '1');
debug('');

parent.innerHTML = '';
</script>
</body>
</html>