Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-gaps/flex/flex-gap-decorations-repaint-on-container-shift.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<title>CSS Gap Decorations: repaint when flex container position shifts</title>
<link rel="match" href="flex-gap-decorations-repaint-on-container-shift-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<meta name="assert" content="Flex column-rule gap decorations break at the row-gap intersections after a preceding sibling shifts the container's block position, instead of painting through them.">
<style>
* { margin: 0;}
body { background: #f9fafb; }
.flex {
display: flex; flex-wrap: wrap; width: 100px;
column-gap: 10px; row-gap: 10px;
column-rule: 6px solid blue; column-rule-break: intersection;
}
.flex > div { height: 35px; background: lightgray; }
.w1 { width: 30px; } .w2 { width: 50px; } .w3 { width: 40px; }
</style>
</head>
<body>
<div class="flex">
<div class="w1"></div><div class="w2"></div>
<div class="w3"></div><div class="w1"></div>
<div class="w2"></div><div class="w3"></div>
<div class="w1"></div>
</div>
<script>
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const flex = document.querySelector('.flex');
const spacer = document.createElement('div');
spacer.style.height = '20px';
document.body.insertBefore(spacer, flex);
void document.body.offsetHeight;
document.documentElement.classList.remove("reftest-wait");
});
});
</script>
</body>
</html>