Xidorn Quan
bdeff94733
This causes various changes to properties-db.js and also many devtools
tests get updated.
There are two changes affect multiple tests:
* `calc` gets removed from everywhere. We never have it listed in all
properties which deserve it, and doing so without much false positive
(i.e. properties don't deserve but get it) can be pretty tricky.
So they are just removed for now.
* The complete color keyword list is no longer included, and instead,
"COLOR" is prepended to the list directly. We can probably remove
the related code which replaces color keywords with "COLOR" from
devtools. Note that, with stylo enabled, the list is already unrelated
to what the parsing code uses. We should eventually re-enable the
disabled test here after we can get the color list from cssparser
in bug 1456715.
Other changes to properties-db.js seem to be valid, some of them also
affect tests:
* `{-webkit-,}align-{content,items,self}` get `first baseline`, `safe`,
`unsafe`, and lose `left` and `right`.
* `{-moz-,-webkit-,}{animation,transition}{,-timing-function}` has a
new `frame` keyword which is a function value in `<timing-function>`.
* `{background,{-webkit-,}mask}-position-x` lose `top` and `bottom`, and
correspondingly `{background,{-webkit-,}mask}-position-y` lose `left`
and `right`. They don't deserve those values.
* `{background,{-webkit-,}mask}{,-size}` get `auto`.
* `border` shorthand loses `<image>` values as well as other keyword
values for `border-image-*` subproperties, because they aren't parsed
on the shorthand.
* `{-moz-,}border-image{,-width}` get `auto`.
* `-moz-context-properties` gets `none`.
* `cursor` get some -moz-prefixed values as well as `url`.
* `fill` and `stroke` get the color keywords.
* `{-webkit-,}filter` get the keywords and function names.
* `font` shorthand loses values from many of `font-variant-*` properties
because they are not parsed there.
* `font-variant` and `font-variant-alternates` get function values of
the longhand.
* `font-variant-{east-asian,ligatures,numeric}` get `normal`, and
`font-variant-ligatures` in addition gets `none`.
`font-{feature,variation}-settings` also get `normal`.
* `grid` and `grid-template-{areas,columns,rows}` get `none`.
* `grid`, `grid-template`, and `grid-template-{columns,rows}` get
`auto`, `fit-content`, `minmax`, and `repeat`.
* `grid-auto-{columns,rows}` get `auto`, `fit-content` and `minmax`.
* `-moz-image-region` gets `auto` and `rect`.
* `{-webkit-,}justify-content` lose `baseline`, `last baseline`, and
get `safe` and `unsafe`.
* `{justify,place}-items` get `first baseline`, `legacy`, `safe`,
`unsafe` and lose `auto`.
* `{justify,place}-self` and `place-content` get `first baseline`,
`safe`, and `unsafe`.
* `outline{,-style}` get `hidden`.
* `scroll-snap-coordinate` gets `none`, and `scroll-snap-points-{x,y}`
gets `none` and `repeat`.
* `shape-outside`, `text-emphasis{,-style}` get all the keyword values
and function names they deserve.
* `stroke-dasharray` gets `none`.
* `text-combine-upright` drops `digits` which we never implemented.
* `{-moz-,-webkit-,}transform` and `-moz-window-transform` get their
transform function list. `accumulatematrix` and `interpolatematrix`
aren't real CSS value but they have `#[css(function)]` specified.
We should probably remove them at some point.
* `will-change` gets `auto`.
* All properties accept `<image>` value now gets -webkit-prefixed
gradient function names, including
* `background{,-image}`,
* `{-moz-,-webkit-,}border-image{,-source}`, and
* `{-webkit-,}mask{,-image}`.
MozReview-Commit-ID: E7Y0CFUFYgW
124 lines
4.2 KiB
HTML
124 lines
4.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
Bug 1265798 - Replace inIDOMUtils.cssPropertyIsShorthand
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test CSS Properties Actor</title>
|
|
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
|
|
<script type="application/javascript" src="inspector-helpers.js"></script>
|
|
<script type="application/javascript">
|
|
"use strict";
|
|
|
|
window.onload = function() {
|
|
const { initCssProperties, getCssProperties } =
|
|
require("devtools/shared/fronts/css-properties");
|
|
|
|
function promiseAttachUrl(url) {
|
|
return new Promise((resolve, reject) => {
|
|
attachURL(url, function(err, client, tab, doc) {
|
|
if (err) {
|
|
return reject(err);
|
|
}
|
|
return resolve({client, tab, doc});
|
|
});
|
|
});
|
|
}
|
|
|
|
function toSortedString(array) {
|
|
return JSON.stringify(array.sort());
|
|
}
|
|
|
|
const runCssPropertiesTests = async function(url, useActor) {
|
|
info(`Opening two tabs ${useActor ? "with" : "without"} CssPropertiesActor support.`);
|
|
|
|
let attachmentA = await promiseAttachUrl(url);
|
|
let attachmentB = await promiseAttachUrl(url);
|
|
|
|
const toolboxMockA = {
|
|
target: {
|
|
hasActor: () => useActor,
|
|
client: attachmentA.client,
|
|
form: attachmentA.tab
|
|
},
|
|
// Fake the window for css-properties.js's getClientBrowserVersion to work
|
|
win: window
|
|
};
|
|
const toolboxMockB = {
|
|
target: {
|
|
hasActor: () => useActor,
|
|
client: attachmentB.client,
|
|
form: attachmentB.tab
|
|
},
|
|
win: window
|
|
};
|
|
|
|
await initCssProperties(toolboxMockA);
|
|
await initCssProperties(toolboxMockB);
|
|
|
|
const cssProperties = getCssProperties(toolboxMockA);
|
|
const cssPropertiesA = getCssProperties(toolboxMockA);
|
|
const cssPropertiesB = getCssProperties(toolboxMockB);
|
|
|
|
is(cssProperties, cssPropertiesA,
|
|
"Multiple calls with the same toolbox returns the same object.");
|
|
isnot(cssProperties, cssPropertiesB,
|
|
"Multiple calls with the different toolboxes return different " +
|
|
" objects.");
|
|
|
|
ok(cssProperties.isKnown("border"),
|
|
"The `border` shorthand property is known.");
|
|
ok(cssProperties.isKnown("display"),
|
|
"The `display` property is known.");
|
|
ok(!cssProperties.isKnown("foobar"),
|
|
"A fake property is not known.");
|
|
ok(cssProperties.isKnown("--foobar"),
|
|
"A CSS variable properly evaluates.");
|
|
ok(cssProperties.isKnown("--foob\\{ar"),
|
|
"A CSS variable with escaped character properly evaluates.");
|
|
ok(cssProperties.isKnown("--fübar"),
|
|
"A CSS variable unicode properly evaluates.");
|
|
ok(!cssProperties.isKnown("--foo bar"),
|
|
"A CSS variable with spaces fails");
|
|
|
|
is(toSortedString(cssProperties.getValues("margin")),
|
|
toSortedString(["auto", "inherit", "initial", "unset"]),
|
|
"Can get values for the CSS margin.");
|
|
is(cssProperties.getValues("foobar").length, 0,
|
|
"Unknown values return an empty array.");
|
|
|
|
const bgColorValues = cssProperties.getValues("background-color");
|
|
ok(bgColorValues.includes("blanchedalmond"),
|
|
"A property with color values includes blanchedalmond.");
|
|
ok(bgColorValues.includes("papayawhip"),
|
|
"A property with color values includes papayawhip.");
|
|
ok(bgColorValues.includes("rgb"),
|
|
"A property with color values includes non-colors.");
|
|
|
|
ok(cssProperties.isValidOnClient("margin", "0px", window.document),
|
|
"Margin and 0px are valid CSS values");
|
|
ok(!cssProperties.isValidOnClient("margin", "foo", window.document),
|
|
"Margin and foo are not valid CSS values");
|
|
};
|
|
|
|
addAsyncTest(async function setup() {
|
|
let url = document.getElementById("cssProperties").href;
|
|
await runCssPropertiesTests(url, true);
|
|
await runCssPropertiesTests(url, false);
|
|
|
|
runNextTest();
|
|
});
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
runNextTest();
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1265798">Mozilla Bug 1265798</a>
|
|
<a id="cssProperties" target="_blank" href="inspector_css-properties.html">Test Document</a>
|
|
</body>
|
|
</html>
|