Skip to content

Enable MediaElement updatePixels test #9264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
limzykenneth merged 1 commit into from
Oct 9, 2026
+13 −11
Merged

Enable MediaElement updatePixels test #9264

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions test/unit/dom/p5.MediaElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { vi } from 'vitest';
import { mockP5, mockP5Prototype } from '../../js/mocks';
import dom from '../../../src/dom/dom';
import {
default as media,
MediaElement
Expand All @@ -10,6 +11,7 @@ import { default as pixels } from '../../../src/image/pixels';
suite('p5.MediaElement', () => {
beforeAll(() => {
media(mockP5, mockP5Prototype);
dom(mockP5, mockP5Prototype);
pixels(mockP5, mockP5Prototype);
navigator.mediaDevices.getUserMedia = vi
.fn()
Expand Down Expand Up @@ -96,11 +98,11 @@ suite('p5.MediaElement', () => {
});
});

test.todo('should work with updatePixels()', function (done) {
test('should work with updatePixels()', function (done) {
let loaded = false;
let prevElt;
const imgElt = myp5.createImg('/test/unit/assets/cat.jpg', '');
const testElement = myp5.createVideo('/test/unit/assets/cat.webm', () => {
const imgElt = mockP5Prototype.createImg('/test/unit/assets/cat.jpg', '');
const testElement = mockP5Prototype.createVideo('/test/unit/assets/cat.webm', () => {
loaded = true;
// Workaround for headless tests, where the video data isn't loading
// correctly: mock the video element using an image for this test
Expand All @@ -109,9 +111,9 @@ suite('p5.MediaElement', () => {
});

let drewUpdatedPixels = false;
myp5.draw = function () {
mockP5Prototype.draw = function () {
if (!loaded) return;
myp5.background(255);
mockP5Prototype.background(255);

if (!drewUpdatedPixels) {
// First, update pixels and check that it draws the updated
Expand All @@ -125,27 +127,27 @@ suite('p5.MediaElement', () => {
testElement.pixels[i + 3] = 255;
}
testElement.updatePixels();
myp5.image(testElement, 0, 0);
mockP5Prototype.image(testElement, 0, 0);

// The element should have drawn using the updated red pixels
myp5.loadPixels();
assert.deepEqual([...myp5.pixels.slice(0, 4)], [255, 0, 0, 255]);
mockP5Prototype.loadPixels();
assert.deepEqual([...mockP5Prototype.pixels.slice(0, 4)], [255, 0, 0, 255]);

// Mark that we've done the first check so we can see whether
// the video still updates on the next frame
drewUpdatedPixels = true;
} else {
// Next, make sure it still updates with the real pixels from
// the next frame of the video on the next frame of animation
myp5.image(testElement, 0, 0);
mockP5Prototype.image(testElement, 0, 0);

myp5.loadPixels();
mockP5Prototype.loadPixels();
testElement.loadPixels();
expect([...testElement.pixels.slice(0, 4)]).to.not.deep.equal([
255, 0, 0, 255
]);
assert.deepEqual(
[...myp5.pixels.slice(0, 4)],
[...mockP5Prototype.pixels.slice(0, 4)],
[...testElement.pixels.slice(0, 4)]
);
testElement.elt = prevElt;
Expand Down
Loading