test_use_counters.html (4880B)
1 <!doctype html> 2 <title>Test for Bug 1425700: CSS properties use-counters</title> 3 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <body> 6 <iframe id="iframe"></iframe> 7 <iframe id="second-iframe"></iframe> 8 <script> 9 const iframe = document.getElementById("iframe"); 10 11 function iframe_reload(frame = iframe) { 12 return new Promise(resolve => { 13 frame.addEventListener("load", _ => resolve()); 14 frame.contentWindow.location.reload(); 15 }); 16 } 17 18 function assert_recorded(win, recorded, properties, desc) { 19 const utils = SpecialPowers.getDOMWindowUtils(win); 20 isnot(properties.length, 0, "Sanity check"); 21 for (const prop of properties) { 22 try { 23 is(utils.isCssPropertyRecordedInUseCounter(prop), recorded, 24 `${desc} - ${prop}`) 25 } catch(ex) { 26 ok(false, "Threw: " + prop); 27 } 28 } 29 } 30 31 // NOTE(emilio): This is no longer meaningful now we always record in the style 32 // system itself, which is what this tests. But we could conceivably change 33 // it so it doesn't hurt. 34 add_task(async () => { 35 await SpecialPowers.pushPrefEnv({ 36 "set": [ 37 ["layout.css.use-counters.enabled", true], 38 ["layout.css.use-counters-unimplemented.enabled", true] 39 ] 40 }); 41 }); 42 43 // TODO(emilio): Make work (and test) inline style and maybe even CSSOM and 44 // such? 45 // 46 // Make sure that something on the lines of the following passes: 47 // 48 // element.style.webkitTransform = "rotate(1deg)" 49 // assert_recorded(true, ["-webkit-transform"]); 50 // assert_recorded(false, ["transform"]); 51 // 52 const IMPLEMENTED_PROPERTIES = { 53 description: "unimplemented properties", 54 css: ` 55 * { 56 grid-gap: 1px; /* shorthand alias */ 57 -webkit-background-size: 100px 100px; /* longhand alias */ 58 transform-origin: top left; /* longhand */ 59 background: green; /* shorthand */ 60 } 61 `, 62 recorded: [ 63 "grid-gap", 64 "-webkit-background-size", 65 "transform-origin", 66 "background", 67 ], 68 // Should only record the aliases, not the non-aliased property. 69 // Should only record shorthands, not the longhands it expands to. 70 not_recorded: [ 71 "gap", 72 "background-size", 73 "-moz-transform-origin", 74 "-webkit-transform-origin", 75 "background-color", 76 ], 77 }; 78 79 const UNIMPLEMENTED_PROPERTIES = { 80 description: "unimplemented properties", 81 css: ` 82 * { 83 grid-gap: 1px; /* shorthand alias */ 84 -webkit-background-size: 100px 100px; /* longhand alias */ 85 transform-origin: top left; /* longhand */ 86 background: green; /* shorthand */ 87 -webkit-tap-highlight-color: cyan; /* counted unknown */ 88 } 89 `, 90 recorded: [ 91 "grid-gap", 92 "-webkit-background-size", 93 "transform-origin", 94 "background", 95 "-webkit-tap-highlight-color", 96 ], 97 not_recorded: [ 98 "size", 99 "speak", 100 ], 101 }; 102 103 // Test on regular <style> elements. 104 add_task(async () => { 105 for (let test of [IMPLEMENTED_PROPERTIES, UNIMPLEMENTED_PROPERTIES]) { 106 await iframe_reload(); 107 108 const win = iframe.contentWindow; 109 const style = document.createElement('style'); 110 style.textContent = test.css; 111 112 iframe.contentDocument.body.appendChild(style); 113 114 assert_recorded(win, true, test.recorded, `Test ${test.description} in <style> elements`); 115 assert_recorded(win, false, test.not_recorded, `Test ${test.description} in <style> elements`); 116 } 117 }); 118 119 // Test on constructable stylesheets. 120 add_task(async () => { 121 for (let test of [IMPLEMENTED_PROPERTIES, UNIMPLEMENTED_PROPERTIES]) { 122 for (let method of ["replace", "replaceSync"]) { 123 await iframe_reload(); 124 const win = iframe.contentWindow; 125 126 const sheet = new win.CSSStyleSheet(); 127 await sheet[method](test.css); 128 129 assert_recorded(win, true, test.recorded, `Test ${test.description} in constructed sheet`); 130 assert_recorded(win, false, test.not_recorded, `Test ${test.description} in constructed sheet`); 131 } 132 } 133 }); 134 135 add_task(async () => { 136 // Test for <link rel="stylesheet">. One iteration for the uncached version, one for the cached one. 137 for (let test of [IMPLEMENTED_PROPERTIES, UNIMPLEMENTED_PROPERTIES]) { 138 const uri = "data:text/css," + encodeURIComponent(test.css); 139 for (let frame of [iframe, document.getElementById("second-iframe")]) { 140 await iframe_reload(frame); 141 const win = frame.contentWindow; 142 const doc = frame.contentDocument; 143 144 const link = doc.createElement("link"); 145 link.rel = "stylesheet"; 146 const linkLoaded = new Promise(resolve => { 147 link.onload = resolve; 148 }); 149 link.href = uri; 150 doc.body.appendChild(link); 151 await linkLoaded; 152 assert_recorded(win, true, test.recorded, `Test ${test.description} in <link> ${frame.id}`); 153 assert_recorded(win, false, test.not_recorded, `Test ${test.description} in <link> ${frame.id}`); 154 } 155 } 156 }); 157 158 </script> 159 </body>