92 lines
2.5 KiB
HTML
92 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
target {
|
|
color: black;
|
|
}
|
|
trigger[style] ~ target {
|
|
color: pink;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<!-- With renderer -->
|
|
<trigger></trigger>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<target></target>
|
|
</div>
|
|
<div style="display:none;">
|
|
<!-- Without renderer -->
|
|
<trigger></trigger>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<target></target>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
|
|
description('Test that style invalidation through inline-style propagates correctly to siblings when a combinator requires it.');
|
|
|
|
function testTargetColor(expectedColor) {
|
|
let allTargets = document.querySelectorAll("target");
|
|
for (let i = 0; i < allTargets.length; ++i) {
|
|
shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[' + i + ']).color', expectedColor);
|
|
}
|
|
}
|
|
|
|
testTargetColor('rgb(0, 0, 0)');
|
|
|
|
// Set a style through CSS OM.
|
|
function setPropertyWithCSSOM() {
|
|
let allTriggers = document.querySelectorAll("trigger");
|
|
for (let i = 0; i < allTriggers.length; ++i) {
|
|
allTriggers[i].style.cursor = "auto";
|
|
}
|
|
}
|
|
setPropertyWithCSSOM()
|
|
testTargetColor('rgb(255, 192, 203)');
|
|
|
|
// If we remove the attribute, we should be back to normal.
|
|
function removeStyleAttribute() {
|
|
let allTriggers = document.querySelectorAll("trigger");
|
|
for (let i = 0; i < allTriggers.length; ++i) {
|
|
allTriggers[i].removeAttribute("style");
|
|
}
|
|
}
|
|
removeStyleAttribute();
|
|
testTargetColor('rgb(0, 0, 0)');
|
|
|
|
// Setting the style through a style attribute directly.
|
|
function setStyleAttribute() {
|
|
let allTriggers = document.querySelectorAll("trigger");
|
|
for (let i = 0; i < allTriggers.length; ++i) {
|
|
allTriggers[i].setAttribute("style", "alt: \"WebKit!\"");
|
|
}
|
|
}
|
|
setStyleAttribute();
|
|
testTargetColor('rgb(255, 192, 203)');
|
|
|
|
// Removing the property on the style attribute through CSSOM.
|
|
// This leaves an empty style attribute.
|
|
function removePropertyWithCSSOM() {
|
|
let allTriggers = document.querySelectorAll("trigger");
|
|
for (let i = 0; i < allTriggers.length; ++i) {
|
|
allTriggers[i].style.removeProperty("alt");
|
|
}
|
|
}
|
|
removePropertyWithCSSOM()
|
|
testTargetColor('rgb(255, 192, 203)');
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|