mirror of
https://github.com/servo/servo.git
synced 2025-06-21 07:38:59 +01:00
Auto merge of #17599 - asajeffrey:script-worklets-wpt-tests, r=jdm
Copied w3c css-paint-api wpt test suite into tests/wpt/mozilla <!-- Please describe your changes on the following line: --> As a stop-gap until #17416 lands, copy the css-paint-api wpt tests into the mozilla directory. --- <!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: --> - [X] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors - [X] There are tests for these changes <!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.--> <!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. --> <!-- Reviewable:start --> --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/17599) <!-- Reviewable:end -->
This commit is contained in:
bors-servo
GitHub
commit
fe666eb724
51 changed files with 1846 additions and 0 deletions
|
|
@ -6473,6 +6473,234 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-alpha.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/background-image-alpha.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/background-image-alpha-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-multiple.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/background-image-multiple.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/background-image-multiple-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-tiled.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/background-image-tiled.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/background-image-tiled-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-constructor-error.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/invalid-image-constructor-error.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/invalid-image-constructor-error-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-paint-error.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/invalid-image-paint-error.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/invalid-image-paint-error-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-pending-script.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/invalid-image-pending-script.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/invalid-image-pending-script-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/overdraw.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/overdraw.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/overdraw-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint-arguments.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint-arguments.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint-arguments-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint-function-arguments.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint-function-arguments.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint-function-arguments-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-composite.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-composite.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-composite-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-filter.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-filter.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-filter-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-gradient.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-gradient.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-gradient-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-image.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-image.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-image-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-paths.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-paths.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-paths-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-rects.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-rects.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-rects-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-shadows.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-shadows.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-shadows-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-transform.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-transform.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/paint2d-transform-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/valid-image-after-load.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/valid-image-after-load.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/valid-image-after-load-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/valid-image-before-load.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/valid-image-before-load.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/css-paint-api/valid-image-before-load-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/details_ui_closed.html": [
|
||||
[
|
||||
"/_mozilla/mozilla/details_ui_closed.html",
|
||||
|
|
@ -9643,6 +9871,111 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/OWNERS": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-alpha-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-multiple-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-tiled-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/css-paint-tests.js": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-constructor-error-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-paint-error-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-pending-script-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/overdraw-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint-arguments-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint-function-arguments-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-composite-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-filter-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-gradient-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-image-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-paths-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-rects-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-shadows-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-transform-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/valid-image-after-load-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/css-paint-api/valid-image-before-load-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/details_ui_closed_ref.html": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -25681,6 +26014,166 @@
|
|||
"0163758c92997c6723c9d21be49ef7f51d8b3daf",
|
||||
"testharness"
|
||||
],
|
||||
"mozilla/css-paint-api/OWNERS": [
|
||||
"0c1517f7ba747014c7c091b61d48f11421ed91c2",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-alpha-ref.html": [
|
||||
"45ef6e998e5f266741f5403df650cd9557dbe005",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-alpha.html": [
|
||||
"ec35a42013e36c05a26266f0f78a16283acc843d",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-multiple-ref.html": [
|
||||
"9ff536499d72240f67eb6911b768c624371ea678",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-multiple.html": [
|
||||
"f8c286926ccf981713eb34259e3f5389bf3c37f6",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-tiled-ref.html": [
|
||||
"a879be73470aae683bd7596132225770bc8be27b",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/background-image-tiled.html": [
|
||||
"4c7b8e525a909cbc38a2ad0b6a44a803595b6772",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/css-paint-tests.js": [
|
||||
"0e88a610e5ad9ff1deb04adec35b73caadbff201",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-constructor-error-ref.html": [
|
||||
"b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-constructor-error.html": [
|
||||
"694efcb525fed448cc757cff38ec034dad9cdb3c",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-paint-error-ref.html": [
|
||||
"b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-paint-error.html": [
|
||||
"3b0e6a034f3edbde6d30ad9483a50fbea0ab48bd",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-pending-script-ref.html": [
|
||||
"b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/invalid-image-pending-script.html": [
|
||||
"54a69d6d408e77bf2e91ee09564d62c8d16d1eb3",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/overdraw-ref.html": [
|
||||
"b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/overdraw.html": [
|
||||
"a2d730dbd6faefbd8bbd07d33f6942f6573b842e",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint-arguments-ref.html": [
|
||||
"cbe0372259011ca94f0fd8d233413439ba9cf117",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint-arguments.html": [
|
||||
"2807e0bc8b2e8aa9e5edf69f9de3e8d4ee853ef9",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint-function-arguments-ref.html": [
|
||||
"a3aebfce59d0f62ab229248b7903b0dc731835d5",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint-function-arguments.html": [
|
||||
"f3c461e7e5797d3b65058109ffc58b6c95e1a340",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-composite-ref.html": [
|
||||
"60c069de8135b934df166560db5c592d5becbc92",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-composite.html": [
|
||||
"f9d0cceb6360cbdf3478673740ecfbe67a4a11d2",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-filter-ref.html": [
|
||||
"6f1be576ae7ead2a724357b16ea88c92b3b19a0d",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-filter.html": [
|
||||
"c266200a6a990b5b23e6f9d5859f8f5c4c271be8",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-gradient-ref.html": [
|
||||
"3b2abb3632893c0f5a2714fc325467f0076001a8",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-gradient.html": [
|
||||
"6cf101de7a3aa627cb372f00eeb36e969ff25734",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-image-ref.html": [
|
||||
"c71e0b960177b13614d2c11392c94ea155927ebe",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-image.html": [
|
||||
"769d066054b6cabb77ed3f958d52bfdb17e99b8d",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-paths-ref.html": [
|
||||
"cf154ab8a37bdbce2175193dfc456f4771bfeca8",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-paths.html": [
|
||||
"8f98b1d34bb3719b5e337f279adbe63fc6c122fd",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-rects-ref.html": [
|
||||
"2a469427fbdbee6b096a63b95846cdeda92c0255",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-rects.html": [
|
||||
"e2e82b82b28af9e509a9eabf48f728dbe06b0d18",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-shadows-ref.html": [
|
||||
"f882c26b0dfb58fe1ab3177060f421dad0148456",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-shadows.html": [
|
||||
"7ca525ddfa56a8571857a8656e6bed38c440705a",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-transform-ref.html": [
|
||||
"5eff507eeee563399205645668c7ed3df79213c9",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/paint2d-transform.html": [
|
||||
"e4b544068821f6f8882f05836a07a19891fc85b8",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/valid-image-after-load-ref.html": [
|
||||
"b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/valid-image-after-load.html": [
|
||||
"abe12a4f25b5b8a52b8e9f623ac5efa80c23dc36",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/css-paint-api/valid-image-before-load-ref.html": [
|
||||
"b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
|
||||
"support"
|
||||
],
|
||||
"mozilla/css-paint-api/valid-image-before-load.html": [
|
||||
"fb574b4658f7c2000ec58f058ebb0fff1d88351e",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/details_ui_closed.html": [
|
||||
"2acbe3afbec267bad4dd986803e636740a707507",
|
||||
"reftest"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[background-image-tiled.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17598
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[invalid-image-constructor-error.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17595
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[invalid-image-paint-error.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17595
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[invalid-image-pending-script.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17595
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[paint-arguments.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17435
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[paint-function-arguments.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17435
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[paint2d-composite.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17533
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[paint2d-image.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17432
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[paint2d-paths.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17597
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[paint2d-shadows.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/17533
|
||||
3
tests/wpt/mozilla/tests/mozilla/css-paint-api/OWNERS
Normal file
3
tests/wpt/mozilla/tests/mozilla/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="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>
|
||||
|
|
@ -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="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,35 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
// 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 paintWorklet == "undefined") {
|
||||
takeScreenshot();
|
||||
} else {
|
||||
var blob = new Blob([code], {type: 'text/javascript'});
|
||||
paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
|
||||
requestAnimationFrame(function() {
|
||||
requestAnimationFrame(function() {
|
||||
takeScreenshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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="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="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="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/mozilla/tests/mozilla/css-paint-api/overdraw.html
Normal file
30
tests/wpt/mozilla/tests/mozilla/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="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,50 @@
|
|||
<!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>
|
||||
|
|
@ -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="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>
|
||||
|
|
@ -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="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="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="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="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="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="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="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="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,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="background: green; width: 100px; height: 100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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="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>
|
||||
if (window.testRunner) {
|
||||
testRunner.waitUntilDone();
|
||||
}
|
||||
|
||||
var blob = new Blob([document.getElementById('code').textContent],
|
||||
{type: 'text/javascript'});
|
||||
var frame_cnt = 0;
|
||||
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,43 @@
|
|||
<!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="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>
|
||||
if (window.testRunner) {
|
||||
testRunner.waitUntilDone();
|
||||
}
|
||||
|
||||
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;
|
||||
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