blob: c452dd8e9e4845d10532d0b7bb3748ef67974413 [file] [log] [blame]
<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
:matches(#with-renderer, #without-renderer) * {
background-color: rgb(1, 2, 3);
}
:matches(#with-renderer, #without-renderer) :valid {
background-color: rgb(4, 5, 6);
}
</style>
</head>
<body>
<template id="test-source">
<form class="form1">
<div class="div1">
<fieldset class="fieldset1">
<div class="div2">
<input class="input1" required value="valid">
<input class="input2" type="button" required value="valid">
<input class="input3" type="hidden" required value="valid">
<input class="input4" type="email" required value="awesome@webkit.org">
<input class="input5" type="password" required value="valid">
<button class="button1">Base button</button>
<button class="button2" type="submit">Submit button</button>
</div>
</fieldset>
<textarea class="textarea1" required></textarea>
<input class="input6" required>
<input class="input7" type="button" required>
<input class="input8" type="hidden" required>
<input class="input9" type="email" required>
<input class="input10" type="password" required>
<button class="button3">Base button</button>
<button class="button4" type="submit">Submit button</button>
</div>
</form>
</template>
<div id="with-renderer"></div>
<div id="without-renderer" style="display:none;"></div>
</body>
<script>
description('Test style update for :valid applied on a form.');
var withRenderer = document.getElementById("with-renderer");
var withoutRenderer = document.getElementById("without-renderer");
var source = document.getElementById("test-source").content;
withRenderer.appendChild(source.cloneNode(true));
withoutRenderer.appendChild(source.cloneNode(true));
function testStyleAtId(rootId, matchedClass) {
var allElements = document.getElementById(rootId).querySelectorAll('*');
for (var i = 0; i < allElements.length; ++i) {
var expectedStyle = matchedClass.indexOf(allElements[i].className) >= 0 ? 'rgb(4, 5, 6)' : 'rgb(1, 2, 3)';
shouldBeEqualToString('getComputedStyle(document.getElementById("' + rootId + '").querySelector(".' + allElements[i].className + '")).backgroundColor', expectedStyle);
}
}
function testStyle(matchedClass) {
testStyleAtId('with-renderer', matchedClass);
testStyleAtId('without-renderer', matchedClass);
}
function modifyTree(updateFunction) {
updateFunction(withRenderer);
updateFunction(withoutRenderer);
}
debug('');
debug('Initial state');
testStyle(['fieldset1', 'input1', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']);
debug('');
debug("Change the type of input3 to something that validates.");
modifyTree(function(root) {
root.querySelector('.input3').type = "search";
});
testStyle(['fieldset1', 'input1', 'input3', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']);
debug('');
debug("Change the type of input7 to something that validates.");
modifyTree(function(root) {
root.querySelector('.input7').type = "search";
});
testStyle(['fieldset1', 'input1', 'input3', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']);
debug('');
debug("Change the type of input9 to something that does not validate.");
modifyTree(function(root) {
root.querySelector('.input9').type = "hidden";
});
testStyle(['fieldset1', 'input1', 'input3', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']);
debug('');
debug("Change the type of input5 to something that does not validate.");
modifyTree(function(root) {
root.querySelector('.input5').type = "button";
});
testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
// Change everything in the second half of controls without validation, eventually, form1 should validate.
debug('');
debug("Change the type of input6 to something that does not validate.");
modifyTree(function(root) {
root.querySelector('.input6').type = "button";
});
testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
debug('');
debug("Change the type of input7 to something that does not validate.");
modifyTree(function(root) {
root.querySelector('.input7').type = "reset";
});
testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
debug('');
debug("Change the type of input10 to something that does not validate.");
modifyTree(function(root) {
root.querySelector('.input10').type = "reset";
});
testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
debug('');
debug("Disable the text area.");
modifyTree(function(root) {
root.querySelector('.textarea1').setAttribute('disabled', '');
});
testStyle(['form1', 'fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
// Remove the content otherwise it will appear in the results.
withRenderer.style.display = 'none';
</script>
<script src="../../resources/js-test-post.js"></script>
</html>