background-image-cors-no-reload.html (1601B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 4 <link rel="author" title="Mozilla" href="https://mozilla.org"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1832528"> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 :root { 11 --icon: url("/images/green.png?variable-cors-no-reload"); 12 } 13 .item::before, 14 .item::after { 15 display: block; 16 content: ""; 17 height: 1.25rem; 18 width: 1.25rem; 19 transform: rotate(180deg); 20 background: var(--icon) 50%/2rem 2rem; 21 } 22 .item::after { 23 background: blue; 24 mask: var(--icon); 25 } 26 .item.toggled::after, 27 .item.toggled::before { 28 color: blue; 29 } 30 </style> 31 <div class="item"></div> 32 <script> 33 let t = async_test("CORS image from variable doesn't cause re-downloads"); 34 35 function getEntries() { 36 let url = new URL("/images/green.png?variable-cors-no-reload", location.href).href; 37 return performance.getEntriesByName(url); 38 } 39 40 onload = t.step_func(function() { 41 let entries = getEntries(); 42 assert_equals(entries.length, 2, "should be loaded (twice, once with anon cors mode once without)"); 43 document.querySelector(".item").classList.toggle("toggled"); 44 // Assume that at least some of the time the load would complete under a second. 45 t.step_timeout(t.step_func_done(function() { 46 let entries_after = getEntries(); 47 assert_equals(entries_after.length, entries.length, "Shouldn't have caused re-downloads"); 48 }), 1000); 49 }); 50 </script>