mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Enable css-paint-api WPT tests and remove forked duplicates
wpt tests replace all but 3 tests from forked _mozilla_ tests. These 3 were removed from wpt repo in commit de7719144e1c7da2ca8d6a543bec428fcfd3c30f, so we can remove all forked _mozilla_ css-paint-api tests
This commit is contained in:
yurket
parent
c7e3def9b2
commit
203ff9fd25
125 changed files with 49 additions and 4321 deletions
|
|
@ -25,6 +25,8 @@ skip: true
|
|||
skip: false
|
||||
[css-images]
|
||||
skip: false
|
||||
[css-paint-api]
|
||||
skip: false
|
||||
[css-style-attr]
|
||||
skip: false
|
||||
[css-text]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
[background-image-tiled.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[geometry-border-image-001.html]
|
||||
[geometry-border-image-001.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17861
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[geometry-border-image-004.html]
|
||||
[geometry-border-image-002.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17860
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[geometry-border-image-003.html]
|
||||
[geometry-border-image-003.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17860
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[geometry-border-image-005.html]
|
||||
[geometry-border-image-004.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17860
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
[geometry-with-float-size.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
[background-image-tiled.html]
|
||||
[device-pixel-ratio.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[paint2d-paths.html]
|
||||
[paint2d-paths.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17597
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[parse-input-arguments-002.html]
|
||||
[parse-input-arguments-002.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[parse-input-arguments-003.html]
|
||||
[parse-input-arguments-003.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[parse-input-arguments-005.html]
|
||||
[parse-input-arguments-005.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[parse-input-arguments-006.html]
|
||||
[parse-input-arguments-006.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[parse-input-arguments-008.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[parse-input-arguments-009.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[parse-input-arguments-010.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[parse-input-arguments-011.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[parse-input-arguments-012.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[parse-input-arguments-016.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
[parse-input-arguments-018.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[registered-properties-in-custom-paint.html]
|
||||
[registered-properties-in-custom-paint.https.html]
|
||||
type: reftest
|
||||
expected: TIMEOUT
|
||||
bug: https://github.com/servo/servo/issues/17677
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[style-background-image.html]
|
||||
[style-background-image.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17378
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[style-before-pseudo.html]
|
||||
[style-before-pseudo.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17854
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[style-first-letter-pseudo.html]
|
||||
[style-first-letter-pseudo.https.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17854
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +0,0 @@
|
|||
[geometry-background-image-003.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/w3c/web-platform-tests/issues/6601
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[geometry-border-image-002.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17860
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[paint2d-zoom.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/w3c/web-platform-tests/issues/6610
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[parse-input-arguments-008.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[parse-input-arguments-009.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[parse-input-arguments-010.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[parse-input-arguments-011.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[parse-input-arguments-012.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[parse-input-arguments-016.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17852
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@bfgeek
|
||||
@grorg
|
||||
@shans
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<!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="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 alpha() { return false; }
|
||||
paint(ctx, geom) {
|
||||
ctx.strokeStyle = 'blue';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(20, 20, 60, 60);
|
||||
}
|
||||
});
|
||||
|
||||
registerPaint('nonOpaque', class {
|
||||
static get alpha() { return 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>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!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) {
|
||||
var x = geom.width / 2;
|
||||
var y = geom.height / 2;
|
||||
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x, y, x - 1, y - 1, 0, 0, 2 * Math.PI);
|
||||
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>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!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="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) {
|
||||
var x = geom.width / 2;
|
||||
var y = geom.height / 2;
|
||||
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x, y, x - 1, y - 1, 0, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
// To make sure that we take the snapshot at the right time, we do double
|
||||
// requestAnimationFrame. In the second frame, we take a screenshot, that makes
|
||||
// sure that we already have a full frame.
|
||||
function importPaintWorkletAndTerminateTestAfterAsyncPaint(code) {
|
||||
if (typeof CSS.paintWorklet == "undefined") {
|
||||
takeScreenshot();
|
||||
} else {
|
||||
var blob = new Blob([code], {type: 'text/javascript'});
|
||||
CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
|
||||
requestAnimationFrame(function() {
|
||||
requestAnimationFrame(function() {
|
||||
takeScreenshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="200" height="200" style="position:relative;"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 8;
|
||||
context.strokeRect(0, 0, 200, 200);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-background-image-003-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="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>
|
||||
document.body.style.zoom = "200%"
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<!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.strokeStyle = 'green';
|
||||
context.lineWidth = 4;
|
||||
context.strokeRect(0, 0, 50, 50);
|
||||
context.strokeRect(50, 0, 50, 50);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<canvas id ="canvas" width="240" height="240" style="position:relative; left:-20px; top:-20px"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.strokeStyle = 'green';
|
||||
context.lineWidth = 8;
|
||||
context.strokeRect(0, 0, 240, 240);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="geometry-border-image-005-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="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 == 120 && 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';
|
||||
document.body.style.zoom = "200%";
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!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="css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint("");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<!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="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 alpha() { return true; }
|
||||
static get inputArguments() { return ['<color>']; }
|
||||
paint(ctx, geom, properties, args) {
|
||||
console.log(args.constructor);
|
||||
ctx.strokeStyle = args[0].toString();
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(20, 20, 60, 60);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<!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="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 alpha() { return 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>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<body>
|
||||
<div style="position:relative">
|
||||
<canvas id="output" width="300" height="300"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var canvas = document.getElementById('output');
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.rotate(10 * Math.PI / 180);
|
||||
ctx.strokeStyle = 'blue';
|
||||
ctx.lineWidth = 12;
|
||||
ctx.strokeRect(90, 30, 90, 90);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="paint2d-zoom-ref.html">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
#output {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: paint(worklet);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="css-paint-tests.js"></script>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('worklet', class {
|
||||
paint(ctx, geom) {
|
||||
ctx.rotate(10 * Math.PI / 180);
|
||||
ctx.strokeStyle = 'blue';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(30, 10, 30, 30);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.body.style.zoom = "300%";
|
||||
importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<!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="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>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!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="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>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue