Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: tsan
- Manifest: layout/reftests/svg/reftest.list
<!doctype html>
<!--
The masked element is moved by its sibling's margin, never by anything that
invalidates its own display item, and ends up back where it started. The mask
blob is re-recorded at the middle position, whose sub-pixel residual differs
from the resting one while rounding to the same device pixel; the mask must
still be drawn where the reference draws it.
-->
<html class="reftest-wait" reftest-zoom="1.25">
<head>
<meta charset="utf-8">
<style>
html, body { margin: 0; background: white; }
.bar { display: flex; margin-left: 100px; }
.slider { flex-shrink: 0; width: 40px; height: 40px; margin-left: -20px; }
.marker {
flex-shrink: 0;
width: 36px;
height: 40px;
background: black;
mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><rect width='20' height='20' fill='black'/></svg>");
mask-size: 20px 20px;
mask-position: calc(50% + 1px) 50%;
mask-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bar">
<div class="slider"></div>
<div class="marker"></div>
</div>
<script>
const slider = document.querySelector('.slider');
const settle = async () => {
await new Promise(r => setTimeout(r, 0));
await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
};
// Device scale is 1.25, so the marker rests on an integer device pixel and
// these offsets shift it by +2 and +0.4 device pixels respectively.
(async () => {
slider.style.marginLeft = '-18.4px';
await settle();
slider.style.marginLeft = '-19.68px';
await settle();
slider.style.marginLeft = '';
await settle();
document.documentElement.classList.remove('reftest-wait');
})();
</script>
</body>
</html>