Blitz - WPT: flex-gap-decorations-repaint-on-container-shift.html

wpt / css / css-gaps / flex / flex-gap-decorations-repaint-on-container-shift.html

/css/css-gaps/flex/flex-gap-decorations-repaint-on-container-shift.html

<!DOCTYPE html>
<html class="reftest-wait">
<head>
  <title>CSS Gap Decorations: repaint when flex container position shifts</title>
  <link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
  <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>

/css/css-gaps/flex/flex-gap-decorations-repaint-on-container-shift-ref.html

<!DOCTYPE html>
<html>
<head>
  <title>CSS Gap Decorations: repaint when flex container position shifts (reference)</title>
  <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
  <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 style="height: 20px;"></div>
<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>
</body>
</html>