提交 05b75c02 编写于 作者: D David Storey

Add image restriction

上级 bad57c50
......@@ -867,7 +867,7 @@
</value>
</values>
</entry>
<entry name="background" restriction="enum, color, length, repeat, percentage, box, url" version="1.0" browsers="all" ref="http://www.w3.org/TR/css3-background/#background" syntax="section { $(name): url(image.png) no-repeat #999; }">
<entry name="background" restriction="enum, image, color, length, repeat, percentage, box" version="1.0" browsers="all" ref="http://www.w3.org/TR/css3-background/#background" syntax="section { $(name): url(image.png) no-repeat #999; }">
<desc>Shorthand property for setting most background properties at the same place in the style sheet.</desc>
<values>
<value name="bottom" version="1.0" browsers="all">
......@@ -882,23 +882,12 @@
<value name="left" version="1.0" browsers="all">
<desc>Equivalent to '0%' for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.</desc>
</value>
<value name="linear-gradient()" version="3.0" browsers="FF16,IE10,O12.5" />
<value name="local" version="3.0" browsers="all">
<desc>The background is fixed with regard to the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents.</desc>
</value>
<value name="-moz-element(#id)" version="3.0" browsers="FF3.6" />
<value name="-moz-linear-gradient()" version="3.0" browsers="FF3.6" />
<value name="-moz-radial-gradient()" version="3.0" browsers="FF3.6" />
<value name="-moz-repeating-linear-gradient()" version="3.0" browsers="FF10" />
<value name="-moz-repeating-radial-gradient()" version="3.0" browsers="FF10" />
<value name="none" version="1.0" browsers="all">
<desc>A value of 'none' counts as an image layer but draws nothing.</desc>
</value>
<value name="-o-linear-gradient()" version="3.0" browsers="O11.1-12" />
<value name="-o-repeating-linear-gradient()" version="3.0" browsers="O11.1-12" />
<value name="radial-gradient()" version="3.0" browsers="FF16,IE10,O12.5" />
<value name="repeating-linear-gradient()" version="3.0" browsers="FF16,IE10,O12.5" />
<value name="repeating-radial-gradient()" version="3.0" browsers="FF16,IE10,O12.5" />
<value name="right" version="1.0" browsers="all">
<desc>Equivalent to '100%' for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.</desc>
</value>
......@@ -908,13 +897,6 @@
<value name="top" version="1.0" browsers="all">
<desc>Equivalent to '0%' for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.</desc>
</value>
<value name="url()" version="1.0" browsers="all" />
<value name="-webkit-gradient()" version="3.0" browsers="C,S4" />
<value name="-webkit-image-set()" version="3.0" browsers="C,S6" />
<value name="-webkit-linear-gradient()" version="3.0" browsers="C,S5.1" />
<value name="-webkit-radial-gradient()" version="3.0" browsers="C,S5.1" />
<value name="-webkit-repeating-linear-gradient()" version="3.0" browsers="C,S5.1" />
<value name="-webkit-repeating-radial-gradient()" version="3.0" browsers="C,S5.1" />
</values>
</entry>
<entry name="background-attachment" restriction="enum" version="1.0" browsers="all" ref="http://www.w3.org/TR/css3-background/#the-background-attachment" syntax=".box { $(name): fixed; }">
......@@ -990,30 +972,13 @@
<entry name="background-color" restriction="color" version="1.0" browsers="all" ref="http://www.w3.org/TR/css3-background/#the-background-color" syntax="body { $(name): white; }">
<desc>Sets the background color of an element.</desc>
</entry>
<entry name="background-image" restriction="url, enum" version="1.0" browsers="all" ref="http://www.w3.org/TR/css3-background/#the-background-image" syntax="article { $(name): url(image.png); }">
<entry name="background-image" restriction="image, enum" version="1.0" browsers="all" ref="http://www.w3.org/TR/css3-background/#the-background-image" syntax="article { $(name): url(image.png); }">
<desc>Sets the background image(s) of an element.</desc>
<values>
<value name="linear-gradient()" version="3.0" browsers="E,C26,FF16,IE10,O12.1,S6.1" />
<value name="-moz-image-rect()" version="3.0" browsers="FF3.6" />
<value name="-moz-linear-gradient()" version="3.0" browsers="FF3.6" />
<value name="-moz-radial-gradient()" version="3.0" browsers="FF3.6" />
<value name="-moz-repeating-linear-gradient()" version="3.0" browsers="FF10" />
<value name="-moz-repeating-radial-gradient()" version="3.0" browsers="FF10" />
<value name="none" version="1.0" browsers="all">
<desc>Counts as an image layer but draws nothing.</desc>
</value>
<value name="-o-linear-gradient()" version="3.0" browsers="O11.1" />
<value name="-o-repeating-linear-gradient()" version="3.0" browsers="O11.1-12" />
<value name="radial-gradient()" version="3.0" browsers="E,FF16,IE10,O12.5" />
<value name="repeating-linear-gradient()" version="3.0" browsers="E,C26,FF16,IE10,O12.1,S6.1" />
<value name="repeating-radial-gradient()" version="3.0" browsers="E,C26,FF16,IE10,O12.1,S6.1" />
<value name="url()" version="1.0" browsers="all" />
<value name="-webkit-gradient()" version="3.0" browsers="C,S4" />
<value name="-webkit-image-set()" version="3.0" browsers="C,S6" />
<value name="-webkit-linear-gradient()" version="3.0" browsers="C,S5.1" />
<value name="-webkit-radial-gradient()" version="3.0" browsers="C,S5.1" />
<value name="-webkit-repeating-linear-gradient()" version="3.0" browsers="C,S5.1" />
<value name="-webkit-repeating-radial-gradient()" version="3.0" browsers="C,S5.1" />
<value name="" version="1.0" browsers="none"/>
</values>
</entry>
<entry name="background-image-transform" restriction="enum" version="3.0" browsers="none" ref="https://drafts.csswg.org/css-logical-props/#propdef-background-image-transform" syntax="div { $(name): logical; }">
......@@ -3467,16 +3432,10 @@
<value name="url()" version="1.0" browsers="all" />
</values>
</entry>
<entry name="list-style-image" restriction="url" version="1.0" browsers="all" ref="http://www.w3.org/TR/css3-lists/#list-style-image" syntax="&lt;uri&gt; | none">
<entry name="list-style-image" restriction="image" version="1.0" browsers="all" ref="http://www.w3.org/TR/css3-lists/#list-style-image" syntax="&lt;uri&gt; | none">
<desc>Sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker.</desc>
<values>
<value name="none" version="1.0" browsers="all" />
<value name="url()" version="1.0" browsers="all" />
<value name="linear-gradient()" version="3.0" browsers="all" />
<value name="radial-gradient()" version="3.0" browsers="all" />
<value name="repeating-linear-gradient()" version="3.0" browsers="all" />
<value name="repeating-radial-gradient()" version="3.0" browsers="all" />
<value name="image()" version="3.0" browsers="none" />
</values>
</entry>
<entry name="list-style-position" restriction="enum" version="1.0" browsers="all" ref="http://www.w3.org/TR/css3-lists/#list-style-position" syntax="ul { $(name): inside; }">
......@@ -6875,28 +6834,21 @@
<entry name="shape-image-threshold" restriction="number" version="3.0" browsers="C37,O24" ref="http://www.w3.org/TR/css-shapes-1/#propdef-shape-image-threshold" syntax="div { $(name): 0.5; }">
<desc>Defines the alpha channel threshold used to extract the shape using an image. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.</desc>
</entry>
<entry name="shape-inside" restriction="url, shape, box, enum" version="4.0" browsers="none" ref="https://drafts.csswg.org/css-shapes-2/#propdef-shape-inside" syntax="div { $(name): outside-shape; }">
<entry name="shape-inside" restriction="image, shape, box, enum" version="4.0" browsers="none" ref="https://drafts.csswg.org/css-shapes-2/#propdef-shape-inside" syntax="div { $(name): outside-shape; }">
<desc>Adds one or more exclusion areas to the element’s wrapping context.</desc>
<values>
<value name="auto" version="4.0" browsers="all">
<desc>The shape is computed based on the content box of the element.</desc>
</value>
<value name="cross-fade()" version="4.0" browsers="all" />
<value name="display" version="4.0" browsers="all">
<desc>The shape is computed based on the shape of the display as described in css-round-display.</desc>
</value>
<value name="image()" version="4.0" browsers="all" />
<value name="image-set()" version="4.0" browsers="all" />
<value name="linear-gradient()" version="4.0" browsers="all" />
<value name="margin-box" version="4.0" browsers="all">
<desc>The background is painted within (clipped to) the margin box.</desc>
</value>
<value name="outside-shape" version="4.0" browsers="all">
<desc>The shape is computed based on the shape defined by the shape-outside and shape-margin properties.</desc>
</value>
<value name="radial-gradient()" version="4.0" browsers="all" />
<value name="repeating-linear-gradient()" version="4.0" browsers="all" />
<value name="repeating-radial-gradient()" version="4.0" browsers="all" />
<value name="url()" version="4.0" browsers="all">
<desc>If an SVG element it defines the shape. If an image, the shape is extracted and computed based on the alpha channel.</desc>
</value>
......@@ -6905,20 +6857,15 @@
<entry name="shape-margin" restriction="url, length, percentage" version="3.0" browsers="C37,O24" ref="http://www.w3.org/TR/css-shapes-1/#propdef-shape-margin" syntax="div { $(name): 10px; }">
<desc>Adds a margin to a 'shape-outside'. This defines a new shape that is the smallest contour that includes all the points that are the 'shape-margin' distance outward in the perpendicular direction from a point on the underlying shape.</desc>
</entry>
<entry name="shape-outside" restriction="box, shape, enum" version="3.0" browsers="C37,O24" ref="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" syntax="div { $(name): margin-box; }">
<entry name="shape-outside" restriction="image, box, shape, enum" version="3.0" browsers="C37,O24" ref="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" syntax="div { $(name): margin-box; }">
<desc>Specifies an orthogonal rotation to be applied to an image before it is laid out.</desc>
<values>
<value name="image()" version="3.0" browsers="all" />
<value name="linear-gradient()" version="3.0" browsers="all" />
<value name="margin-box" version="3.0" browsers="all">
<desc>The background is painted within (clipped to) the margin box.</desc>
</value>
<value name="none" version="3.0" browsers="all">
<desc>The float area is unaffected.</desc>
</value>
<value name="radial-gradient()" version="3.0" browsers="all" />
<value name="repeating-linear-gradient()" version="3.0" browsers="all" />
<value name="repeating-radial-gradient()" version="3.0" browsers="all" />
</values>
</entry>
<entry name="shape-padding" restriction="length" version="4.0" browsers="none" ref="https://drafts.csswg.org/css-shapes-2/#propdef-shape-padding" syntax="div { $(name): 10px; }">
......
/*---------------------------------------------------------
* Copyright (C) Microsoft Corporation. All rights reserved.
*---------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
// file generated from css-schema.xml using css-exclude_generate_browserjs.js
define(["require", "exports"], function(require, exports) {
define(["require", "exports"], function(require, exports) {
exports.data ={
"css": {
......@@ -1084,7 +1086,7 @@ exports.data ={
{
"name": "background",
"desc": "Shorthand property for setting most background properties at the same place in the style sheet.",
"restriction": "enum, color, length, repeat, percentage, box, url",
"restriction": "enum, image, color, length, repeat, percentage, box",
"values": [
{
"name": "bottom",
......@@ -1102,54 +1104,10 @@ exports.data ={
"name": "left",
"desc": "Equivalent to '0%' for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset."
},
{
"name": "linear-gradient()",
"browsers": "FF16,IE10,O12.5"
},
{
"name": "local",
"desc": "The background is fixed with regard to the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents."
},
{
"name": "-moz-element(#id)",
"browsers": "FF3.6"
},
{
"name": "-moz-linear-gradient()",
"browsers": "FF3.6"
},
{
"name": "-moz-radial-gradient()",
"browsers": "FF3.6"
},
{
"name": "-moz-repeating-linear-gradient()",
"browsers": "FF10"
},
{
"name": "-moz-repeating-radial-gradient()",
"browsers": "FF10"
},
{
"name": "-o-linear-gradient()",
"browsers": "O11.1-12"
},
{
"name": "-o-repeating-linear-gradient()",
"browsers": "O11.1-12"
},
{
"name": "radial-gradient()",
"browsers": "FF16,IE10,O12.5"
},
{
"name": "repeating-linear-gradient()",
"browsers": "FF16,IE10,O12.5"
},
{
"name": "repeating-radial-gradient()",
"browsers": "FF16,IE10,O12.5"
},
{
"name": "right",
"desc": "Equivalent to '100%' for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset."
......@@ -1161,33 +1119,6 @@ exports.data ={
{
"name": "top",
"desc": "Equivalent to '0%' for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset."
},
{
"name": "url()"
},
{
"name": "-webkit-gradient()",
"browsers": "C,S4"
},
{
"name": "-webkit-image-set()",
"browsers": "C,S6"
},
{
"name": "-webkit-linear-gradient()",
"browsers": "C,S5.1"
},
{
"name": "-webkit-radial-gradient()",
"browsers": "C,S5.1"
},
{
"name": "-webkit-repeating-linear-gradient()",
"browsers": "C,S5.1"
},
{
"name": "-webkit-repeating-radial-gradient()",
"browsers": "C,S5.1"
}
]
},
......@@ -1286,82 +1217,11 @@ exports.data ={
{
"name": "background-image",
"desc": "Sets the background image(s) of an element.",
"restriction": "url, enum",
"restriction": "image, enum",
"values": [
{
"name": "linear-gradient()",
"browsers": "E,C26,FF16,IE10,O12.1,S6.1"
},
{
"name": "-moz-image-rect()",
"browsers": "FF3.6"
},
{
"name": "-moz-linear-gradient()",
"browsers": "FF3.6"
},
{
"name": "-moz-radial-gradient()",
"browsers": "FF3.6"
},
{
"name": "-moz-repeating-linear-gradient()",
"browsers": "FF10"
},
{
"name": "-moz-repeating-radial-gradient()",
"browsers": "FF10"
},
{
"name": "none",
"desc": "Counts as an image layer but draws nothing."
},
{
"name": "-o-linear-gradient()",
"browsers": "O11.1"
},
{
"name": "-o-repeating-linear-gradient()",
"browsers": "O11.1-12"
},
{
"name": "radial-gradient()",
"browsers": "E,FF16,IE10,O12.5"
},
{
"name": "repeating-linear-gradient()",
"browsers": "E,C26,FF16,IE10,O12.1,S6.1"
},
{
"name": "repeating-radial-gradient()",
"browsers": "E,C26,FF16,IE10,O12.1,S6.1"
},
{
"name": "url()"
},
{
"name": "-webkit-gradient()",
"browsers": "C,S4"
},
{
"name": "-webkit-image-set()",
"browsers": "C,S6"
},
{
"name": "-webkit-linear-gradient()",
"browsers": "C,S5.1"
},
{
"name": "-webkit-radial-gradient()",
"browsers": "C,S5.1"
},
{
"name": "-webkit-repeating-linear-gradient()",
"browsers": "C,S5.1"
},
{
"name": "-webkit-repeating-radial-gradient()",
"browsers": "C,S5.1"
}
]
},
......@@ -3673,27 +3533,8 @@ exports.data ={
{
"name": "list-style-image",
"desc": "Sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker.",
"restriction": "url",
"values": [
{
"name": "none"
},
{
"name": "url()"
},
{
"name": "linear-gradient()"
},
{
"name": "radial-gradient()"
},
{
"name": "repeating-linear-gradient()"
},
{
"name": "repeating-radial-gradient()"
}
]
"restriction": "image",
"values": []
},
{
"name": "list-style-position",
......@@ -7940,29 +7781,14 @@ exports.data ={
"name": "shape-outside",
"desc": "Specifies an orthogonal rotation to be applied to an image before it is laid out.",
"browsers": "C37,O24",
"restriction": "box, shape, enum",
"restriction": "image, box, shape, enum",
"values": [
{
"name": "image()"
},
{
"name": "linear-gradient()"
},
{
"name": "margin-box"
},
{
"name": "none",
"desc": "The float area is unaffected."
},
{
"name": "radial-gradient()"
},
{
"name": "repeating-linear-gradient()"
},
{
"name": "repeating-radial-gradient()"
}
]
},
......
......@@ -137,6 +137,7 @@ export class CSSIntellisense {
this.getRepeatStyleProposals(entry, result);
this.getLineProposals(entry, result);
this.getBoxProposals(entry, result);
this.getImageProposals(entry, result);
this.getBasicShapeProposals(entry, result);
this.getValueEnumProposals(entry, result);
this.getCSSWideKeywordProposals(entry, result);
......@@ -344,6 +345,20 @@ export class CSSIntellisense {
return result;
}
protected getImageProposals(entry:languageFacts.IEntry, result:Modes.ISuggestion[]):Modes.ISuggestion[] {
if (entry.restrictions.indexOf('image') !== -1) {
for (var image in languageFacts.imageFunctions) {
result.push({
label: image,
documentationLabel: languageFacts.imageFunctions[image],
codeSnippet: image,
type: 'function'
});
}
};
return result;
}
protected getBasicShapeProposals(entry:languageFacts.IEntry, result:Modes.ISuggestion[]):Modes.ISuggestion[] {
if (entry.restrictions.indexOf('shape') !== -1) {
for (var shape in languageFacts.basicShapeFunctions) {
......
......@@ -239,6 +239,31 @@ export var geometryBoxKeywords : { [name:string]:string } = {
export var cssWideKeywords = ['initial', 'inherit', 'unset'];
export var imageFunctions : { [name:string]:string } = {
'url()': 'Reference an image file by URL',
'image()': 'Provide image fallbacks and annotations.',
'-webkit-image-set()': 'Provide multiple resolutions. Remember to use unprefixed image-set() in addition.',
'image-set()': 'Provide multiple resolutions of an image and let the UA decide which is most appropriate in a given situation.',
'-moz-element()': 'Use an element in the document as an image. Remember to use unprefixed element() in addition.',
'element()': 'Use an element in the document as an image.',
'cross-fade()': 'Indicates the two images to be combined and how far along in the transition the combination is.',
'-webkit-gradient()': 'Deprecated. Use modern linear-gradient() or radial-gradient() instead.',
'-webkit-linear-gradient()': 'Linear gradient. Remember to use unprefixed version in addition.',
'-moz-linear-gradient()': 'Linear gradient. Remember to use unprefixed version in addition.',
'-o-linear-gradient()': 'Linear gradient. Remember to use unprefixed version in addition.',
'linear-gradient()': 'A linear gradient is created by specifying a straight gradient line, and then several colors placed along that line.',
'-webkit-repeating-linear-gradient()': 'Repeating Linear gradient. Remember to use unprefixed version in addition.',
'-moz-repeating-linear-gradient()': 'Repeating Linear gradient. Remember to use unprefixed version in addition.',
'-o-repeating-linear-gradient()': 'RepeatingLinear gradient. Remember to use unprefixed version in addition.',
'repeating-linear-gradient()': 'Same as linear-gradient, except the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop’s position and the first specified color-stop’s position.',
'-webkit-radial-gradient()': 'Radial gradient. Remember to use unprefixed version in addition.',
'-moz-radial-gradient()': 'Radial gradient. Remember to use unprefixed version in addition.',
'radial-gradient()': 'Colors emerge from a single point and smoothly spread outward in a circular or elliptical shape.',
'-webkit-repeating-radial-gradient()': 'Repeating radial gradient. Remember to use unprefixed version in addition.',
'-moz-repeating-radial-gradient()': 'Repeating radial gradient. Remember to use unprefixed version in addition.',
'repeating-radial-gradient()': 'Same as radial-gradient, except the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop’s position and the first specified color-stop’s position.'
};
export var basicShapeFunctions : { [name:string]:string } = {
'circle()': 'Defines a circle.',
'ellipse()': 'Defines an ellipse.',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册