115 lines
3.3 KiB
HTML
115 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Overflow: Test scrollbar-gutter reflow counts</title>
|
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1746098">
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<style>
|
|
#target {
|
|
inline-size: 200px;
|
|
block-size: 100px;
|
|
background: lightgray;
|
|
overflow: auto;
|
|
}
|
|
|
|
#targetChild {
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
background: orange;
|
|
}
|
|
</style>
|
|
|
|
<p>Here is a scroll contaier for testing:</p>
|
|
<div id="target">
|
|
<div id="targetChild"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let gUtils = SpecialPowers.getDOMWindowUtils(window);
|
|
let gTarget = document.getElementById("target");
|
|
let gTargetChild = document.getElementById("targetChild");
|
|
|
|
function getReflowCount()
|
|
{
|
|
document.documentElement.offsetHeight; // flush layout
|
|
return gUtils.framesReflowed;
|
|
}
|
|
|
|
function cleanUp() {
|
|
gTarget.style.writingMode = "";
|
|
gTarget.style.scrollbarGutter = "";
|
|
gTargetChild.style.blockSize = "";
|
|
}
|
|
|
|
function tweakStyleAndCountReflows(aAddStyle, aAddScrollbarGutter)
|
|
{
|
|
let beforeCount = getReflowCount();
|
|
if (aAddScrollbarGutter) {
|
|
gTarget.style.scrollbarGutter = "stable";
|
|
}
|
|
aAddStyle();
|
|
let afterCount = getReflowCount();
|
|
cleanUp();
|
|
|
|
let numReflows = afterCount - beforeCount;
|
|
assert_greater_than(numReflows, 0, "We should've reflowed *something* after changing styles:");
|
|
return numReflows;
|
|
}
|
|
|
|
let gTestCases = [
|
|
{
|
|
name : "Enlarge the child's block-size to 200%",
|
|
addStyle : function () {
|
|
gTargetChild.style.blockSize = "200%";
|
|
},
|
|
},
|
|
{
|
|
name : "Enlarge the child's block-size to 300px",
|
|
addStyle : function () {
|
|
gTargetChild.style.blockSize = "300px";
|
|
},
|
|
},
|
|
{
|
|
name : "Enlarge the child's block-size to 200% in a vertical-lr scroll container",
|
|
addStyle : function () {
|
|
gTarget.style.writingMode = "vertical-lr";
|
|
gTargetChild.style.blockSize = "200%";
|
|
},
|
|
},
|
|
{
|
|
name : "Enlarge the child's block-size to 300px in a vertical-lr scroll container",
|
|
addStyle : function () {
|
|
gTarget.style.writingMode = "vertical-lr";
|
|
gTargetChild.style.blockSize = "300px";
|
|
},
|
|
},
|
|
{
|
|
name : "Enlarge the child's block-size to 200% in a vertical-rl scroll container",
|
|
addStyle : function () {
|
|
gTarget.style.writingMode = "vertical-rl";
|
|
gTargetChild.style.blockSize = "200%";
|
|
},
|
|
},
|
|
{
|
|
name : "Enlarge the child's block-size to 300px in a vertical-rl scroll container",
|
|
addStyle : function () {
|
|
gTarget.style.writingMode = "vertical-rl";
|
|
gTargetChild.style.blockSize = "300px";
|
|
},
|
|
},
|
|
];
|
|
|
|
for (let testcase of gTestCases) {
|
|
test(function () {
|
|
let numTestReflows = tweakStyleAndCountReflows(testcase.addStyle, true);
|
|
let numReferenceReflows = tweakStyleAndCountReflows(testcase.addStyle, false);
|
|
assert_less_than(numTestReflows, numReferenceReflows,
|
|
"A scroll container with 'scrollbar-gutter:stable' should have less reflow counts:");
|
|
}, testcase.name)
|
|
}
|
|
</script>
|
|
</html>
|