Blitz - WPT: backdrop-filter-inline-positioning.html

wpt / css / filter-effects / backdrop-filter-inline-positioning.html

/css/filter-effects/backdrop-filter-inline-positioning.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter positioning for inline elements</title>
<link rel="author" href="chromium-bugs-noreply@google.com">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="reference/backdrop-filter-inline-positioning-ref.html">

<style>
body {
  background: #ffa500; /* orange in hex */
}
div {
  margin-bottom: 120px;
}
.inline-backdrop-filter {
  backdrop-filter: invert(100%);
  padding: 50px;
  border: 1px solid blue;
  display: inline;
}
</style>
<body>
  <div>
    <p>Expected: Orange background with inline elements showing inverted blue areas where backdrop-filter is applied.</p>
  </div>
  <div>
    <span class="inline-backdrop-filter">1</span>
  </div>
  <div>
    <span class="inline-backdrop-filter">2</span>
  </div>
  <div>
    AB<span class="inline-backdrop-filter">3</span>
  </div>
  <div class="inline-backdrop-filter">4</div>
</body>

/css/filter-effects/reference/backdrop-filter-inline-positioning-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter positioning for inline elements - Reference</title>

<style>
body {
  background: #ffa500; /* orange in hex for cross-browser consistency */
}
div {
  margin-bottom: 120px;
}
.inline-backdrop-filter {
  padding: 50px;
  border: 1px solid blue;
  display: inline;
  background: #005aff; /* invert(100%) applied to orange #ffa500*/
}
</style>
<body>
  <div>
    <p>Expected: Orange background with inline elements showing inverted blue areas where backdrop-filter is applied.</p>
  </div>
  <div>
    <span class="inline-backdrop-filter">1</span>
  </div>
  <div>
    <span class="inline-backdrop-filter">2</span>
  </div>
  <div>
    AB<span class="inline-backdrop-filter">3</span>
  </div>
  <div class="inline-backdrop-filter">4</div>
</body>