Skip to content
Permalink
Browse files
Implement imagesrcset and imagesizes attributes on link rel=preload
https://bugs.webkit.org/show_bug.cgi?id=192950

Patch by Rob Buis <rbuis@igalia.com> on 2019-05-17
Reviewed by Youenn Fablet.

LayoutTests/imported/w3c:

Import relevant tests for this feature.

* web-platform-tests/preload/dynamic-adding-preload-imagesrcset-expected.txt: Added.
* web-platform-tests/preload/dynamic-adding-preload-imagesrcset.html: Added.
* web-platform-tests/preload/link-header-preload-delay-onload-expected.txt: Added.
* web-platform-tests/preload/link-header-preload-delay-onload.html: Added.
* web-platform-tests/preload/link-header-preload-delay-onload.html.headers: Added.
* web-platform-tests/preload/link-header-preload-expected.txt: Added.
* web-platform-tests/preload/link-header-preload-imagesrcset-expected.txt: Added.
* web-platform-tests/preload/link-header-preload-imagesrcset.html: Added.
* web-platform-tests/preload/link-header-preload-imagesrcset.html.headers: Added.
* web-platform-tests/preload/link-header-preload-nonce-expected.txt: Added.
* web-platform-tests/preload/link-header-preload-nonce.html: Added.
* web-platform-tests/preload/link-header-preload-nonce.html.headers: Added.
* web-platform-tests/preload/link-header-preload.html: Added.
* web-platform-tests/preload/link-header-preload.html.headers: Added.
* web-platform-tests/preload/onload-event-expected.txt: Added.
* web-platform-tests/preload/onload-event.html: Added.
* web-platform-tests/preload/preload-csp.sub-expected.txt:
* web-platform-tests/preload/preload-csp.sub.html:
* web-platform-tests/preload/preload-default-csp.sub-expected.txt:
* web-platform-tests/preload/preload-default-csp.sub.html:
* web-platform-tests/preload/preload-with-type-expected.txt: Added.
* web-platform-tests/preload/preload-with-type.html: Added.
* web-platform-tests/preload/resources/A4.ogv: Added.
* web-platform-tests/preload/resources/A4.ogv.sub.headers: Added.
* web-platform-tests/preload/resources/cross-origin-module.py: Added.
(main):
* web-platform-tests/preload/resources/dummy-preloads-subresource.css: Added.
* web-platform-tests/preload/resources/dummy-preloads-subresource.css.sub.headers: Added.
* web-platform-tests/preload/resources/empty.html: Added.
* web-platform-tests/preload/resources/empty.html.sub.headers: Added.
* web-platform-tests/preload/resources/foo.vtt.sub.headers: Added.
* web-platform-tests/preload/resources/module1.js: Added.
* web-platform-tests/preload/resources/module2.js: Added.
* web-platform-tests/preload/resources/preload_helper.js:
(verifyNumberOfResourceTimingEntries):
(numberOfResourceTimingEntries):
(verifyLoadedAndNoDoubleDownload):
* web-platform-tests/preload/single-download-preload-expected.txt:
* web-platform-tests/preload/single-download-preload.html:

Source/WebCore:

Implement imagesrcset and imagesizes attributes for both Link header
and link element.

Tests: imported/w3c/web-platform-tests/preload/dynamic-adding-preload-imagesrcset.html
       imported/w3c/web-platform-tests/preload/link-header-preload-delay-onload.html
       imported/w3c/web-platform-tests/preload/link-header-preload-imagesrcset.html
       imported/w3c/web-platform-tests/preload/link-header-preload-nonce.html
       imported/w3c/web-platform-tests/preload/link-header-preload.html
       imported/w3c/web-platform-tests/preload/onload-event.html
       imported/w3c/web-platform-tests/preload/preload-with-type.html

* html/HTMLAttributeNames.in:
* html/HTMLLinkElement.cpp:
(WebCore::HTMLLinkElement::process):
* html/HTMLLinkElement.idl:
* loader/LinkHeader.cpp:
(WebCore::paramterNameFromString):
(WebCore::LinkHeader::setValue):
(WebCore::LinkHeader::LinkHeader):
* loader/LinkHeader.h:
(WebCore::LinkHeader::imageSrcSet const):
(WebCore::LinkHeader::imageSizes const):
(WebCore::LinkHeader::isViewportDependent const):
* loader/LinkLoader.cpp:
(WebCore::LinkLoader::loadLinksFromHeader):
(WebCore::LinkLoader::preloadIfNeeded):
(WebCore::LinkLoader::loadLink):
* loader/LinkLoader.h:

LayoutTests:

Write special expectation for link-header-preload-imagesrcset.html because test runner
uses different dimensions on iOS.

* platform/ios-simulator-12-wk2/imported/w3c/web-platform-tests/preload/dynamic-adding-preload-imagesrcset-expected.txt: Added.
* platform/ios-simulator-12-wk2/imported/w3c/web-platform-tests/preload/link-header-preload-imagesrcset-expected.txt: Added.

Canonical link: https://commits.webkit.org/212099@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@245475 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
rwlbuis authored and webkit-commit-queue committed May 17, 2019
1 parent 7bfcbd3 commit a25dd09b515c9390c84fdcb8e9891709ee632ed1
Show file tree
Hide file tree
Showing 45 changed files with 627 additions and 44 deletions.
@@ -1,3 +1,16 @@
2019-05-17 Rob Buis <rbuis@igalia.com>

Implement imagesrcset and imagesizes attributes on link rel=preload
https://bugs.webkit.org/show_bug.cgi?id=192950

Reviewed by Youenn Fablet.

Write special expectation for link-header-preload-imagesrcset.html because test runner
uses different dimensions on iOS.

* platform/ios-simulator-12-wk2/imported/w3c/web-platform-tests/preload/dynamic-adding-preload-imagesrcset-expected.txt: Added.
* platform/ios-simulator-12-wk2/imported/w3c/web-platform-tests/preload/link-header-preload-imagesrcset-expected.txt: Added.

2019-05-17 Shawn Roberts <sroberts@apple.com>

media/controls-after-reload.html failing on iOS after unskip
@@ -1,3 +1,52 @@
2019-05-17 Rob Buis <rbuis@igalia.com>

Implement imagesrcset and imagesizes attributes on link rel=preload
https://bugs.webkit.org/show_bug.cgi?id=192950

Reviewed by Youenn Fablet.

Import relevant tests for this feature.

* web-platform-tests/preload/dynamic-adding-preload-imagesrcset-expected.txt: Added.
* web-platform-tests/preload/dynamic-adding-preload-imagesrcset.html: Added.
* web-platform-tests/preload/link-header-preload-delay-onload-expected.txt: Added.
* web-platform-tests/preload/link-header-preload-delay-onload.html: Added.
* web-platform-tests/preload/link-header-preload-delay-onload.html.headers: Added.
* web-platform-tests/preload/link-header-preload-expected.txt: Added.
* web-platform-tests/preload/link-header-preload-imagesrcset-expected.txt: Added.
* web-platform-tests/preload/link-header-preload-imagesrcset.html: Added.
* web-platform-tests/preload/link-header-preload-imagesrcset.html.headers: Added.
* web-platform-tests/preload/link-header-preload-nonce-expected.txt: Added.
* web-platform-tests/preload/link-header-preload-nonce.html: Added.
* web-platform-tests/preload/link-header-preload-nonce.html.headers: Added.
* web-platform-tests/preload/link-header-preload.html: Added.
* web-platform-tests/preload/link-header-preload.html.headers: Added.
* web-platform-tests/preload/onload-event-expected.txt: Added.
* web-platform-tests/preload/onload-event.html: Added.
* web-platform-tests/preload/preload-csp.sub-expected.txt:
* web-platform-tests/preload/preload-csp.sub.html:
* web-platform-tests/preload/preload-default-csp.sub-expected.txt:
* web-platform-tests/preload/preload-default-csp.sub.html:
* web-platform-tests/preload/preload-with-type-expected.txt: Added.
* web-platform-tests/preload/preload-with-type.html: Added.
* web-platform-tests/preload/resources/A4.ogv: Added.
* web-platform-tests/preload/resources/A4.ogv.sub.headers: Added.
* web-platform-tests/preload/resources/cross-origin-module.py: Added.
(main):
* web-platform-tests/preload/resources/dummy-preloads-subresource.css: Added.
* web-platform-tests/preload/resources/dummy-preloads-subresource.css.sub.headers: Added.
* web-platform-tests/preload/resources/empty.html: Added.
* web-platform-tests/preload/resources/empty.html.sub.headers: Added.
* web-platform-tests/preload/resources/foo.vtt.sub.headers: Added.
* web-platform-tests/preload/resources/module1.js: Added.
* web-platform-tests/preload/resources/module2.js: Added.
* web-platform-tests/preload/resources/preload_helper.js:
(verifyNumberOfResourceTimingEntries):
(numberOfResourceTimingEntries):
(verifyLoadedAndNoDoubleDownload):
* web-platform-tests/preload/single-download-preload-expected.txt:
* web-platform-tests/preload/single-download-preload.html:

2019-05-14 Oriol Brufau <obrufau@igalia.com>

[css-grid] Update grid when changing auto repeat type
@@ -0,0 +1,3 @@

PASS Makes sure that a dynamically added preload with imagesrcset works

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/preload/resources/preload_helper.js"></script>
<script>
var t = async_test('Makes sure that a dynamically added preload with imagesrcset works');
</script>
<body>
<script>
t.step(function() {
verifyPreloadAndRTSupport();
var link = document.createElement("link");
link.as = "image";
link.rel = "preload";
link.href = "resources/square.png?default";
link.imageSrcset = "resources/square.png?200 200w, resources/square.png?400 400w, resources/square.png?800 800w";
link.imageSizes = "400px";
link.onload = t.step_func(function() {
t.step_timeout(function() {
verifyNumberOfResourceTimingEntries("resources/square.png?default", 0);
verifyNumberOfResourceTimingEntries("resources/square.png?200", 0);
verifyNumberOfResourceTimingEntries("resources/square.png?400", 1);
verifyNumberOfResourceTimingEntries("resources/square.png?800", 0);
t.done();
}, 0);
});
document.body.appendChild(link);
});
</script>
</body>
@@ -0,0 +1,4 @@


PASS Makes sure that Link headers preload resources and block window.onload after resource discovery

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/preload/resources/preload_helper.js"></script>
<script>
var t = async_test('Makes sure that Link headers preload resources and block window.onload after resource discovery');
</script>
<body>
<style>
#background {
width: 200px;
height: 200px;
background-image: url(resources/square.png?background);
}
</style>
<link rel="stylesheet" href="resources/dummy.css?link-header-preload-delay-onload">
<script src="resources/dummy.js?link-header-preload-delay-onload"></script>
<div id="background"></div>
<script>
document.write('<img src="resources/square.png?link-header-preload-delay-onload">');
window.addEventListener("load", t.step_func(function() {
verifyPreloadAndRTSupport();
var entries = performance.getEntriesByType("resource");
var found_background_first = false;
for (var i = 0; i < entries.length; ++i) {
var entry = entries[i];
if (entry.name.indexOf("square") != -1) {
if (entry.name.indexOf("background") != -1)
found_background_first = true;
break;
}
}
assert_true(found_background_first);
verifyLoadedAndNoDoubleDownload("resources/square.png?link-header-preload-delay-onload");
verifyLoadedAndNoDoubleDownload("resources/square.png?background");
verifyLoadedAndNoDoubleDownload("resources/dummy.js?link-header-preload-delay-onload");
verifyLoadedAndNoDoubleDownload("resources/dummy.css?link-header-preload-delay-onload");
t.done();
}));
</script>
@@ -0,0 +1,5 @@
Link: </preload/resources/square.png?background>;rel=preload;as=image
Link: </preload/resources/dummy.js?link-header-preload-delay-onload>;rel=preload;as=script
Link: </preload/resources/dummy.css?link-header-preload-delay-onload>;rel=preload;as=style
Link: </preload/resources/square.png?link-header-preload-delay-onload>;rel=preload;as=image

@@ -0,0 +1,3 @@

PASS Makes sure that Link headers preload resources

@@ -0,0 +1,3 @@

PASS Makes sure that Link headers preload images with imagesrcset/imagesizes attributes.

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<title>Makes sure that Link headers preload images with imagesrcset/imagesizes attributes.</title>
<link rel="help" href="https://github.com/w3c/preload/issues/120">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/preload/resources/preload_helper.js"></script>
<body>
<script>
setup({explicit_done: true});

var iterations = 0;

function check_finished() {
if (numberOfResourceTimingEntries('resources/square.png?from-header&1x') == 1 &&
numberOfResourceTimingEntries('resources/square.png?from-header&2x') == 0 &&
numberOfResourceTimingEntries('resources/square.png?from-header&3x') == 0 &&
numberOfResourceTimingEntries('resources/square.png?from-header&base') == 0 &&
numberOfResourceTimingEntries('resources/square.png?from-header&200') == 0 &&
numberOfResourceTimingEntries('resources/square.png?from-header&400') == 1 &&
numberOfResourceTimingEntries('resources/square.png?from-header&800') == 0 &&
numberOfResourceTimingEntries('resources/square.png?from-header&150') == 0 &&
numberOfResourceTimingEntries('resources/square.png?from-header&300') == 1 &&
numberOfResourceTimingEntries('resources/square.png?from-header&600') == 0) {
done();
}
iterations++;
if (iterations == 10) {
// At least one is expected to fail, but this should give details to the exact failure(s).
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&1x', 1);
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&2x', 0);
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&3x', 0);
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&base', 0);
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&200', 0);
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&400', 1);
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&800', 0);
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&150', 0);
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&300', 1);
verifyNumberOfResourceTimingEntries('resources/square.png?from-header&600', 0);
done();
} else {
step_timeout(check_finished, 500);
}
}

window.addEventListener("load", function() {
verifyPreloadAndRTSupport();
step_timeout(check_finished, 500);
});
</script>
</body>
@@ -0,0 +1,3 @@
Link: <resources/square.png?from-header&1x>; rel=preload; as=image; imagesrcset="resources/square.png?from-header&2x 2x, resources/square.png?from-header&3x 3x"
Link: <resources/square.png?from-header&base>; rel=preload; as=image; imagesrcset="resources/square.png?from-header&200 200w, resources/square.png?from-header&400 400w, resources/square.png?from-header&800 800w"; imagesizes=400px
Link: <resources/square.png?from-header&base>; rel=preload; as=image; imagesrcset="resources/square.png?from-header&150 150w, resources/square.png?from-header&300 300w, resources/square.png?from-header&600 600w"; imagesizes="(min-width: 300px) 300px, 150px"
@@ -0,0 +1,6 @@
CONSOLE MESSAGE: Refused to load http://localhost:8800/preload/resources/dummy.js?from-header&without-nonce because it does not appear in the script-src directive of the Content Security Policy.
CONSOLE MESSAGE: Refused to load http://localhost:8800/preload/resources/dummy.js?from-header&with-nonce because it does not appear in the script-src directive of the Content Security Policy.
CONSOLE MESSAGE: line 2659: Error: assert_equals: resources/dummy.js?from-header&with-nonce expected 1 but got 0

FAIL Makes sure that Link headers preload resources with CSP nonce Error: assert_equals: resources/dummy.js?from-header&with-nonce expected 1 but got 0

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>Makes sure that Link headers preload resources with CSP nonce</title>
<script nonce="abc" src="/resources/testharness.js"></script>
<script nonce="abc" src="/resources/testharnessreport.js"></script>
<script nonce="abc" src="/preload/resources/preload_helper.js"></script>
<body>
<script nonce="abc">
setup({explicit_done: true});

var iterations = 0;

function check_finished() {
if (numberOfResourceTimingEntries("resources/dummy.js?from-header&without-nonce") == 0 &&
numberOfResourceTimingEntries("resources/dummy.js?from-header&with-nonce") == 1) {
done();
}
iterations++;
if (iterations == 10) {
// At least one is expected to fail, but this should give details to the exact failure(s).
verifyNumberOfResourceTimingEntries("resources/dummy.js?from-header&without-nonce", 0);
verifyNumberOfResourceTimingEntries("resources/dummy.js?from-header&with-nonce", 1);
done();
} else {
step_timeout(check_finished, 500);
}
}

window.addEventListener("load", function() {
verifyPreloadAndRTSupport();
step_timeout(check_finished, 500);
});
</script>
</body>
@@ -0,0 +1,3 @@
Content-Security-Policy: script-src 'nonce-abc'
Link: </preload/resources/dummy.js?from-header&without-nonce>;rel=preload;as=script
Link: </preload/resources/dummy.js?from-header&with-nonce>;rel=preload;as=script;nonce=abc
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>Makes sure that Link headers preload resources</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/preload/resources/preload_helper.js"></script>
<body>
<script>
setup({explicit_done: true});

var iterations = 0;

function check_finished() {
if (numberOfResourceTimingEntries("resources/square.png?link-header-preload") == 1 &&
numberOfResourceTimingEntries("resources/dummy.js?link-header-preload") == 1 &&
numberOfResourceTimingEntries("resources/dummy.css?link-header-preload") == 1) {
done();
}
iterations++;
if (iterations == 10) {
// At least one is expected to fail, but this should give details to the exact failure(s).
verifyNumberOfResourceTimingEntries("resources/square.png?link-header-preload", 1);
verifyNumberOfResourceTimingEntries("resources/dummy.js?link-header-preload", 1);
verifyNumberOfResourceTimingEntries("resources/dummy.css?link-header-preload", 1);
done();
} else {
step_timeout(check_finished, 500);
}
}

window.addEventListener("load", function() {
verifyPreloadAndRTSupport();
step_timeout(check_finished, 500);
});
</script>
</body>
@@ -0,0 +1,4 @@
Link: </preload/resources/dummy.js?link-header-preload>;rel=preload;as=script
Link: </preload/resources/dummy.css?link-header-preload>;rel=preload;as=style
Link: </preload/resources/square.png?link-header-preload>;rel=preload;as=image

@@ -0,0 +1,5 @@
CONSOLE MESSAGE: line 26: <link rel=preload> must have a valid `as` value
CONSOLE MESSAGE: line 28: <link rel=preload> must have a valid `as` value

PASS Makes sure that preloaded resources trigger the onload event

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<title>Makes sure that preloaded resources trigger the onload event</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/preload/resources/preload_helper.js"></script>
<script>
var scriptLoaded = false;
var styleLoaded = false;
var imageLoaded = false;
var fontLoaded = false;
var videoLoaded = false;
var audioLoaded = false;
var trackLoaded = false;
var gibberishLoaded = false;
var gibberishErrored = false;
var noTypeLoaded = false;
var fetchLoaded = false;
</script>
<link rel=preload href="resources/dummy.js" as=script onload="scriptLoaded = true;">
<link rel=preload href="resources/dummy.css" as=style onload="styleLoaded = true;">
<link rel=preload href="resources/square.png" as=image onload="imageLoaded = true;">
<link rel=preload href="/fonts/CanvasTest.ttf" as=font crossorigin onload="fontLoaded = true;">
<link rel=preload href="resources/white.mp4" as=video onload="videoLoaded = true;">
<link rel=preload href="resources/sound_5.oga" as=audio onload="audioLoaded = true;">
<link rel=preload href="resources/foo.vtt" as=track onload="trackLoaded = true;">
<link rel=preload href="resources/dummy.xml?foo=bar" as=foobarxmlthing onload="gibberishLoaded = true;" onerror="gibberishErrored = true;">
<link rel=preload href="resources/dummy.xml?fetch" as=fetch onload="fetchLoaded = true;">
<link rel=preload href="resources/dummy.xml" onload="noTypeLoaded = true;">
<body>
<script>
setup({explicit_done: true});

var iterations = 0;

function check_finished() {
if (styleLoaded && scriptLoaded && imageLoaded && fontLoaded && videoLoaded && audioLoaded &&
trackLoaded && !gibberishLoaded && !gibberishErrored && fetchLoaded && !noTypeLoaded) {
done();
}
iterations++;
if (iterations == 10) {
// At least one is expected to fail, but this should give details to the exact failure(s).
assert_true(styleLoaded, "style triggered load event");
assert_true(scriptLoaded, "script triggered load event");
assert_true(imageLoaded, "image triggered load event");
assert_true(fontLoaded, "font triggered load event");
assert_true(videoLoaded, "video triggered load event");
assert_true(audioLoaded, "audio triggered load event");
assert_true(trackLoaded, "track triggered load event");
assert_false(gibberishLoaded, "gibberish as value triggered load event");
assert_false(gibberishErrored, "gibberish as value triggered error event");
assert_true(fetchLoaded, "fetch as value triggered load event");
assert_false(noTypeLoaded, "empty as triggered load event");
done();
} else {
step_timeout(check_finished, 500);
}
}

window.addEventListener("load", function() {
verifyPreloadAndRTSupport();
step_timeout(check_finished, 500);
});
</script>
</body>
@@ -12,8 +12,8 @@ CONSOLE MESSAGE: Refused to load http://localhost:8800/fonts/CanvasTest.ttf beca
CONSOLE MESSAGE: Refused to load http://localhost:8800/preload/resources/white.mp4 because it does not appear in the media-src directive of the Content Security Policy.
CONSOLE MESSAGE: Refused to load http://localhost:8800/preload/resources/sound_5.oga because it does not appear in the media-src directive of the Content Security Policy.
CONSOLE MESSAGE: Refused to load http://localhost:8800/preload/resources/foo.vtt because it does not appear in the media-src directive of the Content Security Policy.
CONSOLE MESSAGE: line 16: <link rel=preload> must have a valid `as` value
CONSOLE MESSAGE: line 17: <link rel=preload> must have a valid `as` value
CONSOLE MESSAGE: line 14: <link rel=preload> must have a valid `as` value
CONSOLE MESSAGE: line 15: <link rel=preload> must have a valid `as` value

PASS Makes sure that preload requests respect CSP

0 comments on commit a25dd09

Please sign in to comment.