plus-lighter blend mode tests (#31757)

web-platform-tests · Jan 18, 2022 · 2f7da96 · 2f7da96
1 parent ad10652
commit 2f7da96
Show file tree

Hide file tree

Showing 12 changed files with 354 additions and 115 deletions.
diff --git a/css/compositing/background-blending/background-blend-mode-plus-lighter.html b/css/compositing/background-blending/background-blend-mode-plus-lighter.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>background-blend-mode: plus-lighter test</title>
+<link rel="author" title="Jake Archibald" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/compositing-2/#background-blend-mode">
+<link rel="match" href="reference/background-blend-mode-plus-lighter-ref.html">
+<style>
+  .test {
+    width: 100px;
+    height: 100px;
+    background-blend-mode: plus-lighter;
+  }
+</style>
+<script type="module">
+  import { tests } from '../support/plus-lighter.js';
+  import { toCSSColor } from '../support/utils.js';
+
+  // Create a solid color CSS image.
+  const colorImage = (pixel) =>
+    `linear-gradient(to right, ${toCSSColor(pixel)}, ${toCSSColor(pixel)})`;
+
+  const createBackgrounds = (colors) => colors
+    // Backgrounds are top first
+    .slice().reverse()
+    .map((color) => colorImage(color))
+    .join(', ');
+
+  for (const colors of tests) {
+    document.body.insertAdjacentHTML('beforeend', `
+      <div class="test" style="background-image: ${createBackgrounds(colors)}"></div>
+    `);
+  }
+</script>
diff --git a/css/compositing/background-blending/reference/background-blend-mode-plus-lighter-ref.html b/css/compositing/background-blending/reference/background-blend-mode-plus-lighter-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>background-blend-mode: plus-lighter test</title>
+<link rel="author" title="Jake Archibald" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/compositing-2/#background-blend-mode">
+<style>
+  .test {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<script type="module">
+  import { tests, plusLighter } from '../../support/plus-lighter.js';
+  import { toCSSColor } from '../../support/utils.js';
+
+  for (const colors of tests) {
+    document.body.insertAdjacentHTML('beforeend', `
+      <div class="test" style="background-color: ${toCSSColor(plusLighter(colors))}"></div>
+    `);
+  }
+</script>
diff --git a/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-basic.html b/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-basic.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>mix-blend-mode: plus-lighter test</title>
+<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode">
+<link rel="match" href="reference/mix-blend-mode-plus-lighter-basic-ref.html">
+
+<style>
+.container {
+  position: relative;
+  isolation: isolate;
+  width: 500px;
+  height: 500px;
+}
+.blue { background: #000064; }
+.green { background: #006400; }
+.common {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  opacity: 0.6;
+}
+.one {
+  top: 10px;
+  left: 10px;
+}
+.two {
+  top: 65px;
+  left: 30px;
+  mix-blend-mode: plus-lighter;
+}
+.three {
+  top: 120px;
+  left: 50px;
+  mix-blend-mode: plus-lighter;
+}
+</style>
+
+<div class=container>
+  <div class="one common blue"></div>
+  <div class="two common blue"></div>
+  <div class="three common green"></div>
+</div>
diff --git a/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html b/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>mix-blend-mode: plus-lighter SVG test</title>
+<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode">
+<link rel="match" href="reference/mix-blend-mode-plus-lighter-svg-ref.html">
+
+<style>
+.isolate { isolation: isolate; }
+rect {
+  opacity: 0.6;
+  mix-blend-mode: plus-lighter;
+}
+</style>
+
+<svg width=500 height=500>
+  <g class="isolate">
+    <rect x="10" y="10" width="100" height="100" fill="#000064"></rect>
+    <rect x="30" y="65" width="100" height="100" fill="#000064"></rect>
+    <rect x="50" y="120" width="100" height="100" fill="#006400"></rect>
+  </g>
+</svg>
diff --git a/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html b/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html
@@ -1,21 +1,37 @@
 <!DOCTYPE html>
 <title>mix-blend-mode: plus-lighter SVG test</title>
-<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="author" title="Jake Archibald" href="mailto:jakearchibald@chromium.org">
 <link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode">
 <link rel="match" href="reference/mix-blend-mode-plus-lighter-svg-ref.html">
-
 <style>
-.isolate { isolation: isolate; }
-rect {
-  opacity: 0.6;
-  mix-blend-mode: plus-lighter;
-}
+  .blend-group {
+    isolation: isolate;
+  }
+  .layer {
+    mix-blend-mode: plus-lighter;
+  }
 </style>
+<script type="module">
+  import { tests } from '../support/plus-lighter.js';
+  import { toCSSColor } from '../support/utils.js';
+
+  function createRects(colors) {
+    let html = '';
+
+    for (const color of colors) {
+      html += `<rect class="layer" x="0" y="0" width="100%" height="100%" fill="${toCSSColor(color)}" />`;
+    }
+
+    return html;
+  }
 
-<svg width=500 height=500>
-  <g class="isolate">
-    <rect x="10" y="10" width="100" height="100" fill="#000064"></rect>
-    <rect x="30" y="65" width="100" height="100" fill="#000064"></rect>
-    <rect x="50" y="120" width="100" height="100" fill="#006400"></rect>
-  </g>
-</svg>
+  for (const colors of tests) {
+    document.body.insertAdjacentHTML('beforeend', `
+      <svg width="100" height="100">
+        <g class="blend-group">
+          ${createRects(colors)}
+        </g>
+      </svg>
+    `);
+  }
+</script>
diff --git a/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter.html b/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter.html
@@ -1,42 +1,38 @@
 <!DOCTYPE html>
 <title>mix-blend-mode: plus-lighter test</title>
-<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="author" title="Jake Archibald" href="mailto:jakearchibald@chromium.org">
 <link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode">
 <link rel="match" href="reference/mix-blend-mode-plus-lighter-ref.html">
-
 <style>
-.container {
-  position: relative;
-  isolation: isolate;
-  width: 500px;
-  height: 500px;
-}
-.blue { background: #000064; }
-.green { background: #006400; }
-.common {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  opacity: 0.6;
-}
-.one {
-  top: 10px;
-  left: 10px;
-}
-.two {
-  top: 65px;
-  left: 30px;
-  mix-blend-mode: plus-lighter;
-}
-.three {
-  top: 120px;
-  left: 50px;
-  mix-blend-mode: plus-lighter;
-}
+  .test {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    isolation: isolate;
+  }
+  .layer {
+    position: absolute;
+    inset: 0;
+    mix-blend-mode: plus-lighter;
+  }
 </style>
+<script type="module">
+  import { tests } from '../support/plus-lighter.js';
+  import { toCSSColor } from '../support/utils.js';
+
+  function createLayers(colors) {
+    let html = '';
+
+    for (const color of colors) {
+      html += `<div class="layer" style="background-color: ${toCSSColor(color)}"></div>`;
+    }
+
+    return html;
+  }
 
-<div class=container>
-  <div class="one common blue"></div>
-  <div class="two common blue"></div>
-  <div class="three common green"></div>
-</div>
+  for (const colors of tests) {
+    document.body.insertAdjacentHTML('beforeend', `
+      <div class="test">${createLayers(colors)}</div>
+    `);
+  }
+</script>
diff --git a/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-basic-ref.html b/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-basic-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>mix-blend-mode: plus-lighter test</title>
+<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode">
+
+<style>
+.container {
+  isolation: isolate;
+  position: relative;
+  width: 500px;
+  height: 500px;
+}
+.blue { background: #000064; }
+.green { background: #006400; }
+.common {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  opacity: 0.6;
+}
+.one {
+  top: 10px;
+  left: 10px;
+}
+.two {
+  top: 65px;
+  left: 30px;
+}
+.three {
+  top: 120px;
+  left: 50px;
+}
+.one_and_two {
+  position: absolute;
+  width: 80px;
+  height: 45px;
+  top: 65px;
+  left: 30px;
+  background: #000078;
+}
+.two_and_three {
+  position: absolute;
+  width: 80px;
+  height: 45px;
+  top: 120px;
+  left: 50px;
+  background: #003C3C;
+}
+</style>
+
+<div class=container>
+  <div class="one common blue"></div>
+  <div class="two common blue"></div>
+  <div class="three common green"></div>
+  <div class="one_and_two"></div>
+  <div class="two_and_three"></div>
+</div>
diff --git a/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-ref.html b/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-ref.html
@@ -1,57 +1,20 @@
 <!DOCTYPE html>
 <title>mix-blend-mode: plus-lighter test</title>
-<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="author" title="Jake Archibald" href="mailto:jakearchibald@chromium.org">
 <link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode">
-
 <style>
-.container {
-  isolation: isolate;
-  position: relative;
-  width: 500px;
-  height: 500px;
-}
-.blue { background: #000064; }
-.green { background: #006400; }
-.common {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  opacity: 0.6;
-}
-.one {
-  top: 10px;
-  left: 10px;
-}
-.two {
-  top: 65px;
-  left: 30px;
-}
-.three {
-  top: 120px;
-  left: 50px;
-}
-.one_and_two {
-  position: absolute;
-  width: 80px;
-  height: 45px;
-  top: 65px;
-  left: 30px;
-  background: #000078;
-}
-.two_and_three {
-  position: absolute;
-  width: 80px;
-  height: 45px;
-  top: 120px;
-  left: 50px;
-  background: #003C3C;
-}
+  .test {
+    width: 100px;
+    height: 100px;
+  }
 </style>
+<script type="module">
+  import { tests, plusLighter } from '../../support/plus-lighter.js';
+  import { toCSSColor } from '../../support/utils.js';
 
-<div class=container>
-  <div class="one common blue"></div>
-  <div class="two common blue"></div>
-  <div class="three common green"></div>
-  <div class="one_and_two"></div>
-  <div class="two_and_three"></div>
-</div>
+  for (const colors of tests) {
+    document.body.insertAdjacentHTML('beforeend', `
+      <div class="test" style="background-color: ${toCSSColor(plusLighter(colors))}"></div>
+    `);
+  }
+</script>
diff --git a/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-basic-ref.html b/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-basic-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>mix-blend-mode: plus-lighter SVG test</title>
+<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode">
+
+<style>
+.isolate { isolation: isolate; }
+.original { opacity: 0.6; }
+</style>
+
+<svg width=500 height=500>
+  <g class="isolate">
+    <rect class="original" x="10" y="10" width="100" height="100" fill="#000064"></rect>
+    <rect class="original" x="30" y="65" width="100" height="100" fill="#000064"></rect>
+    <rect class="original" x="50" y="120" width="100" height="100" fill="#006400"></rect>
+    <rect x="30" y="65" width="80" height="45" fill="#000078"></rect>
+    <rect x="50" y="120" width="80" height="45" fill="#003C3C"></rect>
+  </g>
+</svg>