<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1170781
-->
<head>
<meta charset="utf-8">
<title>Test that 'contain: paint' updates 'display' correctly</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="property_database.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<div id="test" style="contain: paint"></div>
<script>
// This mapping is currently mostly based off of a bugzilla comment by Tab
// Atkins Jr. in bug 1179349. Ultimately, it should be based on a
// specification.
// XXX 'ruby[-*]' and 'run-in' might need to be added here.
var expectedChanges = {
'inline' : 'inline-block',
};
var displayInfo = gCSSProperties["display"];
var test = document.getElementById('test');
var displayVals = displayInfo.initial_values.concat(displayInfo.other_values);
for (dispVal of displayVals) {
test.style.display = dispVal;
if (expectedChanges.hasOwnProperty(dispVal)) {
is(getComputedStyle(test).display, expectedChanges[dispVal],
`'contain: paint' should change 'display: ${dispVal}' to ` +
`'display: ${expectedChanges[dispVal]}'`);
} else {
is(getComputedStyle(test).display, dispVal,
`'contain: paint' should not change 'display: ${dispVal}'`);
}
}
</script>
</body>
</html>