| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <body> |
| <script> |
| "use strict"; |
| const CHILD_URL = "./resources/reference-css-no-cache.xhtml"; |
| const EXPECTED_STYLE = "rgb(255, 0, 0) rgb(0, 128, 0)"; |
| |
| const queuedMessages = []; |
| const callbacksAwaitingMessages = []; |
| window.addEventListener("message", function(ev) { |
| if (callbacksAwaitingMessages.length > 0) { |
| const nextCallback = callbacksAwaitingMessages.shift(); |
| nextCallback(ev.data); |
| } else { |
| queuedMessages.push(ev.data); |
| } |
| }); |
| function dequeueMessage() { |
| return new Promise((resolve, reject) => { |
| if (queuedMessages.length === 0) { |
| callbacksAwaitingMessages.push(resolve); |
| } else { |
| resolve(queuedMessages.shift()); |
| } |
| }); |
| } |
| |
| function createFrame(name) { |
| return new Promise((resolve, reject) => { |
| const iframe = document.createElement("iframe"); |
| iframe.name = name; |
| iframe.addEventListener("load", () => resolve(iframe), {once: true}); |
| iframe.src = CHILD_URL; |
| window.document.documentElement.appendChild(iframe); |
| }); |
| } |
| |
| function reloadFrame(frame) { |
| return new Promise(resolve => { |
| frame.addEventListener("load", () => resolve(frame), {once: true}); |
| frame.src = frame.src; |
| }); |
| } |
| |
| promise_test(() => { |
| var frameA, frameB; |
| return Promise.resolve() |
| .then(() => createFrame("A")).then(result => { |
| frameA = result; |
| frameA.contentWindow.postMessage("query applied style", "*"); |
| }) |
| .then(dequeueMessage).then(styleInfoA => { |
| assert_equals(styleInfoA, "A " + EXPECTED_STYLE, "frame A should have the style applied"); |
| }) |
| .then(() => createFrame("B")).then(result => { |
| frameB = result; |
| frameB.contentWindow.postMessage("query applied style", "*"); |
| }) |
| .then(dequeueMessage).then(styleInfoB => { |
| assert_equals(styleInfoB, "B " + EXPECTED_STYLE, "frame B should have the style applied"); |
| }) |
| .then(() => reloadFrame(frameA)) |
| .then(() => frameA.contentWindow.postMessage("query applied style", "*")) |
| .then(dequeueMessage).then(styleInfoA => { |
| assert_equals(styleInfoA, "A " + EXPECTED_STYLE, "frame A should have the style applied"); |
| }) |
| .then(() => frameB.contentWindow.postMessage("query applied style", "*")) |
| .then(dequeueMessage).then(styleInfoB => { |
| assert_equals(styleInfoB, "B " + EXPECTED_STYLE, "frame B should have the style applied"); |
| }) |
| .then(() => reloadFrame(frameB)) |
| .then(() => frameA.contentWindow.postMessage("query applied style", "*")) |
| .then(dequeueMessage).then(styleInfoA => { |
| assert_equals(styleInfoA, "A " + EXPECTED_STYLE, "frame A should have the style applied"); |
| }) |
| .then(() => frameB.contentWindow.postMessage("query applied style", "*")) |
| .then(dequeueMessage).then(styleInfoB => { |
| assert_equals(styleInfoB, "B " + EXPECTED_STYLE, "frame B should have the style applied"); |
| }); |
| }, 'Revalidated CSS should not be unapplied on existing clients.'); |
| </script> |
