wpt/css/css-gaps/flex/flex-gap-decorations-repaint-on-container-shift.html at master · web-platform-tests/wpt

41 lines (41 loc) · 1.52 KB

<!DOCTYPE html>
<html class="reftest-wait">
  <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.">
    * { 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; }
<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>
  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");

Navigation Menu

Uh oh!

Uh oh!

FilesExpand file tree

flex-gap-decorations-repaint-on-container-shift.html

Latest commit

History

flex-gap-decorations-repaint-on-container-shift.html

File metadata and controls