summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_use_counters.html
diff options
context:
space:
mode:
Diffstat (limited to 'layout/style/test/test_use_counters.html')
-rw-r--r--layout/style/test/test_use_counters.html167
1 files changed, 167 insertions, 0 deletions
diff --git a/layout/style/test/test_use_counters.html b/layout/style/test/test_use_counters.html
new file mode 100644
index 0000000000..6e676b5344
--- /dev/null
+++ b/layout/style/test/test_use_counters.html
@@ -0,0 +1,167 @@
+<!doctype html>
+<title>Test for Bug 1425700: CSS properties use-counters</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<body>
+<iframe id="iframe"></iframe>
+<iframe id="second-iframe"></iframe>
+<script>
+const iframe = document.getElementById("iframe");
+
+function iframe_reload(frame = iframe) {
+ return new Promise(resolve => {
+ frame.addEventListener("load", _ => resolve());
+ frame.contentWindow.location.reload();
+ });
+}
+
+function assert_recorded(win, recorded, properties, desc) {
+ const utils = SpecialPowers.getDOMWindowUtils(win);
+ isnot(properties.length, 0, "Sanity check");
+ for (const prop of properties) {
+ try {
+ is(utils.isCssPropertyRecordedInUseCounter(prop), recorded,
+ `${desc} - ${prop}`)
+ } catch(ex) {
+ ok(false, "Threw: " + prop);
+ }
+ }
+}
+
+// NOTE(emilio): This is no longer meaningful now we always record in the style
+// system itself, which is what this tests. But we could conceivably change
+// it so it doesn't hurt.
+add_task(async () => {
+ await SpecialPowers.pushPrefEnv({
+ "set": [
+ ["layout.css.use-counters.enabled", true],
+ ["layout.css.use-counters-unimplemented.enabled", true]
+ ]
+ });
+});
+
+// TODO(emilio): Make work (and test) inline style and maybe even CSSOM and
+// such?
+//
+// Make sure that something on the lines of the following passes:
+//
+// element.style.webkitTransform = "rotate(1deg)"
+// assert_recorded(true, ["-webkit-transform"]);
+// assert_recorded(false, ["transform"]);
+//
+const IMPLEMENTED_PROPERTIES = {
+ description: "unimplemented properties",
+ css: `
+ * {
+ grid-gap: 1px; /* shorthand alias */
+ -webkit-background-size: 100px 100px; /* longhand alias */
+ transform-origin: top left; /* longhand */
+ background: green; /* shorthand */
+ }
+ `,
+ recorded: [
+ "grid-gap",
+ "-webkit-background-size",
+ "transform-origin",
+ "background",
+ ],
+ // Should only record the aliases, not the non-aliased property.
+ // Should only record shorthands, not the longhands it expands to.
+ not_recorded: [
+ "gap",
+ "background-size",
+ "-moz-transform-origin",
+ "-webkit-transform-origin",
+ "background-color",
+ ],
+};
+
+const UNIMPLEMENTED_PROPERTIES = {
+ description: "unimplemented properties",
+ css: `
+ * {
+ grid-gap: 1px; /* shorthand alias */
+ -webkit-background-size: 100px 100px; /* longhand alias */
+ transform-origin: top left; /* longhand */
+ background: green; /* shorthand */
+ -webkit-font-smoothing: auto; /* counted unknown */
+ zoom: 0.5; /* counted unknown */
+ }
+ `,
+ recorded: [
+ "grid-gap",
+ "-webkit-background-size",
+ "transform-origin",
+ "background",
+ "-webkit-font-smoothing",
+ "zoom",
+ ],
+ not_recorded: [
+ "size",
+ "speak",
+ ],
+};
+
+// Test on regular <style> elements.
+add_task(async () => {
+ for (let test of [IMPLEMENTED_PROPERTIES, UNIMPLEMENTED_PROPERTIES]) {
+ await iframe_reload();
+
+ const win = iframe.contentWindow;
+ const style = document.createElement('style');
+ style.textContent = test.css;
+
+ iframe.contentDocument.body.appendChild(style);
+
+ assert_recorded(win, true, test.recorded, `Test ${test.description} in <style> elements`);
+ assert_recorded(win, false, test.not_recorded, `Test ${test.description} in <style> elements`);
+ }
+});
+
+// Test on constructable stylesheets.
+add_task(async () => {
+ await SpecialPowers.pushPrefEnv({
+ "set": [
+ ["layout.css.constructable-stylesheets.enabled", true]
+ ]
+ });
+
+ for (let test of [IMPLEMENTED_PROPERTIES, UNIMPLEMENTED_PROPERTIES]) {
+ for (let method of ["replace", "replaceSync"]) {
+ await iframe_reload();
+ const win = iframe.contentWindow;
+
+ const sheet = new win.CSSStyleSheet();
+ await sheet[method](test.css);
+
+ assert_recorded(win, true, test.recorded, `Test ${test.description} in constructed sheet`);
+ assert_recorded(win, false, test.not_recorded, `Test ${test.description} in constructed sheet`);
+ }
+ }
+});
+
+add_task(async () => {
+ // Test for <link rel="stylesheet">. One iteration for the uncached version, one for the cached one.
+ for (let test of [IMPLEMENTED_PROPERTIES, UNIMPLEMENTED_PROPERTIES]) {
+ const uri = "data:text/css," + encodeURIComponent(test.css);
+ for (let frame of [iframe, document.getElementById("second-iframe")]) {
+ await iframe_reload(frame);
+ const win = frame.contentWindow;
+ const doc = frame.contentDocument;
+
+ const link = doc.createElement("link");
+ link.rel = "stylesheet";
+ const linkLoaded = new Promise(resolve => {
+ link.onload = resolve;
+ });
+ link.href = uri;
+ doc.body.appendChild(link);
+ await linkLoaded;
+ assert_recorded(win, true, test.recorded, `Test ${test.description} in <link> ${frame.id}`);
+ assert_recorded(win, false, test.not_recorded, `Test ${test.description} in <link> ${frame.id}`);
+ }
+ }
+});
+
+</script>
+</body>