Skip to content

Commit

Permalink
Fix LQIP color bug causing invalid hex values
Browse files Browse the repository at this point in the history
  • Loading branch information
@simonihmig
simonihmig committed Sep 15, 2024
1 parent f1cc719 commit 353cfab
Show file tree
Hide file tree
Showing 9 changed files with 66 additions and 58 deletions.
5 changes: 5 additions & 0 deletions .changeset/tasty-ads-guess.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@responsive-image/webpack': patch
---

Fix LQIP color bug causing invalid hex values
8 changes: 4 additions & 4 deletions apps/ember-test-app/app/controllers/image.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import Controller from '@ember/controller';
import testImage from 'ember-test-app/images/tests/image.jpg?widths=50,100,640&formats=original,webp,avif&responsive';
import testImageLqipInline from 'ember-test-app/images/tests/image.jpg?lqip=inline&widths=50,100,640&responsive';
import testImageLqipColor from 'ember-test-app/images/tests/image.jpg?lqip=color&widths=50,100,640&responsive';
import testImageLqipBlurhash from 'ember-test-app/images/tests/image.jpg?lqip=blurhash&widths=50,100,640&responsive';
import testImage from 'ember-test-app/images/aurora.jpg?widths=50,100,640&formats=original,webp,avif&responsive';
import testImageLqipInline from 'ember-test-app/images/aurora.jpg?lqip=inline&widths=50,100,640&responsive';
import testImageLqipColor from 'ember-test-app/images/aurora.jpg?lqip=color&widths=50,100,640&responsive';
import testImageLqipBlurhash from 'ember-test-app/images/aurora.jpg?lqip=blurhash&widths=50,100,640&responsive';

export default class IndexController extends Controller {
testImage = testImage;
Expand Down
Binary file added apps/ember-test-app/app/images/aurora.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed apps/ember-test-app/app/images/tests/image.jpg
View file
Binary file not shown.
Binary file removed apps/ember-test-app/app/images/tests/test.png
View file
Binary file not shown.
4 changes: 2 additions & 2 deletions apps/ember-test-app/tests/fastboot/image-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module('FastBoot | image', function (hooks) {
assert.dom('img[data-test-simple-image]').exists();
assert
.dom('img[data-test-simple-image]')
.hasAttribute('src', new RegExp('/images/image-640w(-\\w+)?.jpg'));
.hasAttribute('src', new RegExp('/images/aurora-640w(-\\w+)?.jpg'));
});

test('it renders lqip color', async function (assert) {
Expand All @@ -22,7 +22,7 @@ module('FastBoot | image', function (hooks) {
assert.dom('img[data-test-lqip-image=color]').exists();
assert
.dom('img[data-test-lqip-image=color]')
.hasStyle({ 'background-color': 'rgb(88, 72, 56)' });
.hasStyle({ 'background-color': 'rgb(8, 56, 56)' });
});

test('it renders lqip inline', async function (assert) {
Expand Down
94 changes: 48 additions & 46 deletions apps/ember-test-app/tests/integration/components/responsive-image-test.gts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@ import { setupRenderingTest } from "ember-qunit";
import { module, skip, test } from "qunit";
import { on } from "@ember/modifier";
import type { ImageData } from "@responsive-image/ember";
import testImage from "ember-test-app/images/tests/image.jpg?w=50;100;640&format=original;webp;avif&responsive";
import testImageLqipInline from "ember-test-app/images/tests/image.jpg?lqip=inline&w=50;100;640&responsive";
import testImageLqipColor from "ember-test-app/images/tests/image.jpg?lqip=color&w=50;100;640&responsive";
import testImageLqipBlurhash from "ember-test-app/images/tests/image.jpg?lqip=blurhash&w=50;100;640&responsive";
import smallImage from "ember-test-app/images/tests/image.jpg?w=10;25&format=original;webp;avif&responsive";
import testImage from "ember-test-app/images/aurora.jpg?w=50;100;640&format=original;webp;avif&responsive";
import testImageLqipInline from "ember-test-app/images/aurora.jpg?lqip=inline&w=50;100;640&responsive";
import testImageLqipColor from "ember-test-app/images/aurora.jpg?lqip=color&w=50;100;640&responsive";
import testImageLqipBlurhash from "ember-test-app/images/aurora.jpg?lqip=blurhash&w=50;100;640&responsive";
import smallImage from "ember-test-app/images/aurora.jpg?w=10;25&format=original;webp;avif&responsive";

import type { RenderingTestContext } from "@ember/test-helpers";
import { env } from "@responsive-image/core";

const cacheBreaker = () => new Date().getTime() + "#" + Math.random();
const testImageAspectRatio = 640 / 427;

module("Integration: Responsive Image Component", function (hooks) {
setupRenderingTest(hooks);
Expand All @@ -37,7 +38,7 @@ module("Integration: Responsive Image Component", function (hooks) {

assert.dom("img").hasAttribute("width");
assert.dom("img").hasAttribute("height");
assert.strictEqual(
assert.closeTo(
parseInt(
this.element.querySelector("img")?.getAttribute("width") ?? "",
10,
Expand All @@ -46,7 +47,8 @@ module("Integration: Responsive Image Component", function (hooks) {
this.element.querySelector("img")?.getAttribute("height") ?? "",
10,
),
2,
testImageAspectRatio,
0.01,
);
});

Expand All @@ -60,59 +62,59 @@ module("Integration: Responsive Image Component", function (hooks) {
.dom('picture source[type="image/jpeg"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-640w(-\\w+)?.jpg 640w"),
new RegExp("/images/aurora-640w(-\\w+)?.jpg 640w"),
);
assert
.dom('picture source[type="image/jpeg"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-100w(-\\w+)?.jpg 100w"),
new RegExp("/images/aurora-100w(-\\w+)?.jpg 100w"),
);
assert
.dom('picture source[type="image/jpeg"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-50w(-\\w+)?.jpg 50w"),
new RegExp("/images/aurora-50w(-\\w+)?.jpg 50w"),
);

// webp
assert
.dom('picture source[type="image/webp"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-640w(-\\w+)?.webp 640w"),
new RegExp("/images/aurora-640w(-\\w+)?.webp 640w"),
);
assert
.dom('picture source[type="image/webp"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-100w(-\\w+)?.webp 100w"),
new RegExp("/images/aurora-100w(-\\w+)?.webp 100w"),
);
assert
.dom('picture source[type="image/webp"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-50w(-\\w+)?.webp 50w"),
new RegExp("/images/aurora-50w(-\\w+)?.webp 50w"),
);

// avif
assert
.dom('picture source[type="image/avif"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-640w(-\\w+)?.avif 640w"),
new RegExp("/images/aurora-640w(-\\w+)?.avif 640w"),
);
assert
.dom('picture source[type="image/avif"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-100w(-\\w+)?.avif 100w"),
new RegExp("/images/aurora-100w(-\\w+)?.avif 100w"),
);
assert
.dom('picture source[type="image/avif"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-50w(-\\w+)?.avif 50w"),
new RegExp("/images/aurora-50w(-\\w+)?.avif 50w"),
);

await render(
Expand All @@ -123,41 +125,41 @@ module("Integration: Responsive Image Component", function (hooks) {
.dom('picture source[type="image/jpeg"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-10w(-\\w+)?.jpg 10w"),
new RegExp("/images/aurora-10w(-\\w+)?.jpg 10w"),
);
assert
.dom('picture source[type="image/jpeg"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-25w(-\\w+)?.jpg 25w"),
new RegExp("/images/aurora-25w(-\\w+)?.jpg 25w"),
);

// webp
assert
.dom('picture source[type="image/webp"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-10w(-\\w+)?.webp 10w"),
new RegExp("/images/aurora-10w(-\\w+)?.webp 10w"),
);
assert
.dom('picture source[type="image/webp"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-25w(-\\w+)?.webp 25w"),
new RegExp("/images/aurora-25w(-\\w+)?.webp 25w"),
);

// avif
assert
.dom('picture source[type="image/avif"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-10w(-\\w+)?.avif 10w"),
new RegExp("/images/aurora-10w(-\\w+)?.avif 10w"),
);
assert
.dom('picture source[type="image/avif"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-25w(-\\w+)?.avif 25w"),
new RegExp("/images/aurora-25w(-\\w+)?.avif 25w"),
);
});

Expand All @@ -169,28 +171,28 @@ module("Integration: Responsive Image Component", function (hooks) {
);
assert
.dom("img")
.hasAttribute("src", new RegExp("/images/image-50w(-\\w+)?.jpg"));
.hasAttribute("src", new RegExp("/images/aurora-50w(-\\w+)?.jpg"));
env.physicalWidth = 51;
await render(
<template><ResponsiveImage @src={{testImage}} /></template>,
);
assert
.dom("img")
.hasAttribute("src", new RegExp("/images/image-100w(-\\w+)?.jpg"));
.hasAttribute("src", new RegExp("/images/aurora-100w(-\\w+)?.jpg"));
env.physicalWidth = 9;
await render(
<template><ResponsiveImage @src={{smallImage}} /></template>,
);
assert
.dom("img")
.hasAttribute("src", new RegExp("/images/image-10w(-\\w+)?.jpg"));
.hasAttribute("src", new RegExp("/images/aurora-10w(-\\w+)?.jpg"));
env.physicalWidth = 11;
await render(
<template><ResponsiveImage @src={{smallImage}} /></template>,
);
assert
.dom("img")
.hasAttribute("src", new RegExp("/images/image-25w(-\\w+)?.jpg"));
.hasAttribute("src", new RegExp("/images/aurora-25w(-\\w+)?.jpg"));
});

test("it renders a given size as sizes", async function (assert) {
Expand Down Expand Up @@ -265,7 +267,7 @@ module("Integration: Responsive Image Component", function (hooks) {
);

assert.dom("img").hasAttribute("width", "150");
assert.dom("img").hasAttribute("height", "75");
assert.dom("img").hasAttribute("height", "100");
});

test("it renders width when height is given according to aspect ratio", async function (assert) {
Expand All @@ -275,7 +277,7 @@ module("Integration: Responsive Image Component", function (hooks) {
</template>,
);

assert.dom("img").hasAttribute("width", "200");
assert.dom("img").hasAttribute("width", "150");
assert.dom("img").hasAttribute("height", "100");
});

Expand All @@ -290,41 +292,41 @@ module("Integration: Responsive Image Component", function (hooks) {
.dom('picture source[type="image/jpeg"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-100w(-\\w+)?.jpg 2x"),
new RegExp("/images/aurora-100w(-\\w+)?.jpg 2x"),
);
assert
.dom('picture source[type="image/jpeg"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-50w(-\\w+)?.jpg 1x"),
new RegExp("/images/aurora-50w(-\\w+)?.jpg 1x"),
);

// webp
assert
.dom('picture source[type="image/webp"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-100w(-\\w+)?.webp 2x"),
new RegExp("/images/aurora-100w(-\\w+)?.webp 2x"),
);
assert
.dom('picture source[type="image/webp"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-50w(-\\w+)?.webp 1x"),
new RegExp("/images/aurora-50w(-\\w+)?.webp 1x"),
);

// avif
assert
.dom('picture source[type="image/avif"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-100w(-\\w+)?.avif 2x"),
new RegExp("/images/aurora-100w(-\\w+)?.avif 2x"),
);
assert
.dom('picture source[type="image/avif"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-50w(-\\w+)?.avif 1x"),
new RegExp("/images/aurora-50w(-\\w+)?.avif 1x"),
);

await render(
Expand All @@ -337,41 +339,41 @@ module("Integration: Responsive Image Component", function (hooks) {
.dom('picture source[type="image/jpeg"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-10w(-\\w+)?.jpg 1x"),
new RegExp("/images/aurora-10w(-\\w+)?.jpg 1x"),
);
assert
.dom('picture source[type="image/jpeg"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-25w(-\\w+)?.jpg 2x"),
new RegExp("/images/aurora-25w(-\\w+)?.jpg 2x"),
);

// webp
assert
.dom('picture source[type="image/webp"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-10w(-\\w+)?.webp 1x"),
new RegExp("/images/aurora-10w(-\\w+)?.webp 1x"),
);
assert
.dom('picture source[type="image/webp"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-25w(-\\w+)?.webp 2x"),
new RegExp("/images/aurora-25w(-\\w+)?.webp 2x"),
);

// avif
assert
.dom('picture source[type="image/avif"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-10w(-\\w+)?.avif 1x"),
new RegExp("/images/aurora-10w(-\\w+)?.avif 1x"),
);
assert
.dom('picture source[type="image/avif"]')
.hasAttribute(
"srcset",
new RegExp("/images/image-25w(-\\w+)?.avif 2x"),
new RegExp("/images/aurora-25w(-\\w+)?.avif 2x"),
);
});

Expand All @@ -383,7 +385,7 @@ module("Integration: Responsive Image Component", function (hooks) {
);
assert
.dom("img")
.hasAttribute("src", new RegExp("/images/image-640w(-\\w+)?.jpg"));
.hasAttribute("src", new RegExp("/images/aurora-640w(-\\w+)?.jpg"));

await render(
<template>
Expand All @@ -392,7 +394,7 @@ module("Integration: Responsive Image Component", function (hooks) {
);
assert
.dom("img")
.hasAttribute("src", new RegExp("/images/image-640w(-\\w+)?.jpg"));
.hasAttribute("src", new RegExp("/images/aurora-640w(-\\w+)?.jpg"));

await render(
<template>
Expand All @@ -401,7 +403,7 @@ module("Integration: Responsive Image Component", function (hooks) {
);
assert
.dom("img")
.hasAttribute("src", new RegExp("/images/image-100w(-\\w+)?.jpg"));
.hasAttribute("src", new RegExp("/images/aurora-100w(-\\w+)?.jpg"));

await render(
<template>
Expand All @@ -410,7 +412,7 @@ module("Integration: Responsive Image Component", function (hooks) {
);
assert
.dom("img")
.hasAttribute("src", new RegExp("/images/image-100w(-\\w+)?.jpg"));
.hasAttribute("src", new RegExp("/images/aurora-100w(-\\w+)?.jpg"));

await render(
<template>
Expand All @@ -419,7 +421,7 @@ module("Integration: Responsive Image Component", function (hooks) {
);
assert
.dom("img")
.hasAttribute("src", new RegExp("/images/image-50w(-\\w+)?.jpg"));
.hasAttribute("src", new RegExp("/images/aurora-50w(-\\w+)?.jpg"));
});
});

Expand Down Expand Up @@ -485,7 +487,7 @@ module("Integration: Responsive Image Component", function (hooks) {
</template>,
);

assert.dom("img").hasStyle({ "background-color": "rgb(88, 72, 56)" });
assert.dom("img").hasStyle({ "background-color": "rgb(8, 56, 56)" });

await waitUntilLoaded;
await settled();
Expand Down
Loading

0 comments on commit 353cfab

Please sign in to comment.