From dcb9168d66836fbf2e50d3a3110a76a4f93ba279 Mon Sep 17 00:00:00 2001 From: Matt Falkenhagen Date: Wed, 5 Dec 2018 21:42:55 -0800 Subject: [PATCH] WPT: service worker: fix test for CSS base URL. The existing test was asserting the opposite of the standard, which is to use the response URL. See https://github.com/whatwg/fetch/pull/146. This CL does the following: - Tests that a CSS stylesheet fetched via respondWith(fetch(responseUrl) uses responseUrl as its base URL. - Tests that a CSS stylesheet fetched via respondWith(new Response()) uses the response URL (which is the request URL) as its base URL. - Changes the test to not test cross-origin stylesheets. That is more complex than needed for this test, and there is talk of making subresource requests from opaque stylesheets skip the service worker, which would render the test ineffective for testing base URL. - Changes the test to use waitUntil() in the message event to try to ensure the service worker stays alive between the message and fetch events. Bug: 911974 Change-Id: I167dfe86986ec718a50d512f862f1eb49889608b Reviewed-on: https://chromium-review.googlesource.com/c/1362776 Commit-Queue: Matt Falkenhagen Reviewed-by: Ben Kelly Cr-Commit-Position: refs/heads/master@{#614277} --- .../fetch-request-css-base-url.https.html | 133 +++++++++++------- .../fetch-request-css-base-url-iframe.html | 21 ++- .../fetch-request-css-base-url-worker.js | 64 ++++++--- 3 files changed, 142 insertions(+), 76 deletions(-) diff --git a/service-workers/service-worker/fetch-request-css-base-url.https.html b/service-workers/service-worker/fetch-request-css-base-url.https.html index 7feccfb98c56fa..a08e0c74881364 100644 --- a/service-workers/service-worker/fetch-request-css-base-url.https.html +++ b/service-workers/service-worker/fetch-request-css-base-url.https.html @@ -1,58 +1,87 @@ -Service Worker: CSS's base URL must be the request URL even when fetched from other URL +Service Worker: CSS's base URL must be the response URL - diff --git a/service-workers/service-worker/resources/fetch-request-css-base-url-iframe.html b/service-workers/service-worker/resources/fetch-request-css-base-url-iframe.html index 0edf2e7f9659a5..504e1043564233 100644 --- a/service-workers/service-worker/resources/fetch-request-css-base-url-iframe.html +++ b/service-workers/service-worker/resources/fetch-request-css-base-url-iframe.html @@ -1 +1,20 @@ - + + +iframe for css base url test + + + + + diff --git a/service-workers/service-worker/resources/fetch-request-css-base-url-worker.js b/service-workers/service-worker/resources/fetch-request-css-base-url-worker.js index 91c325998a3b8d..e8dbd2725c68f9 100644 --- a/service-workers/service-worker/resources/fetch-request-css-base-url-worker.js +++ b/service-workers/service-worker/resources/fetch-request-css-base-url-worker.js @@ -1,27 +1,45 @@ -importScripts('/common/get-host-info.sub.js'); -importScripts('test-helpers.sub.js'); +let source; +let resolveDone; +let done = new Promise(resolve => resolveDone = resolve); -var port = undefined; +// The page messages this worker to ask for the result. Keep the worker alive +// via waitUntil() until the result is sent. +self.addEventListener('message', event => { + source = event.data.port; + source.postMessage('pong'); + event.waitUntil(done); +}); -self.onmessage = function(e) { - var message = e.data; - if ('port' in message) { - port = message.port; - port.postMessage({ready: true}); - } -}; +self.addEventListener('fetch', event => { + const url = new URL(event.request.url); -self.addEventListener('fetch', function(event) { - var url = event.request.url; - if (url.indexOf('fetch-request-css-base-url-style.css') != -1) { - event.respondWith(fetch( - get_host_info()['HTTPS_REMOTE_ORIGIN'] + base_path() + - 'fetch-request-css-base-url-style.css', - {mode: 'no-cors'})); - } else if (url.indexOf('dummy.png') != -1) { - port.postMessage({ - url: event.request.url, - referrer: event.request.referrer - }); + // For the CSS file, respond in a way that may change the response URL, + // depending on |url.search|. + const cssPath = 'request-url-path/fetch-request-css-base-url-style.css'; + if (url.pathname.indexOf(cssPath) != -1) { + // Respond with a different URL, deleting "request-url-path/". + if (url.search == '?fetch') { + event.respondWith(fetch('fetch-request-css-base-url-style.css')); + } + // Respond with new Response(). + else if (url.search == '?newResponse') { + const styleString = 'body { background-image: url("./dummy.png");}'; + const headers = {'content-type': 'text/css'}; + event.respondWith(new Response(styleString, headers)); } - }); + } + + // The image request indicates what the base URL of the CSS was. Message the + // result back to the test page. + else if (url.pathname.indexOf('dummy.png') != -1) { + // For some reason |source| is undefined here when running the test manually + // in Firefox. The test author experimented with both using Client + // (event.source) and MessagePort to try to get the test to pass, but + // failed. + source.postMessage({ + url: event.request.url, + referrer: event.request.referrer + }); + resolveDone(); + } +});