Add and adjust image-set tests / test expectations.
The tests uncover two things:
* cursor: image-set() doesn't work, because there's no <image> in the
spec: https://drafts.csswg.org/css-ui-4/#cursor
* content: image-set() similarly doesn't work. Though in this case the
spec does call for it to work.
The later doesn't work because we don't support the whole <image> syntax
in `content` (so, we don't support `content: linear-gradient` or so on).
That seems like a separate issue to fix (WebKit does support this).
The former should probably also work (though WebKit only supports URLs
and not other images like gradients... will file a spec issue).
It also caught a bug with first-contentful-paint which I fixed drive-by:
image-set(url(..)) should be considered contentful, just like url(..) is.
The test changes are mostly straight-forward, but two changes are worth
mentioning:
* I moved one subtest that tested content: image-set() from
image-set-rendering.html to its own test, so that we can annotate the test
as passing and ensure it doesn't regress (there's no way to annotate a
reftest as "partially passing").
* I changed a test that was testing image-set('/images/red.png') as invalid
incorrectly (resolution is optional per spec and behaves like 1x).
Differential Revision: https://phabricator.services.mozilla.com/D100701
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1684909
gecko-commit: 5c7363d33df344a148a63aff09f9c548bbc144ac
gecko-reviewers: dholbert
diff --git a/css/css-images/image-set/image-set-content-rendering-ref.html b/css/css-images/image-set/image-set-content-rendering-ref.html
new file mode 100644
index 0000000..29316bc
--- /dev/null
+++ b/css/css-images/image-set/image-set-content-rendering-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+ .test {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ background: red;
+ }
+</style>
+<div class="test" style="content: url('/images/green.png')" ></div>
diff --git a/css/css-images/image-set/image-set-content-rendering.html b/css/css-images/image-set/image-set-content-rendering.html
new file mode 100644
index 0000000..9110837
--- /dev/null
+++ b/css/css-images/image-set/image-set-content-rendering.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>Image set is supported in the content property</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="help" href="https://drafts.csswg.org/css-content/#content-property">
+<link rel="match" href="image-set-content-rendering-ref.html">
+<style>
+ .test {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ background: red;
+ }
+</style>
+<div class="test" style="content: image-set(url() 2x, url('/images/green.png') 100dpi)" ></div>
diff --git a/css/css-images/image-set/image-set-parsing.html b/css/css-images/image-set/image-set-parsing.html
index bf17b2a..914d5b5 100644
--- a/css/css-images/image-set/image-set-parsing.html
+++ b/css/css-images/image-set/image-set-parsing.html
@@ -23,6 +23,8 @@
{ property: 'content', imageSet: "linear-gradient(black, white) 1x, 'example.png' 4x", valid: true },
{ property: 'content', imageSet: "url('example.png') 192dpi, linear-gradient(black, white) 1x", valid: true },
+ { property: 'background-image', imageSet: "none, url(example.png) 1x", valid: false },
+ { property: 'background-image', imageSet: "", valid: false },
{ property: 'background-image', imageSet: "url(example.png) 0x", valid: false },
{ property: 'background-image', imageSet: "url(example.png) -20x", valid: false },
{ property: 'background-image', imageSet: "'example.jpeg' 92pid url(example.png) 1x", valid: false },
diff --git a/css/css-images/image-set/image-set-rendering-ref.html b/css/css-images/image-set/image-set-rendering-ref.html
index 0f6a372..b735c38 100644
--- a/css/css-images/image-set/image-set-rendering-ref.html
+++ b/css/css-images/image-set/image-set-rendering-ref.html
@@ -32,7 +32,6 @@
<div class="test" style="background-color: lime"></div>
<div class="test" style="background-color: lime"></div>
<div class="test" style="background-color: lime"></div>
- <div class="test" style="content: url('/images/green.png')" ></div>
</main>
</body>
</html>
diff --git a/css/css-images/image-set/image-set-rendering.html b/css/css-images/image-set/image-set-rendering.html
index 44ce354..f33f34c 100644
--- a/css/css-images/image-set/image-set-rendering.html
+++ b/css/css-images/image-set/image-set-rendering.html
@@ -31,10 +31,9 @@
<div class="test" style="background-image: image-set('/images/red.png' 2x, url('/images/green.png') 1x, url('/images/yellow.png') 300dpi)" ></div>
<div class="test" style="background-color: red; background-image: image-set('' 2x, url('/images/green.png') 1x)" ></div>
<div class="test" style="background-image: image-set('/images/green.png' 1x)"></div>
- <div class="test" style="background-color: lime; background-image: image-set('/images/red.png')" ></div>
+ <div class="test" style="background-color: red; background-image: image-set('/images/green.png')" ></div>
<div class="test" style="background-color: lime; background-image: image-set('/images/red.png' 0x)" ></div>
<div class="test" style="background-color: lime; background-image: image-set('/images/red.png' 0x, url('/images/red.png') 2x)" ></div>
- <div class="test" style="content: image-set(url() 2x, url('/images/green.png') 100dpi)" ></div>
</main>
</body>
</html>
diff --git a/service-workers/service-worker/resources/fetch-request-resources-iframe.https.html b/service-workers/service-worker/resources/fetch-request-resources-iframe.https.html
index b978307..86e9f4b 100644
--- a/service-workers/service-worker/resources/fetch-request-resources-iframe.https.html
+++ b/service-workers/service-worker/resources/fetch-request-resources-iframe.https.html
@@ -44,7 +44,10 @@
function load_css_image_set(url, type) {
const div = document.createElement('div');
document.body.appendChild(div);
- div.style[type] = '-webkit-image-set(url(' + url + ') 1x)';
+ div.style[type] = 'image-set(url(' + url + ') 1x)';
+ if (!div.style[type]) {
+ div.style[type] = '-webkit-image-set(url(' + url + ') 1x)';
+ }
}
function load_script_with_integrity(url, integrity) {
