зеркало из https://github.com/mozilla/gecko-dev.git
215 строки
5.9 KiB
HTML
215 строки
5.9 KiB
HTML
<!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>
|
|
<script>
|
|
|
|
function iframe_reload() {
|
|
return new Promise(resolve => {
|
|
iframe.addEventListener("load", _ => resolve());
|
|
iframe.contentWindow.location.reload();
|
|
});
|
|
}
|
|
|
|
function assert_recorded(win, recorded, properties, desc) {
|
|
const utils = SpecialPowers.getDOMWindowUtils(win);
|
|
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]
|
|
]
|
|
});
|
|
|
|
await iframe_reload();
|
|
});
|
|
|
|
// Test implemented properties (i.e. non custom properties).
|
|
add_task(async () => {
|
|
let iframe = document.getElementById("iframe");
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
* {
|
|
grid-gap: 1px; /* shorthand alias */
|
|
-webkit-background-size: 100px 100px; /* longhand alias */
|
|
transform-origin: top left; /* longhand */
|
|
background: green; /* shorthand */
|
|
}
|
|
`;
|
|
|
|
iframe.contentDocument.body.appendChild(style);
|
|
|
|
const win = iframe.contentWindow;
|
|
assert_recorded(win, true, [
|
|
"grid-gap",
|
|
"-webkit-background-size",
|
|
"transform-origin",
|
|
"background"
|
|
], "Test non-custom properties");
|
|
|
|
// Should only record the aliases, not the non-aliased property.
|
|
// Should only record shorthands, not the longhands it expands to.
|
|
assert_recorded(win, false, [
|
|
"gap",
|
|
"background-size",
|
|
"-moz-transform-origin",
|
|
"-webkit-transform-origin",
|
|
"background-color",
|
|
], "Test non-custom properties");
|
|
|
|
// 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"]);
|
|
//
|
|
style.remove();
|
|
await SpecialPowers.flushPrefEnv();
|
|
});
|
|
|
|
// Test unimplemented properties.
|
|
add_task(async () => {
|
|
let iframe = document.getElementById("iframe");
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
* {
|
|
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 */
|
|
}
|
|
`;
|
|
|
|
iframe.contentDocument.body.appendChild(style);
|
|
|
|
const win = iframe.contentWindow;
|
|
assert_recorded(win, true, [
|
|
"grid-gap",
|
|
"-webkit-background-size",
|
|
"transform-origin",
|
|
"background",
|
|
"-webkit-font-smoothing",
|
|
"zoom",
|
|
], "Test unimplemented properties");
|
|
|
|
// Shouldn't record counted unknown properties which don't show up.
|
|
assert_recorded(win, false, [
|
|
"size",
|
|
"speak",
|
|
], "Test unimplemented properties");
|
|
|
|
// TODO: Make work (and test) inline style and CSSOM.
|
|
style.remove();
|
|
await SpecialPowers.flushPrefEnv();
|
|
});
|
|
|
|
// Test implemented properties (i.e. non custom properties)
|
|
// for constructed stylesheets.
|
|
add_task(async () => {
|
|
await SpecialPowers.pushPrefEnv({
|
|
"set": [
|
|
["layout.css.constructable-stylesheets.enabled", true]
|
|
]
|
|
});
|
|
|
|
await iframe_reload();
|
|
let iframe = document.getElementById("iframe");
|
|
const win = iframe.contentWindow;
|
|
|
|
const sheet = new win.CSSStyleSheet();
|
|
sheet.replaceSync(`
|
|
* {
|
|
content: "";
|
|
grid-gap: 1px; /* shorthand alias */
|
|
-webkit-background-size: 100px 100px; /* longhand alias */
|
|
transform-origin: top left; /* longhand */
|
|
background: green; /* shorthand */
|
|
}
|
|
`);
|
|
|
|
assert_recorded(win, true, [
|
|
"content",
|
|
"grid-gap",
|
|
"-webkit-background-size",
|
|
"transform-origin",
|
|
"background"
|
|
], "Test non-custom properties for constructed stylesheets");
|
|
|
|
// Should only record the aliases, not the non-aliased property.
|
|
// Should only record shorthands, not the longhands it expands to.
|
|
assert_recorded(win, false, [
|
|
"gap",
|
|
"background-size",
|
|
"-moz-transform-origin",
|
|
"-webkit-transform-origin",
|
|
"background-color",
|
|
], "Test non-custom properties for constructed stylesheets");
|
|
});
|
|
|
|
// Test unimplemented properties for constructed stylesheets.
|
|
add_task(async () => {
|
|
await SpecialPowers.pushPrefEnv({
|
|
"set": [
|
|
["layout.css.constructable-stylesheets.enabled", true]
|
|
]
|
|
});
|
|
|
|
await iframe_reload();
|
|
let iframe = document.getElementById("iframe");
|
|
const win = iframe.contentWindow;
|
|
|
|
const sheet = new win.CSSStyleSheet();
|
|
sheet.replaceSync(`
|
|
* {
|
|
content: "";
|
|
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 */
|
|
}
|
|
`);
|
|
|
|
assert_recorded(win, true, [
|
|
"content",
|
|
"grid-gap",
|
|
"-webkit-background-size",
|
|
"transform-origin",
|
|
"background",
|
|
"-webkit-font-smoothing",
|
|
"zoom",
|
|
], "Test unimplemented properties for constructed stylesheets");
|
|
|
|
// Shouldn't record counted unknown properties which don't show up.
|
|
assert_recorded(win, false, [
|
|
"size",
|
|
"speak",
|
|
], "Test unimplemented properties for constructed stylesheets");
|
|
});
|
|
|
|
</script>
|
|
</body>
|