mirror of
https://github.com/servo/servo.git
synced 2025-08-16 10:55:34 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
3
tests/wpt/web-platform-tests/css/css-paint-api/OWNERS
Normal file
3
tests/wpt/web-platform-tests/css/css-paint-api/OWNERS
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@bfgeek
|
||||
@grorg
|
||||
@shans
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#background {
|
||||
background-color: yellow;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="background">
|
||||
<div class="container">
|
||||
<canvas id ="opaque" width="100" height="100"></canvas>
|
||||
</div>
|
||||
<div class="container">
|
||||
<canvas id ="nonopaque" width="100" height="100"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function drawCanvas(canvasID, hasAlpha) {
|
||||
var canvas = document.getElementById(canvasID);
|
||||
var context = canvas.getContext("2d", {alpha: hasAlpha});
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
context.strokeStyle = 'blue';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(20, 20, 60, 60);
|
||||
};
|
||||
|
||||
drawCanvas('opaque', false);
|
||||
drawCanvas('nonopaque', true);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="background-image-alpha-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-opaque {
|
||||
background-image: paint(opaque);
|
||||
}
|
||||
|
||||
#canvas-nonopaque {
|
||||
background-image: paint(nonOpaque);
|
||||
}
|
||||
|
||||
#background {
|
||||
background-color: yellow;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="background">
|
||||
<div id="canvas-opaque" class="container"></div>
|
||||
<div id="canvas-nonopaque" class="container"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('opaque', class {
|
||||
static get contextOptions() { return {alpha: false}; }
|
||||
paint(ctx, geom) {
|
||||
ctx.strokeStyle = 'blue';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(20, 20, 60, 60);
|
||||
}
|
||||
});
|
||||
|
||||
registerPaint('nonOpaque', class {
|
||||
static get contextOptions() { return {alpha: true}; }
|
||||
paint(ctx, geom) {
|
||||
ctx.strokeStyle = 'blue';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(20, 20, 60, 60);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="output" width="100" height="100"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('output');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
var colors = ['red', 'green', 'blue'];
|
||||
for (var i = 2; i >= 0; i--) {
|
||||
ctx.fillStyle = colors[i];
|
||||
ctx.fillRect(i * 20, i * 20, 40, 40);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="background-image-multiple-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: paint(n0), paint(n1), paint(n2);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var colors = ['red', 'green', 'blue'];
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
registerPaint('n' + i, class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = colors[i];
|
||||
ctx.fillRect(i * 20, i * 20, 40, 40);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="one" width="100" height="100"></canvas>
|
||||
<canvas id ="two" width="100" height="100"></canvas>
|
||||
<script>
|
||||
function drawCircle(ctx, geom) {
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.beginPath();
|
||||
ctx.rect(0, 0, geom.width, geom.height);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
var ctx1 = document.getElementById('one').getContext('2d');
|
||||
drawCircle(ctx1, {width: 50, height: 50});
|
||||
ctx1.translate(50, 0);
|
||||
drawCircle(ctx1, {width: 50, height: 50});
|
||||
ctx1.resetTransform();
|
||||
ctx1.translate(0, 50);
|
||||
drawCircle(ctx1, {width: 100, height: 50});
|
||||
|
||||
var ctx2 = document.getElementById('two').getContext('2d');
|
||||
for (var i = 0; i < 5; i++) {
|
||||
drawCircle(ctx2, {width: 50, height: 20});
|
||||
ctx2.translate(0, 20);
|
||||
}
|
||||
ctx2.resetTransform();
|
||||
ctx2.translate(50, 25);
|
||||
drawCircle(ctx2, {width: 50, height: 50});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="background-image-tiled-ref.html">
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#one {
|
||||
background:
|
||||
paint(ellipse) top left/50% 50% repeat-x,
|
||||
paint(ellipse) bottom left/100% 50% no-repeat;
|
||||
}
|
||||
|
||||
#two {
|
||||
background:
|
||||
paint(ellipse) top left/50% 20% repeat-y,
|
||||
paint(ellipse) center right/50% 50% no-repeat;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="one"></div>
|
||||
<div id="two"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('ellipse', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.beginPath();
|
||||
ctx.rect(0, 0, geom.width, geom.height);
|
||||
ctx.fill();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="100" height="100"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-background-image-001-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.strokeStyle = 'green';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="200" height="200"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 200, 200);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-background-image-002-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.strokeStyle = 'green';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="100" height="50"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.fillStyle = 'green';
|
||||
context.fillRect(0, 0, 100, 50);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-background-image-tiled-001-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: paint(geometry) top left/50% 50% repeat-x;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.beginPath();
|
||||
ctx.rect(0, 0, geom.width, geom.height);
|
||||
ctx.fill();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="50" height="20" style="position:relative; top:40px; left:50px"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 50, 20);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-background-image-tiled-002-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: paint(geometry) center right/50% 20% no-repeat;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.strokeStyle = 'green';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="60" height="80" style="position:relative; top:10px; left:20px"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 60, 80);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-background-image-tiled-003-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: paint(geometry) center center/60px 80px no-repeat;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.strokeStyle = 'green';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="200" height="200" style="position:relative; top:10px; left:10px"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
// The test geometry-border-image1.html has a paint canvas with width=200 and
|
||||
// height=200, as well as a border-width=10 and border-image-slice: fill. All of
|
||||
// them combined meaning that it draws to the (200+10*2)*(200+10*2) area, but
|
||||
// stretch it to fit into the 200*200 area.
|
||||
// So in this ref test, we create a 200*200 canvas. We draw to a 220*220 area
|
||||
// and scale it to fit the 200*200 canvas.
|
||||
context.scale(200/220, 200/220);
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 220, 220);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-border-image-001-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
border: solid 0;
|
||||
border-image: paint(geometry);
|
||||
border-image-slice: 0 fill;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (geom.width == 220 && geom.height == 220)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById('canvas-geometry').style.borderWidth = '10px';
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="90" height="90" style="position:relative; left:-20px; top:-20px"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 90, 90);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-border-image-002-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
border: solid 0;
|
||||
border-image: paint(geometry);
|
||||
border-image-slice: 0 fill;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (geom.width == 90 && geom.height == 90)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById('canvas-geometry').style.borderImageOutset = '20px';
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="80" height="120" style="position:relative; left:-10px; top:-10px"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 80, 120);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-border-image-003-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
border: solid 0;
|
||||
border-image: paint(geometry);
|
||||
border-image-slice: 0 fill;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (geom.width == 80 && geom.height == 120)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById('canvas-geometry').style.borderImageOutset = '10px';
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="120" height="120"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
// The test geometry-border-image4.html has a 100*100 paint canvas, it specifies
|
||||
// border-width=10 and border-image-outset=10, which means that it is drawing to
|
||||
// a 140*140 area. However, because the test has "border-image-slice: 0 fill",
|
||||
// together with the border-width=10, makes it draw to a 120*120 area.
|
||||
// In this ref html, we draw to a 140*140 area, but scale it to fit the 120*120
|
||||
// canvas.
|
||||
context.scale(120/140, 120/140);
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 140, 140);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-border-image-004-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
border: solid 0;
|
||||
border-image: paint(geometry);
|
||||
border-image-slice: 0 fill;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (geom.width == 140 && geom.height == 140)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById('canvas-geometry').style.borderWidth = '10px';
|
||||
document.getElementById('canvas-geometry').style.borderImageOutset = '10px';
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
canvas {width: 150px; height: 150px; }
|
||||
</style>
|
||||
<body>
|
||||
<p>This test ensures that the PaintWorkletGlobalScope.devicePixelRatio returns
|
||||
the correct value, which should be identical as window.devicePixelRatio. To
|
||||
manually test, open both this file and "device-pixel-ratio-ref.html" with a
|
||||
browser, and you should see two idential green rectangles.</p>
|
||||
<canvas id ="canvas" width="100" height="100"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
canvas.width = 150 * window.devicePixelRatio;
|
||||
canvas.height = 150 * window.devicePixelRatio;
|
||||
var context = canvas.getContext("2d");
|
||||
context.fillStyle = 'green';
|
||||
var draw_width = Math.floor(canvas.width / window.devicePixelRatio);
|
||||
var draw_height = Math.floor(canvas.height / window.devicePixelRatio);
|
||||
context.fillRect(0, 0, draw_width, draw_height);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="device-pixel-ratio-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
.container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<p>This test ensures that the PaintWorkletGlobalScope.devicePixelRatio returns
|
||||
the correct value, which should be identical as window.devicePixelRatio. To
|
||||
manually test, open both this file and "device-pixel-ratio-ref.html" with a
|
||||
browser, and you should see two idential green rectangles.</p>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'green';
|
||||
var draw_width = Math.floor(geom.width / devicePixelRatio);
|
||||
var draw_height = Math.floor(geom.height / devicePixelRatio);
|
||||
ctx.fillRect(0, 0, draw_width, draw_height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="invalid-image-constructor-error-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: paint(error);
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('error', class {
|
||||
constructor() { throw Error('failed!'); }
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="invalid-image-paint-error-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: paint(error);
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('error', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillRect(0, 0, geom.width, geom.height);
|
||||
throw Error('failed!');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="invalid-image-pending-script-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: paint(invalid);
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint("");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
30
tests/wpt/web-platform-tests/css/css-paint-api/overdraw.html
Normal file
30
tests/wpt/web-platform-tests/css/css-paint-api/overdraw.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="match" href="overdraw-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: paint(green);
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('green', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(-10, -10, geom.width + 20, geom.height + 20);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#background {
|
||||
background-color: yellow;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="background">
|
||||
<div class="container">
|
||||
<canvas id ="box-green" width="100" height="100"></canvas>
|
||||
</div>
|
||||
<div class="container">
|
||||
<canvas id ="box-red" width="100" height="100"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function drawCanvas(canvasID, color) {
|
||||
var canvas = document.getElementById(canvasID);
|
||||
var context = canvas.getContext("2d", {alpha: true});
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(20, 20, 60, 60);
|
||||
};
|
||||
|
||||
drawCanvas('box-green', 'green');
|
||||
drawCanvas('box-red', 'red');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-box-green {
|
||||
background-image: paint(box, green);
|
||||
}
|
||||
|
||||
#canvas-box-red {
|
||||
background-image: paint(box, red);
|
||||
}
|
||||
|
||||
#background {
|
||||
background-color: yellow;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
|
||||
<div id="background">
|
||||
<div id="canvas-box-green" class="container"></div>
|
||||
<div id="canvas-box-red" class="container"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('box', class {
|
||||
static get contextOptions() { return {alpha: true}; }
|
||||
static get inputArguments() { return ['<color>']; }
|
||||
paint(ctx, geom, properties, args) {
|
||||
ctx.strokeStyle = args[0].toString();
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(20, 20, 60, 60);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#background {
|
||||
background-color: yellow;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="background">
|
||||
<div class="container">
|
||||
<canvas id ="box-1" width="200" height="200"></canvas>
|
||||
</div>
|
||||
<div class="container">
|
||||
<canvas id ="box-2" width="200" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function drawCanvas(canvasID, color, width) {
|
||||
var canvas = document.getElementById(canvasID);
|
||||
var context = canvas.getContext("2d", {alpha: true});
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = width;
|
||||
context.strokeRect(40, 40, 120, 120);
|
||||
};
|
||||
|
||||
drawCanvas('box-1', 'rgb(50, 100, 150)', '5px');
|
||||
drawCanvas('box-2', 'rgb(150, 100, 50)', '10px');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint-function-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#canvas-box-1 {
|
||||
background-image: paint(box, rgb(50, 100, 150), 5px);
|
||||
}
|
||||
|
||||
#canvas-box-2 {
|
||||
background-image: paint(box, rgb(150, 100, 50), 10px);
|
||||
}
|
||||
|
||||
#background {
|
||||
background-color: yellow;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
|
||||
<div id="background">
|
||||
<div id="canvas-box-1" class="container"></div>
|
||||
<div id="canvas-box-2" class="container"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('box', class {
|
||||
static get contextOptions() { return {alpha: true}; }
|
||||
static get inputArguments() { return ['<color>', '<length>']; }
|
||||
paint(ctx, geom, properties, args) {
|
||||
ctx.strokeStyle = args[0].toString();
|
||||
ctx.lineWidth = args[1].toString();
|
||||
ctx.strokeRect(40, 40, 120, 120);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
canvas { display: inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="source-over" width="80" height="80"></canvas>
|
||||
<canvas id="source-in" width="80" height="80"></canvas>
|
||||
<canvas id="source-out" width="80" height="80"></canvas>
|
||||
<canvas id="source-atop" width="80" height="80"></canvas>
|
||||
<br>
|
||||
<canvas id="destination-over" width="80" height="80"></canvas>
|
||||
<canvas id="destination-in" width="80" height="80"></canvas>
|
||||
<canvas id="destination-out" width="80" height="80"></canvas>
|
||||
<canvas id="destination-atop" width="80" height="80"></canvas>
|
||||
<br>
|
||||
<canvas id="lighter" width="80" height="80"></canvas>
|
||||
<canvas id="xor" width="80" height="80"></canvas>
|
||||
<script>
|
||||
var compositeOps = [
|
||||
'source-over',
|
||||
'source-in',
|
||||
'source-out',
|
||||
'source-atop',
|
||||
'destination-over',
|
||||
'destination-in',
|
||||
'destination-out',
|
||||
'destination-atop',
|
||||
'lighter',
|
||||
'xor'
|
||||
];
|
||||
|
||||
for (var i = 0; i < compositeOps.length; i++) {
|
||||
var op = compositeOps[i];
|
||||
var ctx = document.getElementById(op).getContext('2d');
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillRect(5, 5, 40, 40);
|
||||
|
||||
ctx.globalCompositeOperation = op;
|
||||
|
||||
ctx.fillStyle = 'deepskyblue';
|
||||
ctx.beginPath();
|
||||
ctx.arc(45,45,20,0,Math.PI*2,true);
|
||||
ctx.fill();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint2d-composite-ref.html">
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
#source-over { background-image: paint(source-over); }
|
||||
#source-in { background-image: paint(source-in); }
|
||||
#source-out { background-image: paint(source-out); }
|
||||
#source-atop { background-image: paint(source-atop); }
|
||||
#destination-over { background-image: paint(destination-over); }
|
||||
#destination-in { background-image: paint(destination-in); }
|
||||
#destination-out { background-image: paint(destination-out); }
|
||||
#destination-atop { background-image: paint(destination-atop); }
|
||||
#lighter { background-image: paint(lighter); }
|
||||
#xor { background-image: paint(xor); }
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="source-over"></div>
|
||||
<div id="source-in"></div>
|
||||
<div id="source-out"></div>
|
||||
<div id="source-atop"></div>
|
||||
<br>
|
||||
<div id="destination-over"></div>
|
||||
<div id="destination-in"></div>
|
||||
<div id="destination-out"></div>
|
||||
<div id="destination-atop"></div>
|
||||
<br>
|
||||
<div id="lighter"></div>
|
||||
<div id="xor"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var compositeOps = [
|
||||
'source-over',
|
||||
'source-in',
|
||||
'source-out',
|
||||
'source-atop',
|
||||
'destination-over',
|
||||
'destination-in',
|
||||
'destination-out',
|
||||
'destination-atop',
|
||||
'lighter',
|
||||
'xor'
|
||||
];
|
||||
|
||||
function doPaint(ctx, op) {
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillRect(5, 5, 40, 40);
|
||||
|
||||
ctx.globalCompositeOperation = op;
|
||||
|
||||
ctx.fillStyle = 'deepskyblue';
|
||||
ctx.beginPath();
|
||||
ctx.arc(45,45,20,0,Math.PI*2,true);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
for (var i = 0; i < compositeOps.length; i++) {
|
||||
let op = compositeOps[i];
|
||||
registerPaint(op, class { paint(ctx, geom) { doPaint(ctx, op); } });
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
canvas { display: inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='output0' width='100' height='100'></canvas>
|
||||
<canvas id='output1' width='100' height='100'></canvas>
|
||||
<canvas id='output2' width='100' height='100'></canvas>
|
||||
<canvas id='output3' width='100' height='100'></canvas>
|
||||
<canvas id='output4' width='100' height='100'></canvas>
|
||||
<br>
|
||||
<canvas id='output5' width='100' height='100'></canvas>
|
||||
<canvas id='output6' width='100' height='100'></canvas>
|
||||
<canvas id='output7' width='100' height='100'></canvas>
|
||||
<canvas id='output8' width='100' height='100'></canvas>
|
||||
<canvas id='output9' width='100' height='100'></canvas>
|
||||
<br>
|
||||
<canvas id='output10' width='100' height='100'></canvas>
|
||||
<canvas id='output11' width='100' height='100'></canvas>
|
||||
<canvas id='output12' width='100' height='100'></canvas>
|
||||
<canvas id='output13' width='100' height='100'></canvas>
|
||||
<canvas id='output14' width='100' height='100'></canvas>
|
||||
|
||||
<script>
|
||||
var paint = function(id, filter) {
|
||||
var c = document.getElementById(id);
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.filter = filter;
|
||||
ctx.fillStyle = '#A00';
|
||||
ctx.fillRect(0, 0, 15, 15);
|
||||
ctx.fillStyle = '#0A0';
|
||||
ctx.fillRect(15, 0, 15, 15);
|
||||
ctx.fillStyle = '#00A';
|
||||
ctx.fillRect(0, 15, 15, 15);
|
||||
ctx.fillStyle = "#AA0";
|
||||
ctx.fillRect(15, 15, 15, 15);
|
||||
return ctx;
|
||||
};
|
||||
|
||||
paint('output0', "none");
|
||||
paint('output1', "blur(10px)");
|
||||
paint('output2', "blur(0px)");
|
||||
paint('output3', "blur(16px)");
|
||||
paint('output4', "blur(0px)");
|
||||
paint('output5', "brightness(40%)");
|
||||
paint('output6', "contrast(20%)");
|
||||
paint('output7', "drop-shadow(0 0 5px green)");
|
||||
paint('output8', "grayscale(100%)");
|
||||
paint('output9', "invert(100%)");
|
||||
paint('output10', "opacity(50%)");
|
||||
paint('output11', "saturate(20%)");
|
||||
paint('output12', "sepia(100%)");
|
||||
paint('output13', "sepia(1) hue-rotate(200deg)");
|
||||
paint('output14', "url(#url)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint2d-filter-ref.html">
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#filter-none { background-image: paint(filter-none); }
|
||||
#filter-blur-10px { background-image: paint(filter-blur-10px); }
|
||||
#filter-blur-50vh { background-image: paint(filter-blur-50vh); }
|
||||
#filter-blur-1em { background-image: paint(filter-blur-1em); }
|
||||
#filter-blur-2percent { background-image: paint(filter-blur-2percent); }
|
||||
#filter-brightness { background-image: paint(filter-brightness); }
|
||||
#filter-contrast { background-image: paint(filter-contrast); }
|
||||
#filter-drop-shadow { background-image: paint(filter-drop-shadow); }
|
||||
#filter-grayscale { background-image: paint(filter-grayscale); }
|
||||
#filter-invert { background-image: paint(filter-invert); }
|
||||
#filter-opacity { background-image: paint(filter-opacity); }
|
||||
#filter-saturate { background-image: paint(filter-saturate); }
|
||||
#filter-sepia { background-image: paint(filter-sepia); }
|
||||
#filter-hue-rotate { background-image: paint(filter-hue-rotate); }
|
||||
#filter-url { background-image: paint(filter-url); }
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="filter-none"></div>
|
||||
<div id="filter-blur-10px"></div>
|
||||
<div id="filter-blur-50vh"></div>
|
||||
<div id="filter-blur-1em"></div>
|
||||
<div id="filter-blur-2percent"></div>
|
||||
<br>
|
||||
<div id="filter-brightness"></div>
|
||||
<div id="filter-contrast"></div>
|
||||
<div id="filter-drop-shadow"></div>
|
||||
<div id="filter-grayscale"></div>
|
||||
<div id="filter-invert"></div>
|
||||
<br>
|
||||
<div id="filter-opacity"></div>
|
||||
<div id="filter-saturate"></div>
|
||||
<div id="filter-sepia"></div>
|
||||
<div id="filter-hue-rotate"></div>
|
||||
<div id="filter-url"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var paintNames = [
|
||||
'filter-none',
|
||||
'filter-blur-10px',
|
||||
'filter-blur-50vh',
|
||||
'filter-blur-1em',
|
||||
'filter-blur-2percent',
|
||||
'filter-brightness',
|
||||
'filter-contrast',
|
||||
'filter-drop-shadow',
|
||||
'filter-grayscale',
|
||||
'filter-invert',
|
||||
'filter-opacity',
|
||||
'filter-saturate',
|
||||
'filter-sepia',
|
||||
'filter-hue-rotate',
|
||||
'filter-url'
|
||||
];
|
||||
|
||||
var filterOps = [
|
||||
'none',
|
||||
'blur(10px)',
|
||||
'blur(50vh)',
|
||||
'blur(1em)',
|
||||
'blur(2%)',
|
||||
'brightness(40%)',
|
||||
'contrast(20%)',
|
||||
'drop-shadow(0 0 5px green)',
|
||||
'grayscale(100%)',
|
||||
'invert(100%)',
|
||||
'opacity(50%)',
|
||||
'saturate(20%)',
|
||||
'sepia(100%)',
|
||||
'sepia(1) hue-rotate(200deg)',
|
||||
'url(#url)'
|
||||
];
|
||||
|
||||
function doPaint(ctx, op) {
|
||||
ctx.filter = op;
|
||||
ctx.fillStyle = '#A00';
|
||||
ctx.fillRect(0, 0, 15, 15);
|
||||
ctx.fillStyle = '#0A0';
|
||||
ctx.fillRect(15, 0, 15, 15);
|
||||
ctx.fillStyle = '#00A';
|
||||
ctx.fillRect(0, 15, 15, 15);
|
||||
ctx.fillStyle = "#AA0";
|
||||
ctx.fillRect(15, 15, 15, 15);
|
||||
};
|
||||
|
||||
for (var i = 0; i < filterOps.length; i++) {
|
||||
let op = filterOps[i];
|
||||
registerPaint(paintNames[i], class { paint(ctx, geom) { doPaint(ctx, op); } });
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="output" width="200" height="100"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('output');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
var linearGradient = ctx.createLinearGradient(0, 0, 100, 100);
|
||||
linearGradient.addColorStop(0, 'blue');
|
||||
linearGradient.addColorStop(0.5, 'red');
|
||||
linearGradient.addColorStop(1, 'white');
|
||||
ctx.fillStyle = linearGradient;
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
|
||||
var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);
|
||||
radialGradient.addColorStop(0, 'blue');
|
||||
radialGradient.addColorStop(0.5, 'red');
|
||||
radialGradient.addColorStop(1, 'white');
|
||||
ctx.fillStyle = radialGradient;
|
||||
ctx.fillRect(100, 0, 100, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint2d-gradient-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background-image: paint(gradients);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('gradients', class {
|
||||
paint(ctx, geom) {
|
||||
var linearGradient = ctx.createLinearGradient(0, 0, 100, 100);
|
||||
linearGradient.addColorStop(0, 'blue');
|
||||
linearGradient.addColorStop(0.5, 'red');
|
||||
linearGradient.addColorStop(1, 'white');
|
||||
ctx.fillStyle = linearGradient;
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
|
||||
var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);
|
||||
radialGradient.addColorStop(0, 'blue');
|
||||
radialGradient.addColorStop(0.5, 'red');
|
||||
radialGradient.addColorStop(1, 'white');
|
||||
ctx.fillStyle = radialGradient;
|
||||
ctx.fillRect(100, 0, 100, 100);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<canvas id="canvas" width="300" height="300"></canvas>
|
||||
|
||||
<script>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
var img = new Image;
|
||||
img.src = "resources/html5.png";
|
||||
img.onload = function() {
|
||||
ctx.drawImage(img, 0, 0);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint2d-image-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-image: paint(image);
|
||||
border-image: url("resources/html5.png");
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('image', class {
|
||||
static get inputProperties() { return [ 'border-image-source' ]; };
|
||||
paint(ctx, geom, styleMap) {
|
||||
ctx.drawImage(styleMap.get('border-image-source'), 0, 0);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="output" width="300" height="400"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('output');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = '10';
|
||||
ctx.strokeStyle = 'green';
|
||||
ctx.moveTo(15, 15);
|
||||
ctx.lineTo(135, 15);
|
||||
ctx.lineTo(70, 170);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
|
||||
var path1 = new Path2D();
|
||||
path1.moveTo(250, 25);
|
||||
path1.bezierCurveTo(110, 150, 110, 300, 200, 200);
|
||||
ctx.strokeStyle = 'purple';
|
||||
ctx.setLineDash([ 10, 5 ]);
|
||||
ctx.stroke(path1);
|
||||
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.beginPath()
|
||||
ctx.arc(75, 325, 50, 0, Math.PI * 2, true);
|
||||
ctx.arc(75, 325, 20, 0, Math.PI * 2, true);
|
||||
ctx.fill('evenodd');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint2d-paths-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
background-image: paint(paths);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('paths', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = '10';
|
||||
ctx.strokeStyle = 'green';
|
||||
ctx.moveTo(15, 15);
|
||||
ctx.lineTo(135, 15);
|
||||
ctx.lineTo(70, 170);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
|
||||
var path1 = new Path2D();
|
||||
path1.moveTo(250, 25);
|
||||
path1.bezierCurveTo(110, 150, 110, 300, 200, 200);
|
||||
ctx.strokeStyle = 'purple';
|
||||
ctx.setLineDash([ 10, 5 ]);
|
||||
ctx.stroke(path1);
|
||||
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.beginPath()
|
||||
ctx.arc(75, 325, 50, 0, Math.PI * 2, true);
|
||||
ctx.arc(75, 325, 20, 0, Math.PI * 2, true);
|
||||
ctx.fill('evenodd');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="output" width="100" height="100" style="background: blue;"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('output');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
|
||||
ctx.clearRect(40, 40, 20, 20);
|
||||
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(20, 20, 60, 60);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint2d-rects-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: paint(rects);
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('rects', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(0, 0, geom.width, geom.height);
|
||||
|
||||
ctx.clearRect(40, 40, 20, 20);
|
||||
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(20, 20, 60, 60);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="output" width="200" height="100"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('output');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.shadowColor = 'black';
|
||||
ctx.shadowOffsetY = 10;
|
||||
ctx.shadowOffsetX = 10;
|
||||
ctx.fillStyle = 'green'
|
||||
ctx.fillRect(10, 10, 50, 50);
|
||||
|
||||
ctx.shadowColor = 'blue';
|
||||
ctx.shadowBlur = 10;
|
||||
ctx.shadowOffsetX = 5;
|
||||
ctx.shadowOffsetY = 5;
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(110, 10, 50, 50);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint2d-shadows-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background-image: paint(shadows);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('shadows', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.shadowColor = 'black';
|
||||
ctx.shadowOffsetY = 10;
|
||||
ctx.shadowOffsetX = 10;
|
||||
ctx.fillStyle = 'green'
|
||||
ctx.fillRect(10, 10, 50, 50);
|
||||
|
||||
ctx.shadowColor = 'blue';
|
||||
ctx.shadowBlur = 10;
|
||||
ctx.shadowOffsetX = 5;
|
||||
ctx.shadowOffsetY = 5;
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(110, 10, 50, 50);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="output" width="200" height="200"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('output');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.transform(1, 0.5, 0, 1, 20, 20);
|
||||
ctx.fillRect(0, 0, 50, 50);
|
||||
|
||||
ctx.resetTransform();
|
||||
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.translate(150, 60);
|
||||
ctx.rotate(60 * Math.PI / 180);
|
||||
ctx.scale(1.5, 1);
|
||||
ctx.fillRect(0, 0, 50, 50);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint2d-transform-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-image: paint(transform);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('transform', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.transform(1, 0.5, 0, 1, 20, 20);
|
||||
ctx.fillRect(0, 0, 50, 50);
|
||||
|
||||
ctx.resetTransform();
|
||||
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.translate(150, 60);
|
||||
ctx.rotate(60 * Math.PI / 180);
|
||||
ctx.scale(1.5, 1);
|
||||
ctx.fillRect(0, 0, 50, 50);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo', class {
|
||||
static get inputArguments() {
|
||||
throw Error('failed!');
|
||||
}
|
||||
});
|
||||
} catch(ex) {
|
||||
if (ex.name == 'Error' && ex.message == 'failed!')
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo1', class {
|
||||
static get inputArguments() {
|
||||
return 'non sense stuff';
|
||||
}
|
||||
});
|
||||
} catch(ex) {
|
||||
if (ex.name == "TypeError" && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': The provided value cannot be converted to a sequence.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo2', class {
|
||||
static get inputArguments() {
|
||||
return ['<non-sense-type>'];
|
||||
}
|
||||
});
|
||||
} catch(ex) {
|
||||
if (ex.name == "TypeError" && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': Invalid argument types.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo3', class {
|
||||
static get inputArguments() {
|
||||
return ['<length>'];
|
||||
}
|
||||
paint() { }
|
||||
});
|
||||
testsPassed = true;
|
||||
} catch(ex) {
|
||||
testsPassed = false;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo', class { paint() { } });
|
||||
registerPaint('foo', class { paint() { } });
|
||||
} catch(ex) {
|
||||
if (ex.name == "NotSupportedError" && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': A class with name:'foo' is already registered.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('', class { });
|
||||
} catch(ex) {
|
||||
if (ex.name == 'TypeError' && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': The empty string is not a valid name.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo3', class {
|
||||
static get inputProperties() {
|
||||
throw Error('failed!');
|
||||
}
|
||||
});
|
||||
} catch(ex) {
|
||||
if (ex.name == 'Error' && ex.message == 'failed!')
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo4', class {
|
||||
static get inputProperties() {
|
||||
return 42;
|
||||
}
|
||||
});
|
||||
} catch(ex) {
|
||||
if (ex.name == 'TypeError' && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': The provided value cannot be converted to a sequence.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
var a = function() { };
|
||||
a.prototype = undefined;
|
||||
registerPaint('foo5', a);
|
||||
} catch(ex) {
|
||||
if (ex.name == 'TypeError' && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': The 'prototype' object on the class does not exist.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
var b = function() { };
|
||||
b.prototype = 42;
|
||||
registerPaint('foo6', b);
|
||||
} catch(ex) {
|
||||
if (ex.name == 'TypeError' && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': The 'prototype' property on the class is not an object.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo7', class { });
|
||||
} catch(ex) {
|
||||
if (ex.name == 'TypeError' && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': The 'paint' function on the prototype does not exist.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo8', class {
|
||||
get paint() {
|
||||
return 42;
|
||||
}
|
||||
});
|
||||
} catch(ex) {
|
||||
if (ex.name == 'TypeError' && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': The 'paint' property on the prototype is not a function.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo9', class { paint() { } });
|
||||
testsPassed = true;
|
||||
} catch(ex) {
|
||||
testsPassed = false;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
var c = function() { };
|
||||
c.prototype.paint = function() { };
|
||||
registerPaint('foo10', c);
|
||||
testsPassed = true;
|
||||
} catch(ex) {
|
||||
testsPassed = false;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo11', class {
|
||||
static get inputProperties() {
|
||||
return ['-webkit-border-radius'];
|
||||
}
|
||||
paint() { }
|
||||
});
|
||||
testsPassed = true;
|
||||
} catch(ex) {
|
||||
testsPassed = false;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo12', class {
|
||||
static get contextOptions() {
|
||||
return 42;
|
||||
}
|
||||
});
|
||||
} catch(ex) {
|
||||
if (ex.name == "TypeError" && ex.message == "Failed to execute 'registerPaint' on 'PaintWorkletGlobalScope': cannot convert to dictionary.")
|
||||
testsPassed = true;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo13', class {
|
||||
static get contextOptions() { return {alpha: true}; }
|
||||
paint() { }
|
||||
});
|
||||
testsPassed = true;
|
||||
} catch(ex) {
|
||||
testsPassed = false;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<p>The test result should show only one black rect border. It should not paint
|
||||
any content in the rect because registerPaint will be called twice and the
|
||||
inputArguments will return two different strings, that will throw an exception
|
||||
and paint won't be executed.</p>
|
||||
<canvas id ="canvas" width="100" height="100" style="border:1px solid black"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.clearRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-018-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
border:1px solid black;
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<p>The test result should show only one black rect border. It should not paint
|
||||
any content in the rect because registerPaint will be called twice and the
|
||||
inputArguments will return two different strings, that will throw an exception
|
||||
and paint won't be executed.</p>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
function generateRandString(length) {
|
||||
var text = "";
|
||||
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
for (var i = 0; i < length; i++)
|
||||
text += possible.charAt(Math.floor(Math.random() * possible.length));
|
||||
return text;
|
||||
}
|
||||
|
||||
try {
|
||||
registerPaint('geometry', class {
|
||||
static get inputArguments() {
|
||||
// This test is testing the case where an exception should be thrown
|
||||
// when two paint definitions with different properties are registered
|
||||
// to the same paint worklet. In order to do that, we randomly generate
|
||||
// the input properties here. We make the string length 100 to make sure
|
||||
// that it is veryyyyyyyyyyyy unlikely that two strings will be the same
|
||||
// when running this test.
|
||||
var current_str = generateRandString(100);
|
||||
return [current_str];
|
||||
}
|
||||
paint(ctx, geom) {
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
} catch(ex) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo', class {
|
||||
static get contextOptions() { return {alpha: 42}; }
|
||||
paint() {}
|
||||
});
|
||||
testsPassed = true;
|
||||
} catch(ex) {
|
||||
testsPassed = false;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo', class {
|
||||
paint() {}
|
||||
});
|
||||
testsPassed = true;
|
||||
} catch(ex) {
|
||||
testsPassed = false;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo', class {
|
||||
// Setting anything other than alpha should not throw exception, and
|
||||
// the alpha value should fall back to default, which is true.
|
||||
static get contextOptions() { return {bogus: true}; }
|
||||
paint() {}
|
||||
});
|
||||
testsPassed = true;
|
||||
} catch(ex) {
|
||||
testsPassed = false;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
var testsPassed = false;
|
||||
try {
|
||||
registerPaint('foo', class {
|
||||
static get contextOptions() { return null; }
|
||||
paint() {}
|
||||
});
|
||||
testsPassed = true;
|
||||
} catch(ex) {
|
||||
testsPassed = false;
|
||||
}
|
||||
|
||||
registerPaint('geometry', class {
|
||||
paint(ctx, geom) {
|
||||
if (testsPassed)
|
||||
ctx.strokeStyle = 'green';
|
||||
else
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="canvas" width="100" height="100"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
--length: 10px;
|
||||
--number: 10;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() {
|
||||
return [
|
||||
'--length',
|
||||
'--length-initial',
|
||||
'--number',
|
||||
];
|
||||
}
|
||||
paint(ctx, geom, styleMap) {
|
||||
const properties = styleMap.getProperties().sort();
|
||||
var serializedStrings = [];
|
||||
for (let i = 0; i < properties.length; i++) {
|
||||
const value = styleMap.get(properties[i]);
|
||||
let serialized;
|
||||
if (value)
|
||||
serialized = properties[i].toString() + ': [' + value.constructor.name + '=' + value.toString() + ']';
|
||||
else
|
||||
serialized = properties[i].toString() + ': [null]';
|
||||
serializedStrings.push(serialized);
|
||||
}
|
||||
ctx.strokeStyle = 'green';
|
||||
if (serializedStrings[0] != "--length: [CSSUnitValue=10px]")
|
||||
ctx.strokeStyle = 'red';
|
||||
if (serializedStrings[1] != "--length-initial: [CSSUnitValue=20px]")
|
||||
ctx.strokeStyle = 'blue';
|
||||
if (serializedStrings[2] != "--number: [CSSStyleValue=10]")
|
||||
ctx.strokeStyle = 'yellow';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-initial', syntax: '<length>', initialValue: '20px'});
|
||||
CSS.registerProperty({name: '--number', syntax: '<number>', initialValue: '0'});
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="canvas" width="100" height="100" style="border-radius: 2px"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="style-background-image-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 2px;
|
||||
--foo: bar;
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() {
|
||||
return [
|
||||
'--bar',
|
||||
'--foo',
|
||||
'align-items',
|
||||
'border-radius',
|
||||
];
|
||||
}
|
||||
paint(ctx, geom, styleMap) {
|
||||
const properties = styleMap.getProperties().sort();
|
||||
var serializedStrings = [];
|
||||
for (let i = 0; i < properties.length; i++) {
|
||||
const value = styleMap.get(properties[i]);
|
||||
let serialized;
|
||||
if (value)
|
||||
serialized = properties[i].toString() + ': [' + value.constructor.name + '=' + value.toString() + ']';
|
||||
else
|
||||
serialized = properties[i].toString() + ': [null]';
|
||||
serializedStrings.push(serialized);
|
||||
}
|
||||
ctx.strokeStyle = 'green';
|
||||
if (serializedStrings[0] != "--bar: [null]")
|
||||
ctx.strokeStyle = 'red';
|
||||
if (serializedStrings[1] != "--foo: [CSSStyleValue= bar]")
|
||||
ctx.strokeStyle = 'blue';
|
||||
if (serializedStrings[2] != "align-items: [CSSKeywordValue=normal]")
|
||||
ctx.strokeStyle = 'yellow';
|
||||
if (serializedStrings[3] != "border-radius: [CSSStyleValue=2px]")
|
||||
ctx.strokeStyle = 'cyan';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
div {
|
||||
border-radius: 3px;
|
||||
}
|
||||
div::before {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 2px;
|
||||
content: 'foo';
|
||||
color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
canvas{
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -1em;
|
||||
}
|
||||
</style>
|
||||
<body style="font: 10px/1 Ahem;">
|
||||
<div><canvas width="30px" height="10px"></canvas></div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var canvas = document.querySelector('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 30, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="style-before-pseudo-ref.html">
|
||||
<style>
|
||||
div {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
div::before {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
content: 'foo';
|
||||
color: rgba(0, 0, 0, 0);
|
||||
|
||||
background-image: paint(geometry);
|
||||
border-radius: 2px;
|
||||
--foo: bar;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body style="font: 10px/1 Ahem;">
|
||||
<div></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() {
|
||||
return [
|
||||
'--bar',
|
||||
'--foo',
|
||||
'border-radius',
|
||||
];
|
||||
}
|
||||
paint(ctx, geom, styleMap) {
|
||||
const properties = styleMap.getProperties().sort();
|
||||
var serializedStrings = [];
|
||||
for (let i = 0; i < properties.length; i++) {
|
||||
const value = styleMap.get(properties[i]);
|
||||
let serialized;
|
||||
if (value)
|
||||
serialized = properties[i].toString() + ': [' + value.constructor.name + '=' + value.toString() + ']';
|
||||
else
|
||||
serialized = properties[i].toString() + ': [null]';
|
||||
serializedStrings.push(serialized);
|
||||
}
|
||||
ctx.strokeStyle = 'green';
|
||||
if (serializedStrings[0] != "--bar: [null]")
|
||||
ctx.strokeStyle = 'red';
|
||||
if (serializedStrings[1] != "--foo: [CSSStyleValue= bar]")
|
||||
ctx.strokeStyle = 'blue';
|
||||
if (serializedStrings[2] != "border-radius: [CSSStyleValue=2px]")
|
||||
ctx.strokeStyle = 'yellow';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
div {
|
||||
color: rgb(0, 255, 0);
|
||||
line-height: 2px;
|
||||
}
|
||||
|
||||
div::first-letter {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
canvas{
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<body style="font: 10px/1 Ahem;">
|
||||
<div><canvas width="10px" height="10px"></canvas>ppp</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var canvas = document.querySelector('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 10, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="style-first-letter-pseudo-ref.html">
|
||||
<style>
|
||||
div {
|
||||
color: rgb(0, 255, 0);
|
||||
line-height: 1px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
div::first-letter {
|
||||
background-image: paint(geometry);
|
||||
color: rgb(255, 0, 0);
|
||||
line-height: 2px;
|
||||
}
|
||||
</style>
|
||||
<script src="../common/reftest-wait.js"></script>
|
||||
<script src="../common/css-paint-tests.js"></script>
|
||||
<body style="font: 10px/1 Ahem;">
|
||||
<div>ppp</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() {
|
||||
return [
|
||||
'color',
|
||||
'line-height',
|
||||
];
|
||||
}
|
||||
paint(ctx, geom, styleMap) {
|
||||
const properties = styleMap.getProperties().sort();
|
||||
var serializedStrings = [];
|
||||
for (let i = 0; i < properties.length; i++) {
|
||||
const value = styleMap.get(properties[i]);
|
||||
let serialized;
|
||||
if (value)
|
||||
serialized = properties[i].toString() + ': [' + value.constructor.name + '=' + value.toString() + ']';
|
||||
else
|
||||
serialized = properties[i].toString() + ': [null]';
|
||||
serializedStrings.push(serialized);
|
||||
}
|
||||
ctx.strokeStyle = 'green';
|
||||
if (serializedStrings[0] != "color: [CSSStyleValue=rgb(255, 0, 0)]")
|
||||
ctx.strokeStyle = 'red';
|
||||
if (serializedStrings[1] != "line-height: [CSSUnitValue=2px]")
|
||||
ctx.strokeStyle = 'blue';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="valid-image-after-load-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('green', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var blob = new Blob([document.getElementById('code').textContent],
|
||||
{type: 'text/javascript'});
|
||||
var frame_cnt = 0;
|
||||
CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
|
||||
var el = document.getElementById('output');
|
||||
el.style.backgroundImage = 'paint(green)';
|
||||
requestAnimationFrame(function() {
|
||||
takeScreenshot(frame_cnt);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="valid-image-before-load-ref.html">
|
||||
<style>
|
||||
#output {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('green', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var el = document.getElementById('output');
|
||||
el.style.backgroundImage = 'paint(green)';
|
||||
|
||||
var blob = new Blob([document.getElementById('code').textContent],
|
||||
{type: 'text/javascript'});
|
||||
var frame_cnt = 0;
|
||||
CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
|
||||
requestAnimationFrame(function() {
|
||||
takeScreenshot(frame_cnt);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue