Initial commit of 001code-html Scratch frontend project.
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
69
scratch-render/test/integration/cpu-render.html
Normal file
69
scratch-render/test/integration/cpu-render.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<body>
|
||||
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
|
||||
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
|
||||
<script src="../../node_modules/@turbowarp/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
|
||||
<script src="../helper/page-util.js"></script>
|
||||
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
|
||||
<script src="../../dist/web/scratch-render.js"></script>
|
||||
|
||||
<canvas id="test" width="480" height="360"></canvas>
|
||||
<canvas id="cpu" width="480" height="360"></canvas>
|
||||
<br/>
|
||||
<canvas id="merge" width="480" height="360"></canvas>
|
||||
<input type="file" id="file" name="file">
|
||||
|
||||
<script>
|
||||
// These variables are going to be available in the "window global" intentionally.
|
||||
// Allows you easy access to debug with `vm.greenFlag()` etc.
|
||||
window.devicePixelRatio = 1;
|
||||
const gpuCanvas = document.getElementById('test');
|
||||
var render = new ScratchRender(gpuCanvas);
|
||||
var vm = initVM(render);
|
||||
|
||||
const fileInput = document.getElementById('file');
|
||||
const loadFile = loadFileInputIntoVM.bind(null, fileInput, vm, render);
|
||||
fileInput.addEventListener('change', e => {
|
||||
loadFile()
|
||||
.then(() => {
|
||||
vm.greenFlag();
|
||||
setTimeout(() => {
|
||||
renderCpu();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
const cpuCanvas = document.getElementById('cpu');
|
||||
const cpuCtx = cpuCanvas.getContext('2d');
|
||||
const cpuImageData = cpuCtx.getImageData(0, 0, cpuCanvas.width, cpuCanvas.height);
|
||||
function renderCpu() {
|
||||
cpuImageData.data.fill(255);
|
||||
const drawBits = render._drawList.map(id => {
|
||||
const drawable = render._allDrawables[id];
|
||||
if (!(drawable._visible && drawable.skin)) {
|
||||
return;
|
||||
}
|
||||
drawable.updateCPURenderAttributes();
|
||||
return { id, drawable };
|
||||
}).reverse().filter(Boolean);
|
||||
const color = new Uint8ClampedArray(3);
|
||||
for (let x = -239; x <= 240; x++) {
|
||||
for (let y = -180; y< 180; y++) {
|
||||
render.constructor.sampleColor3b([x, y], drawBits, color);
|
||||
const offset = (((179-y) * 480) + 239 + x) * 4
|
||||
cpuImageData.data.set(color, offset);
|
||||
}
|
||||
}
|
||||
cpuCtx.putImageData(cpuImageData, 0, 0);
|
||||
|
||||
const merge = document.getElementById('merge');
|
||||
const ctx = merge.getContext('2d');
|
||||
ctx.drawImage(gpuCanvas, 0, 0);
|
||||
const gpuImageData = ctx.getImageData(0, 0, 480, 360);
|
||||
for (let x=0; x<gpuImageData.data.length; x++) {
|
||||
gpuImageData.data[x] = 255 - Math.abs(gpuImageData.data[x] - cpuImageData.data[x]);
|
||||
}
|
||||
|
||||
ctx.putImageData(gpuImageData, 0, 0);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
28
scratch-render/test/integration/index.html
Normal file
28
scratch-render/test/integration/index.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<body>
|
||||
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
|
||||
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
|
||||
<script src="../../node_modules/@turbowarp/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
|
||||
<script src="../helper/page-util.js"></script>
|
||||
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
|
||||
<script src="../../dist/web/scratch-render.js"></script>
|
||||
|
||||
<canvas id="test" width="480" height="360" style="width: 480px"></canvas>
|
||||
<input type="file" id="file" name="file">
|
||||
|
||||
<script>
|
||||
// These variables are going to be available in the "window global" intentionally.
|
||||
// Allows you easy access to debug with `vm.greenFlag()` etc.
|
||||
window.devicePixelRatio = 1;
|
||||
|
||||
var canvas = document.getElementById('test');
|
||||
var render = new ScratchRender(canvas);
|
||||
var vm = initVM(render);
|
||||
var mockMouse = data => vm.runtime.postIOData('mouse', {
|
||||
canvasWidth: canvas.width,
|
||||
canvasHeight: canvas.height,
|
||||
...data,
|
||||
});
|
||||
|
||||
const loadFile = loadFileInputIntoVM.bind(null, document.getElementById('file'), vm, render);
|
||||
</script>
|
||||
</body>
|
||||
111
scratch-render/test/integration/pick-tests.js
Normal file
111
scratch-render/test/integration/pick-tests.js
Normal file
@@ -0,0 +1,111 @@
|
||||
/* global vm, render */
|
||||
const {chromium} = require('playwright-chromium');
|
||||
const test = require('tap').test;
|
||||
const path = require('path');
|
||||
|
||||
const indexHTML = path.resolve(__dirname, 'index.html');
|
||||
const testDir = (...args) => path.resolve(__dirname, 'pick-tests', ...args);
|
||||
|
||||
const runFile = async (file, action, page, script) => {
|
||||
// start each test by going to the index.html, and loading the scratch file
|
||||
await page.goto(`file://${indexHTML}`);
|
||||
const fileInput = await page.$('#file');
|
||||
await fileInput.setInputFiles(testDir(file));
|
||||
|
||||
await page.evaluate(() =>
|
||||
// `loadFile` is defined on the page itself.
|
||||
// eslint-disable-next-line no-undef
|
||||
loadFile()
|
||||
);
|
||||
return page.evaluate(`(function () {return (${script})(${action});})()`);
|
||||
};
|
||||
|
||||
// immediately invoked async function to let us wait for each test to finish before starting the next.
|
||||
(async () => {
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
|
||||
const testOperation = async function (name, action, expect) {
|
||||
await test(name, async t => {
|
||||
|
||||
const results = await runFile('test-mouse-touch.sb2', action, page, boundAction => {
|
||||
vm.greenFlag();
|
||||
const sendResults = [];
|
||||
|
||||
const idToTargetName = id => {
|
||||
const target = vm.runtime.targets.find(tar => tar.drawableID === id);
|
||||
if (!target) {
|
||||
return `[Unknown drawableID: ${id}]`;
|
||||
}
|
||||
return target.sprite.name;
|
||||
};
|
||||
const sprite = vm.runtime.targets.find(target => target.sprite.name === 'Sprite1');
|
||||
|
||||
boundAction({
|
||||
sendResults,
|
||||
idToTargetName,
|
||||
render,
|
||||
sprite
|
||||
});
|
||||
return sendResults;
|
||||
});
|
||||
|
||||
t.plan(expect.length);
|
||||
for (let x = 0; x < expect.length; x++) {
|
||||
t.deepEqual(results[x], expect[x], expect[x][0]);
|
||||
}
|
||||
t.end();
|
||||
});
|
||||
};
|
||||
|
||||
const tests = [
|
||||
{
|
||||
name: 'pick Sprite1',
|
||||
action: ({sendResults, render, idToTargetName}) => {
|
||||
sendResults.push(['center', idToTargetName(render.pick(360, 180))]);
|
||||
},
|
||||
expect: [['center', 'Sprite1']]
|
||||
},
|
||||
{
|
||||
name: 'pick Stage',
|
||||
action: ({sendResults, render, idToTargetName}) => {
|
||||
sendResults.push(['left', idToTargetName(render.pick(320, 180))]);
|
||||
},
|
||||
expect: [['left', 'Stage']]
|
||||
},
|
||||
{
|
||||
name: 'touching Sprite1',
|
||||
action: ({sprite, sendResults, render}) => {
|
||||
sendResults.push(['over', render.drawableTouching(sprite.drawableID, 360, 180)]);
|
||||
},
|
||||
expect: [['over', true]]
|
||||
},
|
||||
{
|
||||
name: 'pick Stage through hidden Sprite1',
|
||||
action: ({sprite, sendResults, render, idToTargetName}) => {
|
||||
sprite.setVisible(false);
|
||||
sendResults.push(['hidden sprite pick center', idToTargetName(render.pick(360, 180))]);
|
||||
},
|
||||
expect: [['hidden sprite pick center', 'Stage']]
|
||||
},
|
||||
{
|
||||
name: 'touching hidden Sprite1',
|
||||
action: ({sprite, sendResults, render}) => {
|
||||
sprite.setVisible(false);
|
||||
sendResults.push(['hidden over', render.drawableTouching(sprite.drawableID, 360, 180)]);
|
||||
},
|
||||
expect: [['hidden over', true]]
|
||||
}
|
||||
];
|
||||
for (const {name, action, expect} of tests) {
|
||||
await testOperation(name, action, expect);
|
||||
}
|
||||
|
||||
// close the browser window we used
|
||||
await browser.close();
|
||||
})().catch(err => {
|
||||
// Handle promise rejections by exiting with a nonzero code to ensure that tests don't erroneously pass
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
BIN
scratch-render/test/integration/pick-tests/test-mouse-touch.sb2
Normal file
BIN
scratch-render/test/integration/pick-tests/test-mouse-touch.sb2
Normal file
Binary file not shown.
136
scratch-render/test/integration/scratch-tests.js
Normal file
136
scratch-render/test/integration/scratch-tests.js
Normal file
@@ -0,0 +1,136 @@
|
||||
/* global vm */
|
||||
const {chromium} = require('playwright-chromium');
|
||||
const test = require('tap').test;
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const allGpuModes = ['ForceCPU', 'ForceGPU', 'Automatic'];
|
||||
|
||||
const indexHTML = path.resolve(__dirname, 'index.html');
|
||||
const testDir = (...args) => path.resolve(__dirname, 'scratch-tests', ...args);
|
||||
|
||||
const checkOneGpuMode = (t, says) => {
|
||||
// Map string messages to tap reporting methods. This will be used
|
||||
// with events from scratch's runtime emitted on block instructions.
|
||||
let didPlan = false;
|
||||
let didEnd = false;
|
||||
const reporters = {
|
||||
comment (message) {
|
||||
t.comment(message);
|
||||
},
|
||||
pass (reason) {
|
||||
t.pass(reason);
|
||||
},
|
||||
fail (reason) {
|
||||
t.fail(reason);
|
||||
},
|
||||
plan (count) {
|
||||
didPlan = true;
|
||||
t.plan(Number(count));
|
||||
},
|
||||
end () {
|
||||
didEnd = true;
|
||||
t.end();
|
||||
}
|
||||
};
|
||||
|
||||
// loop over each "SAY" we caught from the VM and use the reporters
|
||||
says.forEach(text => {
|
||||
// first word of the say is going to be a "command"
|
||||
const command = text.split(/\s+/, 1)[0].toLowerCase();
|
||||
if (reporters[command]) {
|
||||
return reporters[command](text.substring(command.length).trim());
|
||||
}
|
||||
|
||||
// Default to a comment with the full text if we didn't match
|
||||
// any command prefix
|
||||
return reporters.comment(text);
|
||||
});
|
||||
|
||||
if (!didPlan) {
|
||||
t.comment('did not say "plan NUMBER_OF_TESTS"');
|
||||
}
|
||||
|
||||
// End must be called so that tap knows the test is done. If
|
||||
// the test has a SAY "end" block but that block did not
|
||||
// execute, this explicit failure will raise that issue so
|
||||
// it can be resolved.
|
||||
if (!didEnd) {
|
||||
t.fail('did not say "end"');
|
||||
t.end();
|
||||
}
|
||||
};
|
||||
|
||||
const testFile = async (file, page) => {
|
||||
// start each test by going to the index.html, and loading the scratch file
|
||||
await page.goto(`file://${indexHTML}`);
|
||||
const fileInput = await page.$('#file');
|
||||
await fileInput.setInputFiles(testDir(file));
|
||||
await page.evaluate(() =>
|
||||
// `loadFile` is defined on the page itself.
|
||||
// eslint-disable-next-line no-undef
|
||||
loadFile()
|
||||
);
|
||||
const says = await page.evaluate(async useGpuModes => {
|
||||
// This function is run INSIDE the integration chrome browser via some
|
||||
// injection and .toString() magic. We can return some "simple data"
|
||||
// back across as a promise, so we will just log all the says that happen
|
||||
// for parsing after.
|
||||
|
||||
// this becomes the `says` in the outer scope
|
||||
const allMessages = {};
|
||||
const TIMEOUT = 5000;
|
||||
|
||||
vm.runtime.on('SAY', (_, __, message) => {
|
||||
const messages = allMessages[vm.renderer._useGpuMode];
|
||||
messages.push(message);
|
||||
});
|
||||
|
||||
for (const useGpuMode of useGpuModes) {
|
||||
const messages = allMessages[useGpuMode] = [];
|
||||
|
||||
vm.renderer.setUseGpuMode(useGpuMode);
|
||||
vm.greenFlag();
|
||||
const startTime = Date.now();
|
||||
|
||||
// wait for all threads to complete before moving on to the next mode
|
||||
while (vm.runtime.threads.some(thread => vm.runtime.isActiveThread(thread))) {
|
||||
if ((Date.now() - startTime) >= TIMEOUT) {
|
||||
// if we push the message after end, the failure from tap is not very useful:
|
||||
// "not ok test after end() was called"
|
||||
messages.unshift(`fail Threads still running after ${TIMEOUT}ms`);
|
||||
break;
|
||||
}
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
}
|
||||
}
|
||||
|
||||
return allMessages;
|
||||
}, allGpuModes);
|
||||
|
||||
for (const gpuMode of allGpuModes) {
|
||||
test(`File: ${file}, GPU Mode: ${gpuMode}`, t => checkOneGpuMode(t, says[gpuMode]));
|
||||
}
|
||||
};
|
||||
|
||||
// immediately invoked async function to let us wait for each test to finish before starting the next.
|
||||
(async () => {
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
|
||||
const files = fs.readdirSync(testDir())
|
||||
.filter(uri => uri.endsWith('.sb2') || uri.endsWith('.sb3'));
|
||||
|
||||
for (const file of files) {
|
||||
await testFile(file, page);
|
||||
}
|
||||
|
||||
// close the browser window we used
|
||||
await browser.close();
|
||||
})().catch(err => {
|
||||
// Handle promise rejections by exiting with a nonzero code to ensure that tests don't erroneously pass
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
Binary file not shown.
Binary file not shown.
BIN
scratch-render/test/integration/scratch-tests/clear-color.sb3
Normal file
BIN
scratch-render/test/integration/scratch-tests/clear-color.sb3
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
scratch-render/test/integration/scratch-tests/fencing-bounds.sb3
Normal file
BIN
scratch-render/test/integration/scratch-tests/fencing-bounds.sb3
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
61
scratch-render/test/integration/skin-size-tests.js
Normal file
61
scratch-render/test/integration/skin-size-tests.js
Normal file
@@ -0,0 +1,61 @@
|
||||
/* global render, ImageData */
|
||||
const {chromium} = require('playwright-chromium');
|
||||
const test = require('tap').test;
|
||||
const path = require('path');
|
||||
|
||||
const indexHTML = path.resolve(__dirname, 'index.html');
|
||||
|
||||
// immediately invoked async function to let us wait for each test to finish before starting the next.
|
||||
(async () => {
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
|
||||
await page.goto(`file://${indexHTML}`);
|
||||
|
||||
await test('SVG skin size set properly', async t => {
|
||||
t.plan(1);
|
||||
const skinSize = await page.evaluate(() => {
|
||||
const skinID = render.createSVGSkin(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>`);
|
||||
return render.getSkinSize(skinID);
|
||||
});
|
||||
t.same(skinSize, [50, 100]);
|
||||
});
|
||||
|
||||
await test('Bitmap skin size set correctly', async t => {
|
||||
t.plan(1);
|
||||
const skinSize = await page.evaluate(() => {
|
||||
// Bitmap costumes are double resolution, so double the ImageData size
|
||||
const skinID = render.createBitmapSkin(new ImageData(100, 200), 2);
|
||||
return render.getSkinSize(skinID);
|
||||
});
|
||||
t.same(skinSize, [50, 100]);
|
||||
});
|
||||
|
||||
await test('Pen skin size set correctly', async t => {
|
||||
t.plan(1);
|
||||
const skinSize = await page.evaluate(() => {
|
||||
const skinID = render.createPenSkin();
|
||||
return render.getSkinSize(skinID);
|
||||
});
|
||||
const nativeSize = await page.evaluate(() => render.getNativeSize());
|
||||
t.same(skinSize, nativeSize);
|
||||
});
|
||||
|
||||
await test('Text bubble skin size set correctly', async t => {
|
||||
t.plan(1);
|
||||
const skinSize = await page.evaluate(() => {
|
||||
const skinID = render.createTextSkin('say', 'Hello', false);
|
||||
return render.getSkinSize(skinID);
|
||||
});
|
||||
// The subtleties in font rendering may cause the size of the text bubble to vary, so just make sure it's not 0
|
||||
t.notSame(skinSize, [0, 0]);
|
||||
});
|
||||
|
||||
// close the browser window we used
|
||||
await browser.close();
|
||||
})().catch(err => {
|
||||
// Handle promise rejections by exiting with a nonzero code to ensure that tests don't erroneously pass
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
Reference in New Issue
Block a user