Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: !nightly_build
- Manifest: layout/style/test/mochitest.toml
<!doctype html>
<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-tap-highlight-color: cyan; /* counted unknown */
}
`,
recorded: [
"grid-gap",
"-webkit-background-size",
"transform-origin",
"background",
"-webkit-tap-highlight-color",
],
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 () => {
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>