186 lines
5.5 KiB
HTML
186 lines
5.5 KiB
HTML
<!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">
|
|
</form>
|
|
<form class="form2">
|
|
<fieldset class="form2-disabled-fieldset" disabled>
|
|
</fieldset>
|
|
</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(['form1', 'form2', 'form2-disabled-fieldset']);
|
|
|
|
debug('');
|
|
debug("Add input1 to form1.");
|
|
modifyTree(function(root) {
|
|
var input1 = document.createElement('input');
|
|
input1.className = 'input1';
|
|
root.querySelector('.form1').appendChild(input1);
|
|
});
|
|
testStyle(['form1', 'input1', 'form2', 'form2-disabled-fieldset']);
|
|
|
|
debug('');
|
|
debug("Add input2 to form1.");
|
|
modifyTree(function(root) {
|
|
var input2 = document.createElement('input');
|
|
input2.className = 'input2';
|
|
input2.setAttribute('required', '');
|
|
root.querySelector('.form1').appendChild(input2);
|
|
});
|
|
testStyle(['input1', 'form2', 'form2-disabled-fieldset']);
|
|
|
|
debug('');
|
|
debug("Add input3 to form1.");
|
|
modifyTree(function(root) {
|
|
var input3 = document.createElement('input');
|
|
input3.className = 'input3';
|
|
input3.setAttribute('required', '');
|
|
input3.value = "valid";
|
|
root.querySelector('.form1').appendChild(input3);
|
|
});
|
|
testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']);
|
|
|
|
debug('');
|
|
debug("Add input4 to form2.");
|
|
modifyTree(function(root) {
|
|
var input4 = document.createElement('input');
|
|
input4.className = 'input4';
|
|
root.querySelector('.form2-disabled-fieldset').appendChild(input4);
|
|
});
|
|
testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']);
|
|
|
|
debug('');
|
|
debug("Add input5 to form2.");
|
|
modifyTree(function(root) {
|
|
var input5 = document.createElement('input');
|
|
input5.className = 'input5';
|
|
input5.setAttribute('required', '');
|
|
root.querySelector('.form2-disabled-fieldset').appendChild(input5);
|
|
});
|
|
testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']);
|
|
|
|
debug('');
|
|
debug("Add input6 to form2.");
|
|
modifyTree(function(root) {
|
|
var input6 = document.createElement('input');
|
|
input6.className = 'input6';
|
|
input6.setAttribute('required', '');
|
|
input6.value = "valid"
|
|
root.querySelector('.form2-disabled-fieldset').appendChild(input6);
|
|
});
|
|
testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']);
|
|
|
|
debug('');
|
|
debug("Enable form2.");
|
|
modifyTree(function(root) {
|
|
root.querySelector('.form2-disabled-fieldset').removeAttribute('disabled');
|
|
});
|
|
testStyle(['input1', 'input3', 'input4', 'input6']);
|
|
|
|
debug('');
|
|
debug("Add the disabled attribute on form1 (forms can't be disabled).");
|
|
modifyTree(function(root) {
|
|
root.querySelector('.form1').setAttribute('disabled', '');
|
|
});
|
|
testStyle(['input1', 'input3', 'input4', 'input6']);
|
|
|
|
debug('');
|
|
debug("Remove input1");
|
|
modifyTree(function(root) {
|
|
var input = root.querySelector('.input1');
|
|
input.parentNode.removeChild(input);
|
|
});
|
|
testStyle(['input1', 'input3', 'input4', 'input6']);
|
|
|
|
debug('');
|
|
debug("Remove input2");
|
|
modifyTree(function(root) {
|
|
var input = root.querySelector('.input2');
|
|
input.parentNode.removeChild(input);
|
|
});
|
|
testStyle(['form1', 'input1', 'input3', 'input4', 'input6']);
|
|
|
|
debug('');
|
|
debug("Remove input3");
|
|
modifyTree(function(root) {
|
|
var input = root.querySelector('.input3');
|
|
input.parentNode.removeChild(input);
|
|
});
|
|
testStyle(['form1', 'input4', 'input6']);
|
|
|
|
debug('');
|
|
debug("Remove input4");
|
|
modifyTree(function(root) {
|
|
var input = root.querySelector('.input4');
|
|
input.parentNode.removeChild(input);
|
|
});
|
|
testStyle(['form1', 'input6']);
|
|
|
|
debug('');
|
|
debug("Remove input5");
|
|
modifyTree(function(root) {
|
|
var input = root.querySelector('.input5');
|
|
input.parentNode.removeChild(input);
|
|
});
|
|
testStyle(['form1', 'form2', 'form2-disabled-fieldset', 'input6']);
|
|
|
|
debug('');
|
|
debug("Remove input6");
|
|
modifyTree(function(root) {
|
|
var input = root.querySelector('.input6');
|
|
input.parentNode.removeChild(input);
|
|
});
|
|
testStyle(['form1', 'form2', 'form2-disabled-fieldset']);
|
|
|
|
|
|
// Remove the content otherwise it will appear in the results.
|
|
withRenderer.style.display = 'none';
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|