blob: 9a331d2ba684a3fd00bd928a7bcc5856d8a61a86 [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) :invalid {
background-color: rgb(4, 5, 6);
}
</style>
</head>
<body>
<template id="test-source">
<fieldset class="fieldset1">
</fieldset>
<fieldset class="fieldset2" disabled>
</fieldset>
</template>
<div id="with-renderer"></div>
<div id="without-renderer" style="display:none;"></div>
</body>
<script>
description('Test style update for :invalid applied on a fieldset.');
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([]);
debug('');
debug("Add input1 to fieldset1.");
modifyTree(function(root) {
var input1 = document.createElement('input');
input1.className = 'input1';
root.querySelector('.fieldset1').appendChild(input1);
});
testStyle([]);
debug('');
debug("Disable input1.");
modifyTree(function(root) {
root.querySelector('.input1').setAttribute('disabled', '');
});
testStyle([]);
debug('');
debug("Re-enable input1.");
modifyTree(function(root) {
root.querySelector('.input1').removeAttribute('disabled');
});
testStyle([]);
debug('');
debug("Make input1 readonly.");
modifyTree(function(root) {
root.querySelector('.input1').setAttribute('readonly', '');
});
testStyle([]);
debug('');
debug("Add input2 to fieldset2.");
modifyTree(function(root) {
var input2 = document.createElement('input');
input2.className = 'input2';
root.querySelector('.fieldset2').appendChild(input2);
});
testStyle([]);
debug('');
debug("Disable input2.");
modifyTree(function(root) {
root.querySelector('.input2').setAttribute('disabled', '');
});
testStyle([]);
debug('');
debug("Re-enable input2.");
modifyTree(function(root) {
root.querySelector('.input2').removeAttribute('disabled');
});
testStyle([]);
debug('');
debug("Make input2 readonly.");
modifyTree(function(root) {
root.querySelector('.input2').setAttribute('readonly', '');
});
testStyle([]);
debug('');
debug("Add input3 to fieldset1.");
modifyTree(function(root) {
var input3 = document.createElement('input');
input3.className = 'input3';
input3.setAttribute('required', '');
root.querySelector('.fieldset1').appendChild(input3);
});
testStyle(['fieldset1', 'input3']);
debug('');
debug("Disable input3.");
modifyTree(function(root) {
root.querySelector('.input3').setAttribute('disabled', '');
});
testStyle([]);
debug('');
debug("Re-enable input3.");
modifyTree(function(root) {
root.querySelector('.input3').removeAttribute('disabled');
});
testStyle(['fieldset1', 'input3']);
debug('');
debug("Make input3 readonly.");
modifyTree(function(root) {
root.querySelector('.input3').setAttribute('readonly', '');
});
testStyle([]);
debug('');
debug("Add input4 to fieldset2.");
modifyTree(function(root) {
var input4 = document.createElement('input');
input4.className = 'input4';
input4.setAttribute('required', '');
root.querySelector('.fieldset2').appendChild(input4);
});
testStyle([]);
debug('');
debug("Disable input4.");
modifyTree(function(root) {
root.querySelector('.input4').setAttribute('disabled', '');
});
testStyle([]);
debug('');
debug("Re-enable input4.");
modifyTree(function(root) {
root.querySelector('.input4').removeAttribute('disabled');
});
testStyle([]);
debug('');
debug("Make input4 readonly.");
modifyTree(function(root) {
root.querySelector('.input4').setAttribute('readonly', '');
});
testStyle([]);
// Remove the content otherwise it will appear in the results.
withRenderer.style.display = 'none';
</script>
<script src="../../resources/js-test-post.js"></script>
</html>