diff --git a/build/gulpfile.hygiene.js b/build/gulpfile.hygiene.js index ea14b749dd5f43be32aef39adbee4758df478cd0..d5d2f3ee13053c857d46b42037be6d380cfb5033 100644 --- a/build/gulpfile.hygiene.js +++ b/build/gulpfile.hygiene.js @@ -71,6 +71,7 @@ var copyrightFilter = [ '!**/*.bat', '!**/*.cmd', '!resources/win32/bin/code.js', + '!**/*.xml', '!**/*.sh', '!**/*.txt', '!**/*.xpm', diff --git a/build/npm/postinstall.js b/build/npm/postinstall.js index 590bc6a7ddcb4f038f7352d48009fb69bfd3da63..1a73f1e0ab9e7d8a6581871a5ae2c2aed8a90178 100644 --- a/build/npm/postinstall.js +++ b/build/npm/postinstall.js @@ -13,7 +13,8 @@ const extensions = [ 'configuration-editing', 'typescript', 'php', - 'javascript' + 'javascript', + 'css' ]; extensions.forEach(extension => { diff --git a/extensions/css/.vscode/launch.json b/extensions/css/.vscode/launch.json new file mode 100644 index 0000000000000000000000000000000000000000..7a654d67e8dc76f1cceb2a6b069cb3f14d2e3b21 --- /dev/null +++ b/extensions/css/.vscode/launch.json @@ -0,0 +1,29 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Launch Extension", + "type": "extensionHost", + "request": "launch", + "runtimeExecutable": "${execPath}", + "args": [ + "--extensionDevelopmentPath=${workspaceRoot}" + ], + "stopOnEntry": false, + "sourceMaps": true, + "outDir": "${workspaceRoot}/client/out", + "preLaunchTask": "npm" + }, + { + "name": "Launch Tests", + "type": "extensionHost", + "request": "launch", + "runtimeExecutable": "${execPath}", + "args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/client/out/test" ], + "stopOnEntry": false, + "sourceMaps": true, + "outDir": "${workspaceRoot}/client/out/test", + "preLaunchTask": "npm" + } + ] +} \ No newline at end of file diff --git a/extensions/css/.vscode/tasks.json b/extensions/css/.vscode/tasks.json new file mode 100644 index 0000000000000000000000000000000000000000..a132a04214de559c5bb3e51a981434bf63c4b1d7 --- /dev/null +++ b/extensions/css/.vscode/tasks.json @@ -0,0 +1,30 @@ +// Available variables which can be used inside of strings. +// ${workspaceRoot}: the root folder of the team +// ${file}: the current opened file +// ${fileBasename}: the current opened file's basename +// ${fileDirname}: the current opened file's dirname +// ${fileExtname}: the current opened file's extension +// ${cwd}: the current working directory of the spawned process + +// A task runner that calls a custom npm script that compiles the extension. +{ + "version": "0.1.0", + + // we want to run npm + "command": "npm", + + // the command is a shell script + "isShellCommand": true, + + // show the output window only if unrecognized errors occur. + "showOutput": "silent", + + // we run the custom script "compile" as defined in package.json + "args": ["run", "compile"], + + // The tsc compiler is started in watching mode + "isWatching": true, + + // use the standard tsc in watch mode problem matcher to find compile problems in the output. + "problemMatcher": "$tsc-watch" +} \ No newline at end of file diff --git a/extensions/css/client/src/colorDecorators.ts b/extensions/css/client/src/colorDecorators.ts new file mode 100644 index 0000000000000000000000000000000000000000..ab9f7941bd66f228cdc2f43c860a63d40b46d6d5 --- /dev/null +++ b/extensions/css/client/src/colorDecorators.ts @@ -0,0 +1,83 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import {window, workspace, DecorationOptions, DecorationRenderOptions, Disposable, Range} from 'vscode'; + +let decorationType: DecorationRenderOptions = { + before: { + contentText: ' ', + border: 'solid 0.1em #000', + margin: '0.1em 0.2em 0 0.2em', + width: '0.8em', + height: '0.8em' + }, + dark: { + before: { + border: 'solid 0.1em #eee' + } + } +}; + +export function activateColorDecorations(decoratorProvider: (uri: string) => Thenable, supportedLanguages: { [id: string]: boolean }): Disposable { + + let disposables: Disposable[] = []; + + let colorsDecorationType = window.createTextEditorDecorationType(decorationType); + disposables.push(colorsDecorationType); + + let activeEditor = window.activeTextEditor; + if (activeEditor) { + triggerUpdateDecorations(); + } + + window.onDidChangeActiveTextEditor(editor => { + activeEditor = editor; + if (editor && supportedLanguages[activeEditor.document.languageId]) { + triggerUpdateDecorations(); + } + }, null, disposables); + + workspace.onDidChangeTextDocument(event => { + if (activeEditor && event.document === activeEditor.document && supportedLanguages[activeEditor.document.languageId]) { + triggerUpdateDecorations(); + } + }, null, disposables); + + let timeout = null; + function triggerUpdateDecorations() { + if (timeout) { + clearTimeout(timeout); + } + timeout = setTimeout(updateDecorations, 500); + } + + function updateDecorations() { + if (!activeEditor) { + return; + } + let document = activeEditor.document; + if (!supportedLanguages[document.languageId]) { + return; + } + let uri = activeEditor.document.uri.toString(); + decoratorProvider(uri).then(ranges => { + + let decorations = ranges.map(range => { + let color = document.getText(range); + return { + range: range, + renderOptions: { + before: { + backgroundColor: color + } + } + }; + }); + activeEditor.setDecorations(colorsDecorationType, decorations); + }); + } + return Disposable.from(...disposables); +} diff --git a/extensions/css/client/src/cssMain.ts b/extensions/css/client/src/cssMain.ts new file mode 100644 index 0000000000000000000000000000000000000000..a1949ae90caa995bb1f26d14d833bb58510e6690 --- /dev/null +++ b/extensions/css/client/src/cssMain.ts @@ -0,0 +1,125 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as path from 'path'; + +import {languages, window, commands, ExtensionContext} from 'vscode'; +import {LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, RequestType, Range, TextEdit, Protocol2Code} from 'vscode-languageclient'; +import {activateColorDecorations} from './colorDecorators'; + +namespace ColorSymbolRequest { + export const type: RequestType = { get method() { return 'css/colorSymbols'; } }; +} + +// this method is called when vs code is activated +export function activate(context: ExtensionContext) { + + // The server is implemented in node + let serverModule = context.asAbsolutePath(path.join('server', 'out', 'cssServerMain.js')); + // The debug options for the server + let debugOptions = { execArgv: ['--nolazy', '--debug=6004'] }; + + // If the extension is launch in debug mode the debug server options are use + // Otherwise the run options are used + let serverOptions: ServerOptions = { + run: { module: serverModule, transport: TransportKind.ipc }, + debug: { module: serverModule, transport: TransportKind.ipc, options: debugOptions } + }; + + // Options to control the language client + let clientOptions: LanguageClientOptions = { + documentSelector: ['css', 'less', 'scss'], + synchronize: { + configurationSection: ['css', 'scss', 'less'] + }, + initializationOptions: { + } + }; + + // Create the language client and start the client. + let client = new LanguageClient('css', serverOptions, clientOptions); + + let disposable = client.start(); + // Push the disposable to the context's subscriptions so that the + // client can be deactivated on extension deactivation + context.subscriptions.push(disposable); + + let colorRequestor = (uri: string) => { + return client.sendRequest(ColorSymbolRequest.type, uri).then(ranges => ranges.map(Protocol2Code.asRange)); + }; + disposable = activateColorDecorations(colorRequestor, { css: true, scss: true, less: true }); + context.subscriptions.push(disposable); + + languages.setLanguageConfiguration('css', { + wordPattern: /(#?-?\d*\.\d\w*%?)|((::|[@#.!:])?[\w-?]+%?)|::|[@#.!:]/g, + comments: { + blockComment: ['/*', '*/'] + }, + brackets: [['{', '}'], ['[', ']'], ['(', ')']], + autoClosingPairs: [ + { open: '{', close: '}' }, + { open: '[', close: ']' }, + { open: '(', close: ')' }, + { open: '"', close: '"', notIn: ['string'] }, + { open: '\'', close: '\'', notIn: ['string'] } + ] + }); + + languages.setLanguageConfiguration('less', { + wordPattern: /(#?-?\d*\.\d\w*%?)|([@#!.:]?[\w-?]+%?)|[@#!.]/g, + comments: { + blockComment: ['/*', '*/'], + lineComment: '//' + }, + brackets: [['{', '}'], ['[', ']'], ['(', ')'], ['<', '>']], + autoClosingPairs: [ + { open: '"', close: '"', notIn: ['string', 'comment'] }, + { open: '\'', close: '\'', notIn: ['string', 'comment'] }, + { open: '{', close: '}', notIn: ['string', 'comment'] }, + { open: '[', close: ']', notIn: ['string', 'comment'] }, + { open: '(', close: ')', notIn: ['string', 'comment'] }, + { open: '<', close: '>', notIn: ['string', 'comment'] }, + ] + }); + + languages.setLanguageConfiguration('scss', { + wordPattern: /(#?-?\d*\.\d\w*%?)|([@#!.:]?[\w-?]+%?)|[@#!.]/g, + comments: { + blockComment: ['/*', '*/'], + lineComment: '//' + }, + brackets: [['{', '}'], ['[', ']'], ['(', ')'], ['<', '>']], + autoClosingPairs: [ + { open: '"', close: '"', notIn: ['string', 'comment'] }, + { open: '\'', close: '\'', notIn: ['string', 'comment'] }, + { open: '{', close: '}', notIn: ['string', 'comment'] }, + { open: '[', close: ']', notIn: ['string', 'comment'] }, + { open: '(', close: ')', notIn: ['string', 'comment'] }, + { open: '<', close: '>', notIn: ['string', 'comment'] }, + ] + }); + + commands.registerCommand('_css.applyCodeAction', applyCodeAction); +} + +function applyCodeAction(uri: string, documentVersion: number, edits: TextEdit[]) { + let textEditor = window.activeTextEditor; + if (textEditor && textEditor.document.uri.toString() === uri) { + if (textEditor.document.version !== documentVersion) { + window.showInformationMessage(`CSS fix is outdated and can't be applied to the document.`); + } + textEditor.edit(mutator => { + for (let edit of edits) { + mutator.replace(Protocol2Code.asRange(edit.range), edit.newText); + } + }).then(success => { + if (!success) { + window.showErrorMessage('Failed to apply CSS fix to the document. Please consider opening an issue with steps to reproduce.'); + } + }); + } +} + diff --git a/extensions/css/client/src/typings/ref.d.ts b/extensions/css/client/src/typings/ref.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..25ca0850b752c033074891a04c280bbcfbc3d79f --- /dev/null +++ b/extensions/css/client/src/typings/ref.d.ts @@ -0,0 +1,11 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +/// +/// +/// +/// +/// +/// \ No newline at end of file diff --git a/extensions/css/client/tsconfig.json b/extensions/css/client/tsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..8cb1633437728038691588a558cc8917c812ade2 --- /dev/null +++ b/extensions/css/client/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "noLib": true, + "target": "es5", + "module": "commonjs", + "outDir": "./out" + }, + "exclude": [ + "node_modules" + ] +} \ No newline at end of file diff --git a/extensions/css/package.json b/extensions/css/package.json index fb181c6931c526c76135339d00f2351e5e0ee46d..0751fa2a53fb1623874a63ed8253ba241adcb34a 100644 --- a/extensions/css/package.json +++ b/extensions/css/package.json @@ -2,7 +2,20 @@ "name": "css", "version": "0.1.0", "publisher": "vscode", - "engines": { "vscode": "*" }, + "engines": { + "vscode": "0.10.x" + }, + "activationEvents": [ + "onLanguage:css", + "onLanguage:less", + "onLanguage:sass", + "onCommand:_css.applyCodeAction" + ], + "main": "./client/out/cssMain", + "scripts": { + "compile": "gulp compile-extension:css-client && gulp compile-extension:css-server", + "postinstall": "cd server && npm install" + }, "contributes": { "languages": [{ "id": "css", @@ -18,6 +31,531 @@ "snippets": [{ "language": "css", "path": "./snippets/css.json" - }] + }], + "configuration": { + "allOf": [{ + "id": "css", + "order": 20, + "title": "CSS configuration", + "allOf": [ + { + "title": "Controls CSS validation and problem severities.", + "properties": { + "css.validate": { + "type": "boolean", + "default": true, + "description": "Enables or disables all validations" + }, + "css.lint.compatibleVendorPrefixes": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "When using a vendor-specific prefix make sure to also include all other vendor-specific properties" + }, + "css.lint.vendorPrefix": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "warning", + "description": "When using a vendor-specific prefix also include the standard property" + }, + "css.lint.duplicateProperties": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "Do not use duplicate style definitions" + }, + "css.lint.emptyRules": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "warning", + "description": "Do not use empty rulesets" + }, + "css.lint.importStatement": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "Import statements do not load in parallel" + }, + "css.lint.boxModel": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "Do not use width or height when using padding or border" + }, + "css.lint.universalSelector": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "The universal selector (*) is known to be slow" + }, + "css.lint.zeroUnits": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "No unit for zero needed" + }, + "css.lint.fontFaceProperties": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "warning", + "description": "@font-face rule must define 'src' and 'font-family' properties" + }, + "css.lint.hexColorLength": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "error", + "description": "Hex colors must consist of three or six hex numbers" + }, + "css.lint.argumentsInColorFunction": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "error", + "description": "Invalid number of parameters" + }, + "css.lint.unknownProperties": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "warning", + "description": "Unknown property." + }, + "css.lint.ieHack": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "IE hacks are only necessary when supporting IE7 and older" + }, + "css.lint.unknownVendorSpecificProperties": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "Unknown vendor specific property." + }, + "css.lint.propertyIgnoredDueToDisplay": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "warning", + "description": "Property is ignored due to the display. E.g. with 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect" + }, + "css.lint.important": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored." + }, + "css.lint.float": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes." + }, + "css.lint.idSelector": { + "type": "string", + "enum": [ "ignore", "warning", "error"], + "default": "ignore", + "description": "Selectors should not contain IDs because these rules are too tightly coupled with the HTML." + } + } + } + ] + }, + { + "id": "scss", + "order": 24, + "title": "SCSS (Sass) configuration", + "allOf": [ + { + "title": "Controls SCSS validation and problem severities.", + "properties": { + "scss.validate": { + "type": "boolean", + "default": true, + "description": "Enables or disables all validations" + }, + "scss.lint.compatibleVendorPrefixes": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "When using a vendor-specific prefix make sure to also include all other vendor-specific properties" + }, + "scss.lint.vendorPrefix": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "When using a vendor-specific prefix also include the standard property" + }, + "scss.lint.duplicateProperties": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Do not use duplicate style definitions" + }, + "scss.lint.emptyRules": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "Do not use empty rulesets" + }, + "scss.lint.importStatement": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Import statements do not load in parallel" + }, + "scss.lint.boxModel": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Do not use width or height when using padding or border" + }, + "scss.lint.universalSelector": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "The universal selector (*) is known to be slow" + }, + "scss.lint.zeroUnits": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "No unit for zero needed" + }, + "scss.lint.fontFaceProperties": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "@font-face rule must define 'src' and 'font-family' properties" + }, + "scss.lint.hexColorLength": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "error", + "description": "Hex colors must consist of three or six hex numbers" + }, + "scss.lint.argumentsInColorFunction": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "error", + "description": "Invalid number of parameters" + }, + "scss.lint.unknownProperties": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "Unknown property." + }, + "scss.lint.ieHack": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "IE hacks are only necessary when supporting IE7 and older" + }, + "scss.lint.unknownVendorSpecificProperties": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Unknown vendor specific property." + }, + "scss.lint.propertyIgnoredDueToDisplay": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "Property is ignored due to the display. E.g. with 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect" + }, + "scss.lint.important": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored." + }, + "scss.lint.float": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes." + }, + "scss.lint.idSelector": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Selectors should not contain IDs because these rules are too tightly coupled with the HTML." + } + } + } + ] + }, + { + "id": "less", + "order": 22, + "type": "object", + "title": "LESS configuration", + "allOf": [ + { + "title": "Controls LESS validation and problem severities.", + "properties": { + "less.validate": { + "type": "boolean", + "default": true, + "description": "Enables or disables all validations" + }, + "less.lint.compatibleVendorPrefixes": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "When using a vendor-specific prefix make sure to also include all other vendor-specific properties" + }, + "less.lint.vendorPrefix": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "When using a vendor-specific prefix also include the standard property" + }, + "less.lint.duplicateProperties": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Do not use duplicate style definitions" + }, + "less.lint.emptyRules": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "Do not use empty rulesets" + }, + "less.lint.importStatement": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Import statements do not load in parallel" + }, + "less.lint.boxModel": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Do not use width or height when using padding or border" + }, + "less.lint.universalSelector": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "The universal selector (*) is known to be slow" + }, + "less.lint.zeroUnits": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "No unit for zero needed" + }, + "less.lint.fontFaceProperties": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "@font-face rule must define 'src' and 'font-family' properties" + }, + "less.lint.hexColorLength": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "error", + "description": "Hex colors must consist of three or six hex numbers" + }, + "less.lint.argumentsInColorFunction": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "error", + "description": "Invalid number of parameters" + }, + "less.lint.unknownProperties": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "Unknown property." + }, + "less.lint.ieHack": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "IE hacks are only necessary when supporting IE7 and older" + }, + "less.lint.unknownVendorSpecificProperties": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Unknown vendor specific property." + }, + "less.lint.propertyIgnoredDueToDisplay": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "warning", + "description": "Property is ignored due to the display. E.g. with 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect" + }, + "less.lint.important": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored." + }, + "less.lint.float": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes." + }, + "less.lint.idSelector": { + "type": "string", + "enum": [ + "ignore", + "warning", + "error" + ], + "default": "ignore", + "description": "Selectors should not contain IDs because these rules are too tightly coupled with the HTML." + } + } + } + ] + }] + } + }, + "dependencies": { + "vscode-languageclient": "^2.2.1" } } \ No newline at end of file diff --git a/extensions/css/server/.vscode/launch.json b/extensions/css/server/.vscode/launch.json new file mode 100644 index 0000000000000000000000000000000000000000..a09436fd912a614bcab54b0d9f339997a36ee386 --- /dev/null +++ b/extensions/css/server/.vscode/launch.json @@ -0,0 +1,32 @@ +{ + "version": "0.1.0", + // List of configurations. Add new configurations or edit existing ones. + "configurations": [ + { + "name": "Attach", + "type": "node", + "request": "attach", + "port": 6004, + "sourceMaps": true, + "outDir": "${workspaceRoot}/out" + }, + { + "name": "Unit Tests", + "type": "node", + "request": "launch", + "program": "${workspaceRoot}/../../../node_modules/mocha/bin/_mocha", + "stopOnEntry": false, + "args": [ + "--timeout", + "999999", + "--colors" + ], + "cwd": "${workspaceRoot}", + "runtimeExecutable": null, + "runtimeArgs": [], + "env": {}, + "sourceMaps": true, + "outDir": "${workspaceRoot}/out" + } + ] +} \ No newline at end of file diff --git a/extensions/css/server/.vscode/tasks.json b/extensions/css/server/.vscode/tasks.json new file mode 100644 index 0000000000000000000000000000000000000000..6a159d6a5fa4496ec9989896d0f72ff133173775 --- /dev/null +++ b/extensions/css/server/.vscode/tasks.json @@ -0,0 +1,9 @@ +{ + "version": "0.1.0", + "command": "npm", + "isShellCommand": true, + "showOutput": "silent", + "args": ["run", "watch"], + "isWatching": true, + "problemMatcher": "$tsc-watch" +} \ No newline at end of file diff --git a/extensions/css/server/package.json b/extensions/css/server/package.json new file mode 100644 index 0000000000000000000000000000000000000000..70bcef71940de2b8999e1664127e8b0dec0a1c1f --- /dev/null +++ b/extensions/css/server/package.json @@ -0,0 +1,18 @@ +{ + "name": "vscode-css-server", + "description": "CSS/LESS/SCSS language server", + "version": "0.0.1", + "author": "Microsoft Corporation", + "license": "MIT", + "engines": { + "node": "*" + }, + "dependencies": { + "vscode-languageserver": "^2.2.0", + "vscode-nls": "^1.0.4" + }, + "scripts": { + "compile": "gulp compile-extension:css-server", + "watch": "gulp watch-extension:css-server" + } +} \ No newline at end of file diff --git a/extensions/css/server/src/cssServerMain.ts b/extensions/css/server/src/cssServerMain.ts new file mode 100644 index 0000000000000000000000000000000000000000..3c08007e81ef70dbca5debd04132ad862b350042 --- /dev/null +++ b/extensions/css/server/src/cssServerMain.ts @@ -0,0 +1,151 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import { + IPCMessageReader, IPCMessageWriter, createConnection, IConnection, Range, + TextDocuments, TextDocument, InitializeParams, InitializeResult, RequestType +} from 'vscode-languageserver'; + +import {Parser} from './parser/cssParser'; +import {CSSCompletion} from './services/cssCompletion'; +import {CSSHover} from './services/cssHover'; +import {CSSNavigation} from './services/cssNavigation'; +import {CSSCodeActions} from './services/cssCodeActions'; +import {CSSValidation, Settings} from './services/cssValidation'; + +import {Stylesheet} from './parser/cssNodes'; + +import * as nls from 'vscode-nls'; +nls.config(process.env['VSCODE_NLS_CONFIG']); + +namespace ColorSymbolRequest { + export const type: RequestType = { get method() { return 'css/colorSymbols'; } }; +} + +// Create a connection for the server. The connection uses for +// stdin / stdout for message passing +let connection: IConnection = createConnection(new IPCMessageReader(process), new IPCMessageWriter(process)); + +// Create a simple text document manager. The text document manager +// supports full document sync only +let documents: TextDocuments = new TextDocuments(); +// Make the text document manager listen on the connection +// for open, change and close text document events +documents.listen(connection); + + +// After the server has started the client sends an initilize request. The server receives +// in the passed params the rootPath of the workspace plus the client capabilites. +connection.onInitialize((params: InitializeParams): InitializeResult => { + return { + capabilities: { + // Tell the client that the server works in FULL text document sync mode + textDocumentSync: documents.syncKind, + completionProvider: { resolveProvider: false }, + hoverProvider: true, + documentSymbolProvider: true, + referencesProvider: true, + definitionProvider: true, + documentHighlightProvider: true, + codeActionProvider: true + } + }; +}); + +let cssCompletion = new CSSCompletion(); +let cssHover = new CSSHover(); +let cssValidation = new CSSValidation(); +let cssNavigation = new CSSNavigation(); +let cssCodeActions = new CSSCodeActions(); + +// The content of a text document has changed. This event is emitted +// when the text document first opened or when its content has changed. +documents.onDidChangeContent((change) => { + validateTextDocument(change.document); +}); + +// The settings have changed. Is send on server activation as well. +connection.onDidChangeConfiguration((change) => { + updateConfiguration(change.settings); +}); + +function updateConfiguration(settings: Settings) { + cssValidation.configure(settings.css); + // Revalidate any open text documents + documents.all().forEach(validateTextDocument); +} + + +function validateTextDocument(textDocument: TextDocument): void { + if (textDocument.getText().length === 0) { + // ignore empty documents + connection.sendDiagnostics({ uri: textDocument.uri, diagnostics: [] }); + return; + } + + let stylesheet = getStylesheet(textDocument); + cssValidation.doValidation(textDocument, stylesheet).then(diagnostics => { + // Send the computed diagnostics to VSCode. + connection.sendDiagnostics({ uri: textDocument.uri, diagnostics }); + }); +} + +let parser = new Parser(); + +function getStylesheet(document: TextDocument): Stylesheet { + return parser.parseStylesheet(document); +} + +connection.onCompletion(textDocumentPosition => { + let document = documents.get(textDocumentPosition.textDocument.uri); + let stylesheet = getStylesheet(document); + return cssCompletion.doComplete(document, textDocumentPosition.position, stylesheet); +}); + +connection.onHover(textDocumentPosition => { + let document = documents.get(textDocumentPosition.textDocument.uri); + let styleSheet = getStylesheet(document); + return cssHover.doHover(document, textDocumentPosition.position, styleSheet); +}); + +connection.onDocumentSymbol(documentSymbolParams => { + let document = documents.get(documentSymbolParams.textDocument.uri); + let stylesheet = getStylesheet(document); + return cssNavigation.findDocumentSymbols(document, stylesheet); +}); + +connection.onDefinition(documentSymbolParams => { + let document = documents.get(documentSymbolParams.textDocument.uri); + let stylesheet = getStylesheet(document); + return cssNavigation.findDefinition(document, documentSymbolParams.position, stylesheet); +}); + +connection.onDocumentHighlight(documentSymbolParams => { + let document = documents.get(documentSymbolParams.textDocument.uri); + let stylesheet = getStylesheet(document); + return cssNavigation.findDocumentHighlights(document, documentSymbolParams.position, stylesheet); +}); + +connection.onReferences(referenceParams => { + let document = documents.get(referenceParams.textDocument.uri); + let stylesheet = getStylesheet(document); + return cssNavigation.findReferences(document, referenceParams.position, stylesheet); +}); + +connection.onCodeAction(codeActionParams => { + let document = documents.get(codeActionParams.textDocument.uri); + let stylesheet = getStylesheet(document); + return cssCodeActions.doCodeActions(document, codeActionParams.range, codeActionParams.context, stylesheet); +}); + +connection.onRequest(ColorSymbolRequest.type, uri => { + let document = documents.get(uri); + let stylesheet = getStylesheet(document); + return cssNavigation.findColorSymbols(document, stylesheet); +}); + +// Listen on the connection +connection.listen(); \ No newline at end of file diff --git a/extensions/css/server/src/data/browsers.d.ts b/extensions/css/server/src/data/browsers.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..9dc99ab8b452d7c88350f3efd800818e09c999ae --- /dev/null +++ b/extensions/css/server/src/data/browsers.d.ts @@ -0,0 +1,7 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +export declare var data: any; +export declare var descriptions: any; \ No newline at end of file diff --git a/extensions/css/server/src/data/browsers.js b/extensions/css/server/src/data/browsers.js new file mode 100644 index 0000000000000000000000000000000000000000..55162d3b7c32bf9d2807f958dbe04f101bc32f92 --- /dev/null +++ b/extensions/css/server/src/data/browsers.js @@ -0,0 +1,11307 @@ +/*--------------------------------------------------------------------------------------------- + * 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 + +(function (factory) { + if (typeof module === "object" && typeof module.exports === "object") { + var v = factory(require, exports); if (v !== undefined) module.exports = v; + } else if (typeof define === "function" && define.amd) { + define(["require", "exports"], factory); + } +})(function (require, exports) { + exports.data = { + "css": { + "atdirectives": [ + { + "name": "@charset", + "desc": "Defines character set of the document." + }, + { + "name": "@counter-style", + "desc": "Defines a custom counter style.", + "browsers": "FF33" + }, + { + "name": "@font-face", + "desc": "Allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of 'web-safe' fonts, allowing for consistent rendering independent of the fonts available in a given user's environment." + }, + { + "name": "@font-feature-values", + "desc": "Defines named values for the indices used to select alternate glyphs for a given font family.", + "browsers": "FF34" + }, + { + "name": "@import", + "desc": "Includes content of another file." + }, + { + "name": "@keyframes", + "desc": "Defines set of animation key frames.", + "browsers": "E,C43,FF16,IE10,O30,S9" + }, + { + "name": "@media", + "desc": "Defines a stylesheet for a particular media type." + }, + { + "name": "@-moz-document", + "desc": "Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document.", + "browsers": "FF1.8" + }, + { + "name": "@-moz-keyframes", + "desc": "Defines set of animation key frames.", + "browsers": "FF5" + }, + { + "name": "@-ms-viewport", + "desc": "Specifies the size, zoom factor, and orientation of the viewport.", + "browsers": "E,IE10" + }, + { + "name": "@namespace", + "desc": "Declares a prefix and associates it with a namespace name.", + "browsers": "E,C,FF1,IE9,O8,S1" + }, + { + "name": "@-o-keyframes", + "desc": "Defines set of animation key frames.", + "browsers": "O12" + }, + { + "name": "@-o-viewport", + "desc": "Specifies the size, zoom factor, and orientation of the viewport.", + "browsers": "O11" + }, + { + "name": "@page", + "desc": "Directive defines various page parameters." + }, + { + "name": "@supports", + "desc": "A conditional group rule whose condition tests whether the user agent supports CSS property:value pairs.", + "browsers": "E,C28,FF22,O12.1,S9" + }, + { + "name": "@-webkit-keyframes", + "desc": "Defines set of animation key frames.", + "browsers": "C,S4" + } + ], + "pseudoclasses": [ + { + "name": ":active", + "desc": "Applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it." + }, + { + "name": ":any-link", + "desc": "Represents an element that acts as the source anchor of a hyperlink. Applies to both visited and unvisited links.", + "browsers": "S9" + }, + { + "name": ":checked", + "desc": "Radio and checkbox elements can be toggled by the user. Some menu items are 'checked' when the user selects them. When such elements are toggled 'on' the :checked pseudo-class applies.", + "browsers": "E,C,FF1,IE9,O9,S3.13" + }, + { + "name": ":corner-present", + "desc": "Non-standard. Indicates whether or not a scrollbar corner is present.", + "browsers": "C,S5" + }, + { + "name": ":decrement", + "desc": "Non-standard. Applies to buttons and track pieces. Indicates whether or not the button or track piece will decrement the view’s position when used.", + "browsers": "C,S5" + }, + { + "name": ":default", + "desc": "Applies to the one or more UI elements that are the default among a set of similar elements. Typically applies to context menu items, buttons, and select lists/menus.", + "browsers": "C,FF3,O10,S5" + }, + { + "name": ":disabled", + "desc": "Represents user interface elements that are in a disabled state; such elements have a corresponding enabled state.", + "browsers": "E,C,FF1.5,IE9,O9,S3.1" + }, + { + "name": ":double-button", + "desc": "Non-standard. Applies to buttons and track pieces. Applies when both buttons are displayed together at the same end of the scrollbar.", + "browsers": "C,S5" + }, + { + "name": ":empty", + "desc": "Represents an element that has no children at all.", + "browsers": "E,C,FF1.5,IE9,O9,S3.1" + }, + { + "name": ":enabled", + "desc": "Represents user interface elements that are in an enabled state; such elements have a corresponding disabled state.", + "browsers": "E,C,FF1.5,IE9,O9,S3.1" + }, + { + "name": ":end", + "desc": "Non-standard. Applies to buttons and track pieces. Indicates whether the object is placed after the thumb.", + "browsers": "C,S5" + }, + { + "name": ":first", + "desc": "When printing double-sided documents, the page boxes on left and right pages may be different. This can be expressed through CSS pseudo-classes defined in the page context." + }, + { + "name": ":first-child", + "desc": "Same as :nth-child(1). Represents an element that is the first child of some other element.", + "browsers": "E,C,FF3,IE7,O9.5,S3.1" + }, + { + "name": ":first-of-type", + "desc": "Same as :nth-of-type(1). Represents an element that is the first sibling of its type in the list of children of its parent element.", + "browsers": "E,C,FF3.5,IE9,O9.5,S3.2" + }, + { + "name": ":focus", + "desc": "Applies while an element has the focus (accepts keyboard or mouse events, or other forms of input)." + }, + { + "name": ":fullscreen", + "desc": "Matches any element that has its fullscreen flag set.", + "browsers": "E" + }, + { + "name": ":future", + "desc": "Represents any element that is defined to occur entirely after a :current element.", + "browsers": "C,O16,S6" + }, + { + "name": ":horizontal", + "desc": "Non-standard. Applies to any scrollbar pieces that have a horizontal orientation.", + "browsers": "C,S5" + }, + { + "name": ":host", + "desc": "When evaluated in the context of a shadow tree, matches the shadow tree’s host element.", + "browsers": "C35,O22" + }, + { + "name": ":host()", + "desc": "When evaluated in the context of a shadow tree, it matches the shadow tree’s host element if the host element, in its normal context, matches the selector argument.", + "browsers": "C35,O22" + }, + { + "name": ":host-context()", + "desc": "Tests whether there is an ancestor, outside the shadow tree, which matches a particular selector.", + "browsers": "C35,O22" + }, + { + "name": ":hover", + "desc": "Applies while the user designates an element with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element." + }, + { + "name": ":increment", + "desc": "Non-standard. Applies to buttons and track pieces. Indicates whether or not the button or track piece will increment the view’s position when used.", + "browsers": "C,S5" + }, + { + "name": ":indeterminate", + "desc": "Applies to UI elements whose value is in an indeterminate state.", + "browsers": "E,C,FF3.6,IE9,O10.6,S3" + }, + { + "name": ":in-range", + "desc": "Used in conjunction with the min and max attributes, whether on a range input, a number field, or any other types that accept those attributes.", + "browsers": "E13,C,FF10,O9.6,S5.1" + }, + { + "name": ":invalid", + "desc": "An element is :valid or :invalid when it is, respectively, valid or invalid with respect to data validity semantics defined by a different specification.", + "browsers": "E,C,FF4,IE10,O10,S5" + }, + { + "name": ":lang()", + "desc": "Represents an element that is in language specified.", + "browsers": "E,C,FF1,IE8,O8,S3" + }, + { + "name": ":last-child", + "desc": "Same as :nth-last-child(1). Represents an element that is the last child of some other element.", + "browsers": "E,C,FF1,IE9,O9.5,S3.1" + }, + { + "name": ":last-of-type", + "desc": "Same as :nth-last-of-type(1). Represents an element that is the last sibling of its type in the list of children of its parent element.", + "browsers": "E,C,FF3.5,IE9,O9.5,S3.1" + }, + { + "name": ":left", + "desc": "When printing double-sided documents, the page boxes on left and right pages may be different. This can be expressed through CSS pseudo-classes defined in the page context." + }, + { + "name": ":link", + "desc": "Applies to links that have not yet been visited." + }, + { + "name": ":matches()", + "desc": "Takes a selector list as its argument. It represents an element that is represented by its argument.", + "browsers": "S9" + }, + { + "name": ":-moz-any()", + "desc": "Represents an element that is represented by the selector list passed as its argument. Standardized as :matches().", + "browsers": "FF4" + }, + { + "name": ":-moz-any-link", + "desc": "Represents an element that acts as the source anchor of a hyperlink. Applies to both visited and unvisited links.", + "browsers": "FF1" + }, + { + "name": ":-moz-broken", + "desc": "Non-standard. Matches elements representing broken images.", + "browsers": "FF3" + }, + { + "name": ":-moz-drag-over", + "desc": "Non-standard. Matches elements when a drag-over event applies to it.", + "browsers": "FF1" + }, + { + "name": ":-moz-first-node", + "desc": "Non-standard. Represents an element that is the first child node of some other element.", + "browsers": "FF1" + }, + { + "name": ":-moz-focusring", + "desc": "Non-standard. Matches an element that has focus and focus ring drawing is enabled in the browser.", + "browsers": "FF4" + }, + { + "name": ":-moz-full-screen", + "desc": "Matches any element that has its fullscreen flag set. Standardized as :fullscreen.", + "browsers": "FF9" + }, + { + "name": ":-moz-last-node", + "desc": "Non-standard. Represents an element that is the last child node of some other element.", + "browsers": "FF1" + }, + { + "name": ":-moz-loading", + "desc": "Non-standard. Matches elements, such as images, that haven’t started loading yet.", + "browsers": "FF3" + }, + { + "name": ":-moz-only-whitespace", + "desc": "The same as :empty, except that it additionally matches elements that only contain code points affected by whitespace processing. Standardized as :blank.", + "browsers": "FF1.5" + }, + { + "name": ":-moz-placeholder", + "desc": "Deprecated. Represents placeholder text in an input field. Use ::-moz-placeholder for Firefox 19+.", + "browsers": "FF4" + }, + { + "name": ":-moz-submit-invalid", + "desc": "Non-standard. Represents any submit button when the contents of the associated form are not valid.", + "browsers": "FF4" + }, + { + "name": ":-moz-suppressed", + "desc": "Non-standard. Matches elements representing images that have been blocked from loading.", + "browsers": "FF3" + }, + { + "name": ":-moz-ui-invalid", + "desc": "Non-standard. Represents any validated form element whose value isn't valid ", + "browsers": "FF4" + }, + { + "name": ":-moz-ui-valid", + "desc": "Non-standard. Represents any validated form element whose value is valid ", + "browsers": "FF4" + }, + { + "name": ":-moz-user-disabled", + "desc": "Non-standard. Matches elements representing images that have been disabled due to the user’s preferences.", + "browsers": "FF3" + }, + { + "name": ":-moz-window-inactive", + "desc": "Non-standard. Matches elements in an inactive window.", + "browsers": "FF4" + }, + { + "name": ":-ms-fullscreen", + "desc": "Matches any element that has its fullscreen flag set.", + "browsers": "IE11" + }, + { + "name": ":-ms-input-placeholder", + "desc": "Represents placeholder text in an input field. Note: for Edge use the pseudo-element ::-ms-input-placeholder. Standardized as ::placeholder.", + "browsers": "IE10" + }, + { + "name": ":-ms-keyboard-active", + "desc": "Windows Store apps only. Applies one or more styles to an element when it has focus and the user presses the space bar.", + "browsers": "IE10" + }, + { + "name": ":-ms-lang()", + "desc": "Represents an element that is in the language specified. Accepts a comma seperated list of language tokens.", + "browsers": "E,IE10" + }, + { + "name": ":no-button", + "desc": "Non-standard. Applies to track pieces. Applies when there is no button at that end of the track.", + "browsers": "C,S5" + }, + { + "name": ":not()", + "desc": "The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.", + "browsers": "E,C,FF1,IE9,O9.5,S2" + }, + { + "name": ":nth-child()", + "desc": "Represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.", + "browsers": "E,C,FF3.5,IE9,O9.5,S3.1" + }, + { + "name": ":nth-last-child()", + "desc": "Represents an element that has an+b-1 siblings after it in the document tree, for any positive integer or zero value of n, and has a parent element.", + "browsers": "E,C,FF3.5,IE9,O9.5,S3.1" + }, + { + "name": ":nth-last-of-type()", + "desc": "Represents an element that has an+b-1 siblings with the same expanded element name after it in the document tree, for any zero or positive integer value of n, and has a parent element.", + "browsers": "E,C,FF3.5,IE9,O9.5,S3.1" + }, + { + "name": ":nth-of-type()", + "desc": "Represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.", + "browsers": "E,C,FF3.5,IE9,O9.5,S3.1" + }, + { + "name": ":only-child", + "desc": "Represents an element that has a parent element and whose parent element has no other element children. Same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.", + "browsers": "E,C,FF1.5,IE9,O9.5,S3.1" + }, + { + "name": ":only-of-type", + "desc": "Matches every element that is the only child of its type, of its parent. Same as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1), but with a lower specificity.", + "browsers": "E,C,FF3.5,IE9,O9.5,S3.2" + }, + { + "name": ":optional", + "desc": "A form element is :required or :optional if a value for it is, respectively, required or optional before the form it belongs to is submitted. Elements that are not form elements are neither required nor optional.", + "browsers": "E,C,FF4,IE10,O10,S5" + }, + { + "name": ":out-of-range", + "desc": "Used in conjunction with the min and max attributes, whether on a range input, a number field, or any other types that accept those attributes.", + "browsers": "E13,C,FF10,O9.6,S5.1" + }, + { + "name": ":past", + "desc": "Represents any element that is defined to occur entirely prior to a :current element.", + "browsers": "C,O16,S6" + }, + { + "name": ":read-only", + "desc": "An element whose contents are not user-alterable is :read-only. However, elements whose contents are user-alterable (such as text input fields) are considered to be in a :read-write state. In typical documents, most elements are :read-only.", + "browsers": "E13,C,FF10,O9,S4" + }, + { + "name": ":read-write", + "desc": "An element whose contents are not user-alterable is :read-only. However, elements whose contents are user-alterable (such as text input fields) are considered to be in a :read-write state. In typical documents, most elements are :read-only.", + "browsers": "E13,C,FF10,O9,S4" + }, + { + "name": ":required", + "desc": "A form element is :required or :optional if a value for it is, respectively, required or optional before the form it belongs to is submitted. Elements that are not form elements are neither required nor optional.", + "browsers": "E,C,FF4,IE10,O10,S5" + }, + { + "name": ":right", + "desc": "When printing double-sided documents, the page boxes on left and right pages may be different. This can be expressed through CSS pseudo-classes defined in the page context." + }, + { + "name": ":root", + "desc": "Represents an element that is the root of the document. In HTML 4, this is always the HTML element.", + "browsers": "E,C,FF1,IE9,O9.5,S1" + }, + { + "name": ":scope", + "desc": "Represents any element that is in the contextual reference element set.", + "browsers": "FF32,S6" + }, + { + "name": ":single-button", + "desc": "Non-standard. Applies to buttons and track pieces. Applies when both buttons are displayed separately at either end of the scrollbar.", + "browsers": "C,S5" + }, + { + "name": ":start", + "desc": "Non-standard. Applies to buttons and track pieces. Indicates whether the object is placed before the thumb.", + "browsers": "C,S5" + }, + { + "name": ":target", + "desc": "Some URIs refer to a location within a resource. This kind of URI ends with a 'number sign' (#) followed by an anchor identifier (called the fragment identifier).", + "browsers": "E,C,FF1,IE9,O9.5,S1" + }, + { + "name": ":valid", + "desc": "An element is :valid or :invalid when it is, respectively, valid or invalid with respect to data validity semantics defined by a different specification.", + "browsers": "E,C,FF4,IE10,O10,S5" + }, + { + "name": ":vertical", + "desc": "Non-standard. Applies to any scrollbar pieces that have a vertical orientation.", + "browsers": "C,S5" + }, + { + "name": ":visited", + "desc": "Applies once the link has been visited by the user." + }, + { + "name": ":-webkit-any()", + "desc": "Represents an element that is represented by the selector list passed as its argument. Standardized as :matches().", + "browsers": "C,S5" + }, + { + "name": ":-webkit-full-screen", + "desc": "Matches any element that has its fullscreen flag set. Standardized as :fullscreen.", + "browsers": "C,S6" + }, + { + "name": ":window-inactive", + "desc": "Non-standard. Applies to all scrollbar pieces. Indicates whether or not the window containing the scrollbar is currently active.", + "browsers": "C,S3" + } + ], + "pseudoelements": [ + { + "name": "::after", + "desc": "Represents a styleable child pseudo-element immediately after the originating element’s actual content.", + "browsers": "E,C,FF1.5,IE9,O9,S4" + }, + { + "name": "::backdrop", + "desc": "Used to create a backdrop that hides the underlying document for an element in a top layer (such as an element that is displayed fullscreen).", + "browsers": "E" + }, + { + "name": "::before", + "desc": "Represents a styleable child pseudo-element immediately before the originating element’s actual content.", + "browsers": "E,C,FF1.5,IE9,O9,S4" + }, + { + "name": "::content", + "desc": "Deprecated. Matches the distribution list itself, on elements that have one. Use ::slotted for forward compatibility.", + "browsers": "C35,O22" + }, + { + "name": "::cue", + "browsers": "C,O16,S6" + }, + { + "name": "::cue()", + "browsers": "C,O16,S6" + }, + { + "name": "::cue-region", + "browsers": "C,O16,S6" + }, + { + "name": "::cue-region()", + "browsers": "C,O16,S6" + }, + { + "name": "::first-letter", + "desc": "Represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line.", + "browsers": "E,C,FF1.5,IE9,O7,S1" + }, + { + "name": "::first-line", + "desc": "Describes the contents of the first formatted line of its originating element.", + "browsers": "E,C,FF1.5,IE9,O7,S1" + }, + { + "name": "::-moz-focus-inner", + "browsers": "FF4" + }, + { + "name": "::-moz-focus-outer", + "browsers": "FF4" + }, + { + "name": "::-moz-list-bullet", + "desc": "Used to style the bullet of a list element. Similar to the standardized ::marker.", + "browsers": "FF1" + }, + { + "name": "::-moz-list-number", + "desc": "Used to style the numbers of a list element. Similar to the standardized ::marker.", + "browsers": "FF1" + }, + { + "name": "::-moz-placeholder", + "desc": "Represents placeholder text in an input field", + "browsers": "FF19" + }, + { + "name": "::-moz-progress-bar", + "desc": "Represents the bar portion of a progress bar.", + "browsers": "FF9" + }, + { + "name": "::-moz-selection", + "desc": "Represents the portion of a document that has been highlighted by the user.", + "browsers": "FF1" + }, + { + "name": "::-ms-backdrop", + "desc": "Used to create a backdrop that hides the underlying document for an element in a top layer (such as an element that is displayed fullscreen).", + "browsers": "IE11" + }, + { + "name": "::-ms-browse", + "desc": "Represents the browse button of an input type=file control.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-check", + "desc": "Represents the check of a checkbox or radio button input control.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-clear", + "desc": "Represents the clear button of a text input control", + "browsers": "E,IE10" + }, + { + "name": "::-ms-expand", + "desc": "Represents the drop-down button of a select control.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-fill", + "desc": "Represents the bar portion of a progress bar.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-fill-lower", + "desc": "Represents the portion of the slider track from its smallest value up to the value currently selected by the thumb. In a left-to-right layout, this is the portion of the slider track to the left of the thumb.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-fill-upper", + "desc": "Represents the portion of the slider track from the value currently selected by the thumb up to the slider's largest value. In a left-to-right layout, this is the portion of the slider track to the right of the thumb.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-reveal", + "desc": "Represents the password reveal button of an input type=password control.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-thumb", + "desc": "Represents the portion of range input control (also known as a slider control) that the user drags.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-ticks-after", + "desc": "Represents the tick marks of a slider that begin just after the thumb and continue up to the slider's largest value. In a left-to-right layout, these are the ticks to the right of the thumb.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-ticks-before", + "desc": "Represents the tick marks of a slider that represent its smallest values up to the value currently selected by the thumb. In a left-to-right layout, these are the ticks to the left of the thumb.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-tooltip", + "desc": "Represents the tooltip of a slider (input type=range).", + "browsers": "E,IE10" + }, + { + "name": "::-ms-track", + "desc": "Represents the track of a slider.", + "browsers": "E,IE10" + }, + { + "name": "::-ms-value", + "desc": "Represents the content of a text or password input control, or a select control.", + "browsers": "E,IE10" + }, + { + "name": "::selection", + "desc": "Represents the portion of a document that has been highlighted by the user.", + "browsers": "E,C,IE9,O9.5,S1.1" + }, + { + "name": "::shadow", + "desc": "Matches the shadow root if an element has a shadow tree.", + "browsers": "C35,O22" + }, + { + "name": "::-webkit-file-upload-button", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-inner-spin-button", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-input-placeholder", + "browsers": "C,S4" + }, + { + "name": "::-webkit-keygen-select", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-meter-bar", + "browsers": "E13,C,O15,S6" + }, + { + "name": "::-webkit-meter-even-less-good-value", + "browsers": "E13,C,O15,S6" + }, + { + "name": "::-webkit-meter-optimum-value", + "browsers": "E13,C,O15,S6" + }, + { + "name": "::-webkit-meter-suboptimal-value", + "browsers": "E13,C,O15,S6" + }, + { + "name": "::-webkit-outer-spin-button", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-progress-bar", + "browsers": "C,S3" + }, + { + "name": "::-webkit-progress-inner-element", + "browsers": "C,S3" + }, + { + "name": "::-webkit-progress-value", + "browsers": "C,S3" + }, + { + "name": "::-webkit-resizer", + "browsers": "C,S5" + }, + { + "name": "::-webkit-scrollbar", + "browsers": "C,S5" + }, + { + "name": "::-webkit-scrollbar-button", + "browsers": "C,S5" + }, + { + "name": "::-webkit-scrollbar-corner", + "browsers": "C,S5" + }, + { + "name": "::-webkit-scrollbar-thumb", + "browsers": "C,S5" + }, + { + "name": "::-webkit-scrollbar-track", + "browsers": "C,S5" + }, + { + "name": "::-webkit-scrollbar-track-piece", + "browsers": "C,S5" + }, + { + "name": "::-webkit-search-cancel-button", + "browsers": "C,S4" + }, + { + "name": "::-webkit-search-decoration", + "browsers": "C,S4" + }, + { + "name": "::-webkit-search-results-button", + "browsers": "C,S4" + }, + { + "name": "::-webkit-search-results-decoration", + "browsers": "C,S4" + }, + { + "name": "::-webkit-slider-runnable-track", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-slider-thumb", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-textfield-decoration-container", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-validation-bubble", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-validation-bubble-arrow", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-validation-bubble-arrow-clipper", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-validation-bubble-heading", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-validation-bubble-message", + "browsers": "C,O,S6" + }, + { + "name": "::-webkit-validation-bubble-text-block", + "browsers": "C,O,S6" + } + ], + "properties": [ + { + "name": "additive-symbols", + "desc": "@counter-style descriptor. Specifies the symbols used by the marker-construction algorithm specified by the system descriptor. Needs to be specified if the counter system is 'additive'.", + "browsers": "FF33", + "restriction": "integer, string, image, identifier" + }, + { + "name": "align-content", + "desc": "Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how 'justify-content' aligns individual items within the main-axis.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "center", + "desc": "Lines are packed toward the center of the flex container." + }, + { + "name": "flex-end", + "desc": "Lines are packed toward the end of the flex container." + }, + { + "name": "flex-start", + "desc": "Lines are packed toward the start of the flex container." + }, + { + "name": "space-around", + "desc": "Lines are evenly distributed in the flex container, with half-size spaces on either end." + }, + { + "name": "space-between", + "desc": "Lines are evenly distributed in the flex container." + }, + { + "name": "stretch", + "desc": "Lines stretch to take up the remaining space." + } + ] + }, + { + "name": "align-items", + "desc": "Aligns flex items along the cross axis of the current line of the flex container.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "baseline", + "desc": "If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment." + }, + { + "name": "center", + "desc": "The flex item’s margin box is centered in the cross axis within the line." + }, + { + "name": "flex-end", + "desc": "The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line." + }, + { + "name": "flex-start", + "desc": "The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line." + }, + { + "name": "stretch", + "desc": "If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched." + } + ] + }, + { + "name": "align-self", + "desc": "Allows the default alignment along the cross axis to be overridden for individual flex items.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Computes to the value of 'align-items' on the element’s parent, or 'stretch' if the element has no parent. On absolutely positioned elements, it computes to itself." + }, + { + "name": "baseline", + "desc": "If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment." + }, + { + "name": "center", + "desc": "The flex item’s margin box is centered in the cross axis within the line." + }, + { + "name": "flex-end", + "desc": "The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line." + }, + { + "name": "flex-start", + "desc": "The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line." + }, + { + "name": "stretch", + "desc": "If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched." + } + ] + }, + { + "name": "all", + "desc": "Shorthand that resets all properties except 'direction' and 'unicode-bidi'.", + "browsers": "C37,FF27,O24", + "restriction": "enum", + "values": [] + }, + { + "name": "alt", + "desc": "Provides alternative text for assistive technology to replace the genenerated content of a ::before or ::after element.", + "browsers": "S9", + "restriction": "string, enum", + "values": [] + }, + { + "name": "animation", + "desc": "Shorthand property combines six of the animation properties into a single property.", + "browsers": "E,C43,FF16,IE10,O12.1,S9", + "restriction": "time, timing-function, enum, identifier, number", + "values": [ + { + "name": "alternate" + }, + { + "name": "alternate-reverse" + }, + { + "name": "backwards" + }, + { + "name": "both", + "desc": "Both forwards and backwards fill modes are applied." + }, + { + "name": "forwards" + }, + { + "name": "infinite", + "desc": "Causes the animation to repeat forever." + }, + { + "name": "none", + "desc": "No animation is performed" + }, + { + "name": "normal", + "desc": "Normal playback." + }, + { + "name": "reverse", + "desc": "All iterations of the animation are played in the reverse direction from the way they were specified." + } + ] + }, + { + "name": "animation-delay", + "desc": "Defines when the animation will start.", + "browsers": "E,C43,FF16,IE10,O12.1,S9", + "restriction": "time" + }, + { + "name": "animation-direction", + "desc": "Defines whether or not the animation should play in reverse on alternate cycles.", + "browsers": "E,C43,FF16,IE10,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "alternate" + }, + { + "name": "alternate-reverse" + }, + { + "name": "normal", + "desc": "Normal playback." + }, + { + "name": "reverse", + "desc": "All iterations of the animation are played in the reverse direction from the way they were specified." + } + ] + }, + { + "name": "animation-duration", + "desc": "Defines the length of time that an animation takes to complete one cycle.", + "browsers": "E,C43,FF16,IE10,O12.1,S9", + "restriction": "time" + }, + { + "name": "animation-fill-mode", + "desc": "Defines what values are applied by the animation outside the time it is executing.", + "browsers": "E,C43,FF16,IE10,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "backwards" + }, + { + "name": "both", + "desc": "Both forwards and backwards fill modes are applied." + }, + { + "name": "forwards" + }, + { + "name": "none", + "desc": "There is no change to the property value between the time the animation is applied and the time the animation begins playing or after the animation completes." + } + ] + }, + { + "name": "animation-iteration-count", + "desc": "Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.", + "browsers": "E,C43,FF16,IE10,O12.1,S9", + "restriction": "number, enum", + "values": [ + { + "name": "infinite", + "desc": "Causes the animation to repeat forever." + } + ] + }, + { + "name": "animation-name", + "desc": "Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation.", + "browsers": "E,C43,FF16,IE10,O12.1,S9", + "restriction": "identifier, enum", + "values": [ + { + "name": "none", + "desc": "No animation is performed" + } + ] + }, + { + "name": "animation-play-state", + "desc": "Defines whether the animation is running or paused.", + "browsers": "E,C43,FF16,IE10,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "paused" + }, + { + "name": "running" + } + ] + }, + { + "name": "animation-timing-function", + "desc": "Describes how the animation will progress over one cycle of its duration.", + "browsers": "E,C43,FF16,IE10,O12.1,S9", + "restriction": "timing-function" + }, + { + "name": "backface-visibility", + "desc": "Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer.", + "browsers": "E,C36,FF16,IE10,O23", + "restriction": "enum", + "values": [ + { + "name": "hidden", + "desc": "Back side is hidden." + }, + { + "name": "visible", + "desc": "Back side is visible." + } + ] + }, + { + "name": "background", + "desc": "Shorthand property for setting most background properties at the same place in the style sheet.", + "restriction": "enum, image, color, position, length, repeat, percentage, box", + "values": [ + { + "name": "fixed", + "desc": "The background is fixed with regard to the viewport. In paged media where there is no viewport, a 'fixed' background is fixed with respect to the page box and therefore replicated on every page." + }, + { + "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": "scroll", + "desc": "The background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)" + } + ] + }, + { + "name": "background-attachment", + "desc": "Specifies whether the background images are fixed with regard to the viewport ('fixed') or scroll along with the element ('scroll') or its contents ('local').", + "restriction": "enum", + "values": [ + { + "name": "fixed", + "desc": "The background is fixed with regard to the viewport. In paged media where there is no viewport, a 'fixed' background is fixed with respect to the page box and therefore replicated on every page." + }, + { + "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.", + "browsers": "E,C,FF25,IE9,O11.5,S5" + }, + { + "name": "scroll", + "desc": "The background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element’s border.)" + } + ] + }, + { + "name": "background-blend-mode", + "desc": "Defines the blending mode of each background layer.", + "browsers": "C35,FF30,O22,S7.1", + "restriction": "enum", + "values": [ + { + "name": "normal", + "desc": "Default attribute which specifies no blending" + }, + { + "name": "multiply" + }, + { + "name": "screen" + }, + { + "name": "overlay" + }, + { + "name": "darken" + }, + { + "name": "lighten" + }, + { + "name": "color-dodge" + }, + { + "name": "color-burn" + }, + { + "name": "hard-light" + }, + { + "name": "soft-light" + }, + { + "name": "difference" + }, + { + "name": "exclusion" + }, + { + "name": "hue", + "browsers": "C35,FF30,O22" + }, + { + "name": "saturation", + "browsers": "C35,FF30,O22" + }, + { + "name": "color", + "browsers": "C35,FF30,O22" + }, + { + "name": "luminosity", + "browsers": "C35,FF30,O22" + } + ] + }, + { + "name": "background-clip", + "desc": "Determines the background painting area.", + "browsers": "E,C,FF4,IE9,O10.5,S3", + "restriction": "box" + }, + { + "name": "background-color", + "desc": "Sets the background color of an element.", + "restriction": "color" + }, + { + "name": "background-image", + "desc": "Sets the background image(s) of an element.", + "restriction": "image, enum", + "values": [ + { + "name": "none", + "desc": "Counts as an image layer but draws nothing." + } + ] + }, + { + "name": "background-origin", + "desc": "For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s).", + "browsers": "E,C,FF4,IE9,O10.5,S3", + "restriction": "box" + }, + { + "name": "background-position", + "desc": "Specifies the initial position of the background image(s) (after any resizing) within their corresponding background positioning area.", + "restriction": "position, length, percentage" + }, + { + "name": "background-position-x", + "desc": "If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area.", + "browsers": "E,IE6", + "restriction": "length, percentage", + "values": [ + { + "name": "center", + "desc": "Equivalent to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is." + }, + { + "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": "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." + } + ] + }, + { + "name": "background-position-y", + "desc": "If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area.", + "browsers": "E,IE6", + "restriction": "length, percentage", + "values": [ + { + "name": "bottom", + "desc": "Equivalent to '100%' for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset." + }, + { + "name": "center", + "desc": "Equivalent to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is." + }, + { + "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": "background-repeat", + "desc": "Specifies how background images are tiled after they have been sized and positioned.", + "restriction": "repeat", + "values": [] + }, + { + "name": "background-size", + "desc": "Specifies the size of the background images.", + "browsers": "E,C,FF4,IE9,O10,S4.1", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "Resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%." + }, + { + "name": "contain", + "desc": "Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area." + }, + { + "name": "cover", + "desc": "Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area." + } + ] + }, + { + "name": "behavior", + "desc": "IE only. Used to extend behaviors of the browser.", + "browsers": "IE6", + "restriction": "url" + }, + { + "name": "block-size", + "desc": "Logical 'width'. Mapping depends on the element’s 'writing-mode'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "Depends on the values of other properties." + } + ] + }, + { + "name": "border", + "desc": "Shorthand property for setting border width, style, and color.", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "border-block-end", + "desc": "Logical 'border-bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "border-block-start", + "desc": "Logical 'border-top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "border-block-end-color", + "desc": "Logical 'border-bottom-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "color" + }, + { + "name": "border-block-start-color", + "desc": "Logical 'border-top-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "color" + }, + { + "name": "border-block-end-style", + "desc": "Logical 'border-bottom-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "line-style" + }, + { + "name": "border-block-start-style", + "desc": "Logical 'border-top-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "lline-style" + }, + { + "name": "border-block-end-width", + "desc": "Logical 'border-bottom-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, line-width" + }, + { + "name": "border-block-start-width", + "desc": "Logical 'border-top-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, line-width" + }, + { + "name": "border-bottom", + "desc": "Shorthand property for setting border width, style and color.", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "border-bottom-color", + "desc": "Sets the color of the bottom border.", + "restriction": "color" + }, + { + "name": "border-bottom-left-radius", + "desc": "Defines the radii of the bottom left outer border edge.", + "browsers": "E,C,FF4,IE9,O10.5,S5", + "restriction": "length, percentage" + }, + { + "name": "border-bottom-right-radius", + "desc": "Defines the radii of the bottom right outer border edge.", + "browsers": "E,C,FF4,IE9,O10.5,S5", + "restriction": "length, percentage" + }, + { + "name": "border-bottom-style", + "desc": "Sets the style of the bottom border.", + "restriction": "line-style" + }, + { + "name": "border-bottom-width", + "desc": "Sets the thickness of the bottom border.", + "restriction": "length, line-width" + }, + { + "name": "border-collapse", + "desc": "Selects a table's border model.", + "restriction": "enum", + "values": [ + { + "name": "collapse", + "desc": "Selects the collapsing borders model." + }, + { + "name": "separate", + "desc": "Selects the separated borders border model." + } + ] + }, + { + "name": "border-color", + "desc": "The color of the border around all four edges of an element.", + "restriction": "color", + "values": [] + }, + { + "name": "border-image", + "desc": "Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values.", + "browsers": "E,C16,FF15,IE11,O15,S6", + "restriction": "length, percentage, number, url, enum", + "values": [ + { + "name": "auto", + "desc": "If 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead." + }, + { + "name": "fill", + "desc": "Causes the middle part of the border-image to be preserved." + }, + { + "name": "none", + "desc": "Use the border styles." + }, + { + "name": "repeat" + }, + { + "name": "round", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does." + }, + { + "name": "space", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles." + }, + { + "name": "stretch", + "desc": "The image is stretched to fill the area." + }, + { + "name": "url()" + } + ] + }, + { + "name": "border-image-outset", + "desc": "The values specify the amount by which the border image area extends beyond the border box on the top, right, bottom, and left sides respectively. If the fourth value is absent, it is the same as the second. If the third one is also absent, it is the same as the first. If the second one is also absent, it is the same as the first. Numbers represent multiples of the corresponding border-width.", + "browsers": "E,C16,FF15,IE11,O15,S6", + "restriction": "length, number" + }, + { + "name": "border-image-repeat", + "desc": "Specifies how the images for the sides and the middle part of the border image are scaled and tiled. If the second keyword is absent, it is assumed to be the same as the first.", + "browsers": "E,C16,FF15,IE11,O15,S6", + "restriction": "enum", + "values": [ + { + "name": "repeat" + }, + { + "name": "round", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does." + }, + { + "name": "space", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles." + }, + { + "name": "stretch", + "desc": "The image is stretched to fill the area." + } + ] + }, + { + "name": "border-image-slice", + "desc": "Specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle.", + "browsers": "E,C16,FF15,IE11,O15,S6", + "restriction": "number, percentage", + "values": [ + { + "name": "fill", + "desc": "Causes the middle part of the border-image to be preserved." + } + ] + }, + { + "name": "border-image-source", + "desc": "Specifies an image to use instead of the border styles given by the 'border-style' properties and as an additional background layer for the element. If the value is 'none' or if the image cannot be displayed, the border styles will be used.", + "browsers": "E,C16,FF15,IE11,O15,S6", + "restriction": "image", + "values": [ + { + "name": "none", + "desc": "Use the border styles." + } + ] + }, + { + "name": "border-image-width", + "desc": "The four values of 'border-image-width' specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the top, right, bottom, and left sides of the area, respectively.", + "browsers": "E,C16,FF15,IE11,O15,S6", + "restriction": "length, percentage, number", + "values": [ + { + "name": "auto", + "desc": "The border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead." + } + ] + }, + { + "name": "border-inline-end", + "desc": "Logical 'border-right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "border-inline-start", + "desc": "Logical 'border-left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "border-inline-end-color", + "desc": "Logical 'border-right-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "color" + }, + { + "name": "border-inline-start-color", + "desc": "Logical 'border-left-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "color" + }, + { + "name": "border-inline-end-style", + "desc": "Logical 'border-right-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "line-style" + }, + { + "name": "border-inline-start-style", + "desc": "Logical 'border-left-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "lline-style" + }, + { + "name": "border-inline-end-width", + "desc": "Logical 'border-right-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, line-width" + }, + { + "name": "border-inline-start-width", + "desc": "Logical 'border-left-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, line-width" + }, + { + "name": "border-left", + "desc": "Shorthand property for setting border width, style and color", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "border-left-color", + "desc": "Sets the color of the left border.", + "restriction": "color" + }, + { + "name": "border-left-style", + "desc": "Sets the style of the left border.", + "restriction": "line-style" + }, + { + "name": "border-left-width", + "desc": "Sets the thickness of the left border.", + "restriction": "length, line-width" + }, + { + "name": "border-radius", + "desc": "Defines the radii of the outer border edge.", + "browsers": "E,C,FF4,IE9,O10.5,S5", + "restriction": "length, percentage" + }, + { + "name": "border-right", + "desc": "Shorthand property for setting border width, style and color", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "border-right-color", + "desc": "Sets the color of the right border.", + "restriction": "color" + }, + { + "name": "border-right-style", + "desc": "Sets the style of the right border.", + "restriction": "line-style" + }, + { + "name": "border-right-width", + "desc": "Sets the thickness of the right border.", + "restriction": "length, line-width" + }, + { + "name": "border-spacing", + "desc": "The lengths specify the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.", + "browsers": "E,C,FF1,IE8,O7,S1.2", + "restriction": "length" + }, + { + "name": "border-style", + "desc": "The style of the border around edges of an element.", + "restriction": "line-style", + "values": [] + }, + { + "name": "border-top", + "desc": "Shorthand property for setting border width, style and color", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "border-top-color", + "desc": "Sets the color of the top border.", + "restriction": "color" + }, + { + "name": "border-top-left-radius", + "desc": "Defines the radii of the top left outer border edge.", + "browsers": "E,C,FF4,IE9,O10.5,S5", + "restriction": "length, percentage" + }, + { + "name": "border-top-right-radius", + "desc": "Defines the radii of the top right outer border edge.", + "browsers": "E,C,FF4,IE9,O10.5,S5", + "restriction": "length, percentage" + }, + { + "name": "border-top-style", + "desc": "Sets the style of the top border.", + "restriction": "line-style" + }, + { + "name": "border-top-width", + "desc": "Sets the thickness of the top border.", + "restriction": "length, line-width" + }, + { + "name": "border-width", + "desc": "Shorthand that sets the four 'border-*-width' properties. If it has four values, they set top, right, bottom and left in that order. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.", + "restriction": "length, line-width", + "values": [] + }, + { + "name": "bottom", + "desc": "Specifies how far an absolutely positioned box's bottom margin edge is offset above the bottom edge of the box's 'containing block'.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well" + } + ] + }, + { + "name": "box-decoration-break", + "desc": "Specifies whether individual boxes are treated as broken pieces of one continuous box, or whether each box is individually wrapped with the border and padding.", + "browsers": "FF32,O11", + "restriction": "enum", + "values": [ + { + "name": "clone" + }, + { + "name": "slice" + } + ] + }, + { + "name": "box-shadow", + "desc": "Attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional 'inset' keyword. Omitted lengths are 0; omitted colors are a user agent chosen color.", + "browsers": "E,C,FF4,IE9,O11.5,S5.1", + "restriction": "length, color, enum", + "values": [ + { + "name": "inset" + } + ] + }, + { + "name": "box-sizing", + "desc": "Specifies the behavior of the 'width' and 'height' properties.", + "browsers": "E,C10,FF29,IE8,O8,S5.1", + "restriction": "enum", + "values": [ + { + "name": "border-box" + }, + { + "name": "content-box" + } + ] + }, + { + "name": "break-after", + "desc": "Describes the page/column/region break behavior after the generated box.", + "browsers": "E,IE10,O11.5", + "restriction": "enum", + "values": [ + { + "name": "always", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "auto", + "desc": "Neither force nor forbid a page/column break before/after the principal box." + }, + { + "name": "avoid", + "desc": "Avoid a break before/after the principal box." + }, + { + "name": "avoid-column", + "desc": "Avoid a column break before/after the principal box." + }, + { + "name": "avoid-page", + "desc": "Avoid a page break before/after the principal box." + }, + { + "name": "column", + "desc": "Always force a column break before/after the principal box." + }, + { + "name": "left", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a left page." + }, + { + "name": "page", + "desc": "Always force a page break before/after the principal box." + }, + { + "name": "right", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a right page." + } + ] + }, + { + "name": "break-before", + "desc": "Describes the page/column/region break behavior before the generated box.", + "browsers": "E,IE10,O11.5", + "restriction": "enum", + "values": [ + { + "name": "always", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "auto", + "desc": "Neither force nor forbid a page/column break before/after the principal box." + }, + { + "name": "avoid", + "desc": "Avoid a break before/after the principal box." + }, + { + "name": "avoid-column", + "desc": "Avoid a column break before/after the principal box." + }, + { + "name": "avoid-page", + "desc": "Avoid a page break before/after the principal box." + }, + { + "name": "column", + "desc": "Always force a column break before/after the principal box." + }, + { + "name": "left", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a left page." + }, + { + "name": "page", + "desc": "Always force a page break before/after the principal box." + }, + { + "name": "right", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a right page." + } + ] + }, + { + "name": "break-inside", + "desc": "Describes the page/column/region break behavior inside the principal box.", + "browsers": "E,IE10,O11.5", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Impose no additional breaking constraints within the box." + }, + { + "name": "avoid", + "desc": "Avoid breaks within the box." + }, + { + "name": "avoid-column", + "desc": "Avoid a column break within the box." + }, + { + "name": "avoid-page", + "desc": "Avoid a page break within the box." + } + ] + }, + { + "name": "caption-side", + "desc": "Specifies the position of the caption box with respect to the table box.", + "browsers": "E,C,FF,IE8,O,S", + "restriction": "enum", + "values": [ + { + "name": "bottom", + "desc": "Positions the caption box below the table box." + }, + { + "name": "top", + "desc": "Positions the caption box above the table box." + } + ] + }, + { + "name": "clear", + "desc": "Indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.", + "restriction": "enum", + "values": [ + { + "name": "both", + "desc": "The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document." + }, + { + "name": "left", + "desc": "The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document." + }, + { + "name": "none", + "desc": "No constraint on the box's position with respect to floats." + }, + { + "name": "right", + "desc": "The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document." + } + ] + }, + { + "name": "clip", + "desc": "Deprecated. Use the 'clip-path' property when support allows. Defines the visible portion of an element’s box.", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The element does not clip." + }, + { + "name": "rect()" + } + ] + }, + { + "name": "clip-path", + "desc": "Specifies a clipping path where everything inside the path is visable and everything outside is clipped out.", + "browsers": "FF3.5", + "restriction": "url, shape, geometry-box, enum", + "values": [ + { + "name": "none", + "desc": "No clipping path gets created." + }, + { + "name": "url()", + "desc": "References a element to create a clipping path." + } + ] + }, + { + "name": "clip-rule", + "desc": "Indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape.", + "browsers": "E,C5,FF3,IE10,O9,S6", + "restriction": "enum", + "values": [ + { + "name": "evenodd" + }, + { + "name": "nonzero" + } + ] + }, + { + "name": "color", + "desc": "Color of an element's text", + "restriction": "color" + }, + { + "name": "color-interpolation-filters", + "desc": "Specifies the color space for imaging operations performed via filter effects.", + "browsers": "E,C5,FF3,IE10,O9,S6", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Color operations are not required to occur in a particular color space." + }, + { + "name": "linearRGB" + }, + { + "name": "sRGB" + } + ] + }, + { + "name": "column-count", + "desc": "Describes the optimal number of columns into which the content of the element will be flowed.", + "browsers": "E,IE10,O11.5,S9", + "restriction": "integer, enum", + "values": [ + { + "name": "auto", + "desc": "Determines the number of columns by the 'column-width' property and the element width." + } + ] + }, + { + "name": "column-fill", + "desc": "In continuous media, this property will only be consulted if the length of columns has been constrained. Otherwise, columns will automatically be balanced.", + "browsers": "E,IE10,O11.5,S9", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Fills columns sequentially." + }, + { + "name": "balance" + } + ] + }, + { + "name": "column-gap", + "desc": "Sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap.", + "browsers": "E,IE10,O11.5,S9", + "restriction": "length, enum", + "values": [ + { + "name": "normal", + "desc": "User agent specific and typically equivalent to 1em." + } + ] + }, + { + "name": "column-rule", + "desc": "Shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values.", + "browsers": "E,IE10,O11.5,S9", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "column-rule-color", + "desc": "Sets the color of the column rule", + "browsers": "E,IE10,O11.6", + "restriction": "color" + }, + { + "name": "column-rule-style", + "desc": "Sets the style of the rule between columns of an element.", + "browsers": "E,IE10,O11.5,S6", + "restriction": "line-style" + }, + { + "name": "column-rule-width", + "desc": "Sets the width of the rule between columns. Negative values are not allowed.", + "browsers": "E,IE10,O11.5,S9", + "restriction": "length, line-width" + }, + { + "name": "columns", + "desc": "A shorthand property which sets both 'column-width' and 'column-count'.", + "browsers": "E,IE10,O11.5,S9", + "restriction": "length, integer, enum", + "values": [ + { + "name": "auto", + "desc": "The width depends on the values of other properties." + } + ] + }, + { + "name": "column-span", + "desc": "Describes the page/column break behavior after the generated box.", + "browsers": "E,IE10,O11.5,S9", + "restriction": "enum", + "values": [ + { + "name": "all", + "desc": "The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appear." + }, + { + "name": "none", + "desc": "The element does not span multiple columns." + } + ] + }, + { + "name": "column-width", + "desc": "Describes the width of columns in multicol elements.", + "browsers": "E,IE10,O11.5,S9", + "restriction": "length, enum", + "values": [ + { + "name": "auto", + "desc": "The width depends on the values of other properties." + } + ] + }, + { + "name": "content", + "desc": "Determines which page-based occurrence of a given element is applied to a counter or string value.", + "browsers": "E,C,FF1,IE8,O4,S1", + "restriction": "string, url", + "values": [ + { + "name": "attr()" + }, + { + "name": "counter(name)" + }, + { + "name": "icon", + "desc": "The (pseudo-)element is replaced in its entirety by the resource referenced by its 'icon' property, and treated as a replaced element." + }, + { + "name": "none", + "desc": "On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty. On pseudo-elements it causes the pseudo-element to have no content." + }, + { + "name": "normal", + "desc": "See http://www.w3.org/TR/css3-content/#content for computation rules." + }, + { + "name": "url()" + } + ] + }, + { + "name": "counter-increment", + "desc": "Manipulate the value of existing counters.", + "browsers": "E,C,FF1.5,IE8,O10.5,S3", + "restriction": "identifier, integer", + "values": [ + { + "name": "none", + "desc": "This element does not alter the value of any counters." + } + ] + }, + { + "name": "counter-reset", + "desc": "Property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element.", + "browsers": "E,C,FF1.5,IE8,O10.5,S3", + "restriction": "identifier, integer", + "values": [ + { + "name": "none", + "desc": "The counter is not modified." + } + ] + }, + { + "name": "cursor", + "desc": "Allows control over cursor appearance in an element", + "restriction": "url, number, enum", + "values": [ + { + "name": "alias" + }, + { + "name": "all-scroll" + }, + { + "name": "auto", + "desc": "The UA determines the cursor to display based on the current context." + }, + { + "name": "cell" + }, + { + "name": "col-resize" + }, + { + "name": "context-menu" + }, + { + "name": "copy" + }, + { + "name": "crosshair" + }, + { + "name": "default", + "desc": "The platform-dependent default cursor. Often rendered as an arrow." + }, + { + "name": "e-resize" + }, + { + "name": "ew-resize" + }, + { + "name": "grab", + "browsers": "FF27" + }, + { + "name": "grabbing", + "browsers": "FF27" + }, + { + "name": "help" + }, + { + "name": "move" + }, + { + "name": "-moz-grab", + "browsers": "FF1.5" + }, + { + "name": "-moz-grabbing", + "browsers": "FF1.5" + }, + { + "name": "-moz-zoom-in", + "browsers": "FF" + }, + { + "name": "-moz-zoom-out", + "browsers": "FF" + }, + { + "name": "ne-resize" + }, + { + "name": "nesw-resize" + }, + { + "name": "no-drop" + }, + { + "name": "none", + "desc": "No cursor is rendered for the element." + }, + { + "name": "not-allowed" + }, + { + "name": "n-resize" + }, + { + "name": "ns-resize" + }, + { + "name": "nw-resize" + }, + { + "name": "nwse-resize" + }, + { + "name": "pointer" + }, + { + "name": "progress" + }, + { + "name": "row-resize" + }, + { + "name": "se-resize" + }, + { + "name": "s-resize" + }, + { + "name": "sw-resize" + }, + { + "name": "text", + "desc": "Indicates text that may be selected. Often rendered as a vertical I-beam." + }, + { + "name": "vertical-text" + }, + { + "name": "wait" + }, + { + "name": "-webkit-grab", + "browsers": "C,S4" + }, + { + "name": "-webkit-grabbing", + "browsers": "C,S4" + }, + { + "name": "-webkit-zoom-in", + "browsers": "C,S1.2" + }, + { + "name": "-webkit-zoom-out", + "browsers": "C,S1.2" + }, + { + "name": "w-resize" + }, + { + "name": "zoom-in", + "browsers": "E,C37,FF24,O12.1,S9" + }, + { + "name": "zoom-out", + "browsers": "E,C37,FF24,O12.1,S9" + } + ] + }, + { + "name": "direction", + "desc": "Specifies the inline base direction or directionality of any bidi paragraph, embedding, isolate, or override established by the box. Note: for HTML content use the 'dir' attribute and 'bdo' element rather than this property.", + "restriction": "enum", + "values": [ + { + "name": "ltr" + }, + { + "name": "rtl" + } + ] + }, + { + "name": "display", + "desc": "In combination with 'float' and 'position', determines the type of box or boxes that are generated for an element.", + "restriction": "enum", + "values": [ + { + "name": "block" + }, + { + "name": "flex", + "browsers": "E,C29,FF22,IE11,O12.1,S9" + }, + { + "name": "flexbox", + "browsers": "O12.1" + }, + { + "name": "inline", + "desc": "The element generates an inline-level box." + }, + { + "name": "inline-block" + }, + { + "name": "inline-flex", + "browsers": "E,C29,FF22,IE11,O12.1,S9" + }, + { + "name": "inline-flexbox", + "browsers": "O12.1" + }, + { + "name": "inline-table" + }, + { + "name": "list-item" + }, + { + "name": "-moz-box", + "browsers": "FF" + }, + { + "name": "-moz-deck", + "browsers": "FF" + }, + { + "name": "-moz-grid", + "browsers": "FF" + }, + { + "name": "-moz-grid-group", + "browsers": "FF" + }, + { + "name": "-moz-grid-line", + "browsers": "FF" + }, + { + "name": "-moz-groupbox", + "browsers": "FF" + }, + { + "name": "-moz-inline-box", + "browsers": "FF" + }, + { + "name": "-moz-inline-grid", + "browsers": "FF" + }, + { + "name": "-moz-inline-stack", + "browsers": "FF" + }, + { + "name": "-moz-marker", + "browsers": "FF" + }, + { + "name": "-moz-popup", + "browsers": "FF" + }, + { + "name": "-moz-stack", + "browsers": "FF" + }, + { + "name": "-ms-flexbox", + "browsers": "IE10" + }, + { + "name": "-ms-grid", + "browsers": "E,IE10" + }, + { + "name": "-ms-inline-flexbox", + "browsers": "IE10" + }, + { + "name": "-ms-inline-grid", + "browsers": "E,IE10" + }, + { + "name": "none", + "desc": "The element and its descendants generates no boxes." + }, + { + "name": "ruby", + "desc": "The element generates a principal ruby container box, and establishes a ruby formatting context." + }, + { + "name": "ruby-base" + }, + { + "name": "ruby-base-container" + }, + { + "name": "ruby-text" + }, + { + "name": "ruby-text-container" + }, + { + "name": "run-in", + "browsers": "IE8" + }, + { + "name": "table" + }, + { + "name": "table-caption" + }, + { + "name": "table-cell" + }, + { + "name": "table-column" + }, + { + "name": "table-column-group" + }, + { + "name": "table-footer-group" + }, + { + "name": "table-header-group" + }, + { + "name": "table-row" + }, + { + "name": "table-row-group" + }, + { + "name": "-webkit-box", + "browsers": "C,S1" + }, + { + "name": "-webkit-flex", + "browsers": "C21,O15,S6.1" + }, + { + "name": "-webkit-inline-box", + "browsers": "C,S1" + }, + { + "name": "-webkit-inline-flex", + "browsers": "C21,O15,S6.1" + } + ] + }, + { + "name": "empty-cells", + "desc": "In the separated borders model, this property controls the rendering of borders and backgrounds around cells that have no visible content.", + "browsers": "E,C,FF1,IE7,O4,S1.2", + "restriction": "enum", + "values": [ + { + "name": "hide" + }, + { + "name": "-moz-show-background", + "browsers": "FF" + }, + { + "name": "show" + } + ] + }, + { + "name": "enable-background", + "desc": "Deprecated. Use 'isolation' property instead when support allows. Specifies how the accumulation of the background image is managed.", + "restriction": "integer, length, percentage, enum", + "values": [ + { + "name": "accumulate" + }, + { + "name": "new" + } + ] + }, + { + "name": "fallback", + "desc": "@counter-style descriptor. Specifies a fallback counter style to be used when the current counter style can’t create a representation for a given counter value.", + "browsers": "FF33", + "restriction": "identifier" + }, + { + "name": "fill", + "desc": "Paints the interior of the given graphical element.", + "restriction": "color, enum, url", + "values": [ + { + "name": "url()", + "desc": "A URL reference to a paint server element, which is an element that defines a paint server: ‘hatch’, ‘linearGradient’, ‘mesh’, ‘pattern’, ‘radialGradient’ and ‘solidcolor’." + } + ] + }, + { + "name": "fill-opacity", + "desc": "Specifies the opacity of the painting operation used to paint the interior the current object.", + "restriction": "number(0-1)" + }, + { + "name": "fill-rule", + "desc": "Indicates the algorithm (or winding rule) which is to be used to determine what parts of the canvas are included inside the shape.", + "restriction": "enum", + "values": [ + { + "name": "evenodd" + }, + { + "name": "nonzero" + } + ] + }, + { + "name": "filter", + "desc": "Processes an element’s rendering before it is displayed in the document, by applying one or more filter effects.", + "browsers": "E13,FF35", + "restriction": "enum, url", + "values": [ + { + "name": "none", + "desc": "No filter effects are applied." + }, + { + "name": "blur()" + }, + { + "name": "brightness()" + }, + { + "name": "contrast()" + }, + { + "name": "drop-shadow()" + }, + { + "name": "grayscale()" + }, + { + "name": "hue-rotate()" + }, + { + "name": "invert()" + }, + { + "name": "opacity()" + }, + { + "name": "saturate()" + }, + { + "name": "sepia()" + }, + { + "name": "url()", + "desc": "A filter reference to a element.", + "browsers": "FF3.6" + } + ] + }, + { + "name": "flex", + "desc": "Specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "length, number, percentage", + "values": [ + { + "name": "auto", + "desc": "Retrieves the value of the main size property as the used 'flex-basis'." + }, + { + "name": "content", + "browsers": "E,IE11" + }, + { + "name": "none", + "desc": "Expands to '0 0 auto'." + } + ] + }, + { + "name": "flex-basis", + "desc": "Sets the flex basis.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "length, number, percentage", + "values": [ + { + "name": "auto", + "desc": "Retrieves the value of the main size property as the used 'flex-basis'." + }, + { + "name": "content", + "browsers": "E,IE11" + } + ] + }, + { + "name": "flex-direction", + "desc": "Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "column", + "desc": "The flex container’s main axis has the same orientation as the block axis of the current writing mode." + }, + { + "name": "column-reverse" + }, + { + "name": "row" + }, + { + "name": "row-reverse" + } + ] + }, + { + "name": "flex-flow", + "desc": "Specifies how flexbox items are placed in the flexbox.", + "browsers": "E,C29,FF28,IE11,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "column", + "desc": "The flex container’s main axis has the same orientation as the block axis of the current writing mode." + }, + { + "name": "column-reverse" + }, + { + "name": "nowrap", + "desc": "The flex container is single-line." + }, + { + "name": "row" + }, + { + "name": "row-reverse" + }, + { + "name": "wrap", + "desc": "The flexbox is multi-line." + }, + { + "name": "wrap-reverse" + } + ] + }, + { + "name": "flex-grow", + "desc": "Sets the flex grow factor. Negative numbers are invalid.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "number" + }, + { + "name": "flex-shrink", + "desc": "Sets the flex shrink factor. Negative numbers are invalid.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "number" + }, + { + "name": "flex-wrap", + "desc": "Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.", + "browsers": "E,C29,FF28,IE11,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "nowrap", + "desc": "The flex container is single-line." + }, + { + "name": "wrap", + "desc": "The flexbox is multi-line." + }, + { + "name": "wrap-reverse" + } + ] + }, + { + "name": "float", + "desc": "Specifies how a box should be floated. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.", + "restriction": "enum", + "values": [ + { + "name": "left", + "desc": "The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property)." + }, + { + "name": "none", + "desc": "The box is not floated." + }, + { + "name": "right", + "desc": "Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top." + } + ] + }, + { + "name": "flood-color", + "desc": "Indicates what color to use to flood the current filter primitive subregion.", + "browsers": "E,C5,FF3,IE10,O9,S6", + "restriction": "color" + }, + { + "name": "flood-opacity", + "desc": "Indicates what opacity to use to flood the current filter primitive subregion.", + "browsers": "E,C5,FF3,IE10,O9,S6", + "restriction": "number(0-1), percentage" + }, + { + "name": "font", + "desc": "Shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family', at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.", + "restriction": "font", + "values": [ + { + "name": "100" + }, + { + "name": "200" + }, + { + "name": "300" + }, + { + "name": "400" + }, + { + "name": "500" + }, + { + "name": "600" + }, + { + "name": "700" + }, + { + "name": "800" + }, + { + "name": "900" + }, + { + "name": "bold" + }, + { + "name": "bolder" + }, + { + "name": "caption" + }, + { + "name": "icon", + "desc": "The font used to label icons." + }, + { + "name": "italic", + "desc": "Selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'." + }, + { + "name": "large" + }, + { + "name": "larger" + }, + { + "name": "lighter" + }, + { + "name": "medium" + }, + { + "name": "menu" + }, + { + "name": "message-box" + }, + { + "name": "normal", + "desc": "Specifies a face that is not labeled as a small-caps font." + }, + { + "name": "oblique", + "desc": "Selects a font that is labeled 'oblique'." + }, + { + "name": "small" + }, + { + "name": "small-caps", + "desc": "Specifies a font that is labeled as a small-caps font. If a genuine small-caps font is not available, user agents should simulate a small-caps font." + }, + { + "name": "small-caption" + }, + { + "name": "smaller" + }, + { + "name": "status-bar" + }, + { + "name": "x-large" + }, + { + "name": "x-small" + }, + { + "name": "xx-large" + }, + { + "name": "xx-small" + } + ] + }, + { + "name": "font-family", + "desc": "Specifies a prioritized list of font family names or generic family names. A user agent iterates through the list of family names until it matches an available font that contains a glyph for the character to be rendered.", + "restriction": "font", + "values": [ + { + "name": "Arial, Helvetica, sans-serif" + }, + { + "name": "Cambria, Cochin, Georgia, Times, Times New Roman, serif" + }, + { + "name": "Courier New, Courier, monospace" + }, + { + "name": "cursive" + }, + { + "name": "fantasy" + }, + { + "name": "'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif" + }, + { + "name": "Georgia, 'Times New Roman', Times, serif" + }, + { + "name": "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif" + }, + { + "name": "Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif" + }, + { + "name": "'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif" + }, + { + "name": "monospace" + }, + { + "name": "sans-serif" + }, + { + "name": "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" + }, + { + "name": "serif" + }, + { + "name": "'Times New Roman', Times, serif" + }, + { + "name": "'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif" + }, + { + "name": "Verdana, Geneva, Tahoma, sans-serif" + } + ] + }, + { + "name": "font-feature-settings", + "desc": "Provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case.", + "browsers": "E,FF34,IE10", + "restriction": "string, integer", + "values": [ + { + "name": "\"aalt\"" + }, + { + "name": "\"abvf\"" + }, + { + "name": "\"abvm\"" + }, + { + "name": "\"abvs\"" + }, + { + "name": "\"afrc\"" + }, + { + "name": "\"akhn\"" + }, + { + "name": "\"blwf\"" + }, + { + "name": "\"blwm\"" + }, + { + "name": "\"blws\"" + }, + { + "name": "\"calt\"" + }, + { + "name": "\"case\"" + }, + { + "name": "\"ccmp\"" + }, + { + "name": "\"cfar\"" + }, + { + "name": "\"cjct\"" + }, + { + "name": "\"clig\"" + }, + { + "name": "\"cpct\"" + }, + { + "name": "\"cpsp\"" + }, + { + "name": "\"cswh\"" + }, + { + "name": "\"curs\"" + }, + { + "name": "\"c2pc\"" + }, + { + "name": "\"c2cs\"", + "desc": "Small Capitals From Capitals. Applies only to bicameral scripts." + }, + { + "name": "\"dist\"" + }, + { + "name": "\"dlig\"", + "desc": "Discretionary ligatures." + }, + { + "name": "\"dnom\"" + }, + { + "name": "\"dtls\"" + }, + { + "name": "\"expt\"" + }, + { + "name": "\"falt\"" + }, + { + "name": "\"fin2\"" + }, + { + "name": "\"fin3\"" + }, + { + "name": "\"fina\"" + }, + { + "name": "\"flac\"" + }, + { + "name": "\"frac\"" + }, + { + "name": "\"fwid\"" + }, + { + "name": "\"half\"" + }, + { + "name": "\"haln\"" + }, + { + "name": "\"halt\"" + }, + { + "name": "\"hist\"" + }, + { + "name": "\"hkna\"" + }, + { + "name": "\"hlig\"" + }, + { + "name": "\"hngl\"" + }, + { + "name": "\"hojo\"" + }, + { + "name": "\"hwid\"" + }, + { + "name": "\"init\"" + }, + { + "name": "\"isol\"" + }, + { + "name": "\"ital\"" + }, + { + "name": "\"jalt\"" + }, + { + "name": "\"jp78\"" + }, + { + "name": "\"jp83\"" + }, + { + "name": "\"jp90\"" + }, + { + "name": "\"jp04\"" + }, + { + "name": "\"kern\"", + "desc": "Kerning." + }, + { + "name": "\"lfbd\"" + }, + { + "name": "\"liga\"", + "desc": "Standard Ligatures." + }, + { + "name": "\"ljmo\"" + }, + { + "name": "\"lnum\"", + "desc": "Lining Figures." + }, + { + "name": "\"locl\"" + }, + { + "name": "\"ltra\"" + }, + { + "name": "\"ltrm\"" + }, + { + "name": "\"mark\"" + }, + { + "name": "\"med2\"" + }, + { + "name": "\"medi\"" + }, + { + "name": "\"mgrk\"" + }, + { + "name": "\"mkmk\"" + }, + { + "name": "\"nalt\"" + }, + { + "name": "\"nlck\"" + }, + { + "name": "\"nukt\"" + }, + { + "name": "\"numr\"" + }, + { + "name": "\"onum\"", + "desc": "Oldstyle Figures." + }, + { + "name": "\"opbd\"" + }, + { + "name": "\"ordn\"" + }, + { + "name": "\"ornm\"" + }, + { + "name": "\"palt\"" + }, + { + "name": "\"pcap\"" + }, + { + "name": "\"pkna\"" + }, + { + "name": "\"pnum\"" + }, + { + "name": "\"pref\"" + }, + { + "name": "\"pres\"" + }, + { + "name": "\"pstf\"" + }, + { + "name": "\"psts\"" + }, + { + "name": "\"pwid\"" + }, + { + "name": "\"qwid\"" + }, + { + "name": "\"rand\"" + }, + { + "name": "\"rclt\"" + }, + { + "name": "\"rlig\"" + }, + { + "name": "\"rkrf\"" + }, + { + "name": "\"rphf\"" + }, + { + "name": "\"rtbd\"" + }, + { + "name": "\"rtla\"" + }, + { + "name": "\"rtlm\"" + }, + { + "name": "\"ruby\"" + }, + { + "name": "\"salt\"" + }, + { + "name": "\"sinf\"" + }, + { + "name": "\"size\"" + }, + { + "name": "\"smcp\"", + "desc": "Small Capitals. Applies only to bicameral scripts." + }, + { + "name": "\"smpl\"" + }, + { + "name": "\"ssty\"" + }, + { + "name": "\"stch\"" + }, + { + "name": "\"subs\"" + }, + { + "name": "\"sups\"" + }, + { + "name": "\"swsh\"", + "desc": "Swash. Does not apply to ideographic scripts." + }, + { + "name": "\"titl\"" + }, + { + "name": "\"tjmo\"" + }, + { + "name": "\"tnam\"" + }, + { + "name": "\"tnum\"", + "desc": "Tabular Figures." + }, + { + "name": "\"trad\"" + }, + { + "name": "\"twid\"" + }, + { + "name": "\"unic\"" + }, + { + "name": "\"valt\"" + }, + { + "name": "\"vatu\"" + }, + { + "name": "\"vert\"" + }, + { + "name": "\"vhal\"" + }, + { + "name": "\"vjmo\"" + }, + { + "name": "\"vkna\"" + }, + { + "name": "\"vkrn\"" + }, + { + "name": "\"vpal\"" + }, + { + "name": "\"vrt2\"" + }, + { + "name": "\"zero\"" + }, + { + "name": "normal", + "desc": "No change in glyph substitution or positioning occurs." + }, + { + "name": "off", + "desc": "Disable feature." + }, + { + "name": "on", + "desc": "Enable feature." + } + ] + }, + { + "name": "font-kerning", + "desc": "Kerning is the contextual adjustment of inter-glyph spacing. This property controls metric kerning, kerning that utilizes adjustment data contained in the font.", + "browsers": "C33,FF34,O20", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Specifies that kerning is applied at the discretion of the user agent." + }, + { + "name": "none", + "desc": "Specifies that kerning is not applied." + }, + { + "name": "normal", + "desc": "Specifies that kerning is applied." + } + ] + }, + { + "name": "font-language-override", + "desc": "The value of 'normal' implies that when rendering with OpenType fonts the language of the document is used to infer the OpenType language system, used to select language specific features when rendering.", + "browsers": "FF34", + "restriction": "string", + "values": [ + { + "name": "normal", + "desc": "Implies that when rendering with OpenType fonts the language of the document is used to infer the OpenType language system, used to select language specific features when rendering." + } + ] + }, + { + "name": "font-size", + "desc": "Indicates the desired height of glyphs from the font. For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.", + "restriction": "length, percentage", + "values": [ + { + "name": "large" + }, + { + "name": "larger" + }, + { + "name": "medium" + }, + { + "name": "small" + }, + { + "name": "smaller" + }, + { + "name": "x-large" + }, + { + "name": "x-small" + }, + { + "name": "xx-large" + }, + { + "name": "xx-small" + } + ] + }, + { + "name": "font-size-adjust", + "desc": "Preserves the readability of text when font fallback occurs by adjusting the font-size so that the x-height is the same irregardless of the font used.", + "browsers": "E,FF3,IE10", + "restriction": "number", + "values": [ + { + "name": "none", + "desc": "Do not preserve the font’s x-height." + } + ] + }, + { + "name": "font-stretch", + "desc": "Selects a normal, condensed, or expanded face from a font family.", + "browsers": "E,FF9,IE9", + "restriction": "enum", + "values": [ + { + "name": "condensed" + }, + { + "name": "expanded" + }, + { + "name": "extra-condensed" + }, + { + "name": "extra-expanded" + }, + { + "name": "narrower", + "browsers": "E,IE10" + }, + { + "name": "normal" + }, + { + "name": "semi-condensed" + }, + { + "name": "semi-expanded" + }, + { + "name": "ultra-condensed" + }, + { + "name": "ultra-expanded" + }, + { + "name": "wider", + "browsers": "E,IE10" + } + ] + }, + { + "name": "font-style", + "desc": "Allows italic or oblique faces to be selected. Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face.", + "restriction": "enum", + "values": [ + { + "name": "italic", + "desc": "Selects a font that is labeled as an 'italic' face, or an 'oblique' face if one is not" + }, + { + "name": "normal", + "desc": "Selects a face that is classified as 'normal'." + }, + { + "name": "oblique", + "desc": "Selects a font that is labeled as an 'oblique' face, or an 'italic' face if one is not." + } + ] + }, + { + "name": "font-synthesis", + "desc": "Controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces.", + "browsers": "FF34,S9", + "restriction": "enum", + "values": [ + { + "name": "none", + "desc": "Disallow all synthetic faces." + }, + { + "name": "style" + }, + { + "name": "weight" + } + ] + }, + { + "name": "font-variant", + "desc": "Specifies variant representations of the font", + "restriction": "enum", + "values": [ + { + "name": "normal", + "desc": "Specifies a face that is not labeled as a small-caps font." + }, + { + "name": "small-caps", + "desc": "Specifies a font that is labeled as a small-caps font. If a genuine small-caps font is not available, user agents should simulate a small-caps font." + } + ] + }, + { + "name": "font-variant-alternates", + "desc": "For any given character, fonts can provide a variety of alternate glyphs in addition to the default glyph for that character. This property provides control over the selection of these alternate glyphs.", + "browsers": "FF34", + "restriction": "enum", + "values": [ + { + "name": "annotation()" + }, + { + "name": "character-variant()" + }, + { + "name": "historical-forms" + }, + { + "name": "normal", + "desc": "None of the features are enabled." + }, + { + "name": "ornaments()" + }, + { + "name": "styleset()" + }, + { + "name": "stylistic()" + }, + { + "name": "swash()" + } + ] + }, + { + "name": "font-variant-caps", + "desc": "Specifies control over capitalized forms.", + "browsers": "FF34", + "restriction": "enum", + "values": [ + { + "name": "all-petite-caps" + }, + { + "name": "all-small-caps" + }, + { + "name": "normal", + "desc": "None of the features are enabled." + }, + { + "name": "petite-caps" + }, + { + "name": "small-caps", + "desc": "Enables display of small capitals. Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters." + }, + { + "name": "titling-caps" + }, + { + "name": "unicase" + } + ] + }, + { + "name": "font-variant-east-asian", + "desc": "Allows control of glyph substitute and positioning in East Asian text.", + "browsers": "FF34", + "restriction": "enum", + "values": [ + { + "name": "full-width" + }, + { + "name": "jis04" + }, + { + "name": "jis78" + }, + { + "name": "jis83" + }, + { + "name": "jis90" + }, + { + "name": "normal", + "desc": "None of the features are enabled." + }, + { + "name": "proportional-width" + }, + { + "name": "ruby", + "desc": "Enables display of ruby variant glyphs." + }, + { + "name": "simplified" + }, + { + "name": "traditional" + } + ] + }, + { + "name": "font-variant-ligatures", + "desc": "Specifies control over which ligatures are enabled or disabled. A value of ‘normal’ implies that the defaults set by the font are used.", + "browsers": "C18,FF34,O15,S6", + "restriction": "enum", + "values": [ + { + "name": "additional-ligatures" + }, + { + "name": "common-ligatures" + }, + { + "name": "contextual", + "browsers": "C35,F34,O22" + }, + { + "name": "discretionary-ligatures" + }, + { + "name": "historical-ligatures" + }, + { + "name": "no-additional-ligatures" + }, + { + "name": "no-common-ligatures" + }, + { + "name": "no-contextual", + "browsers": "C35,F34,O22" + }, + { + "name": "no-discretionary-ligatures" + }, + { + "name": "no-historical-ligatures" + }, + { + "name": "none", + "desc": "Disables all ligatures.", + "browsers": "FF34" + }, + { + "name": "normal", + "desc": "Implies that the defaults set by the font are used." + } + ] + }, + { + "name": "font-variant-numeric", + "desc": "Specifies control over numerical forms.", + "browsers": "FF34", + "restriction": "enum", + "values": [ + { + "name": "diagonal-fractions" + }, + { + "name": "lining-nums" + }, + { + "name": "normal", + "desc": "None of the features are enabled." + }, + { + "name": "oldstyle-nums" + }, + { + "name": "ordinal" + }, + { + "name": "proportional-nums" + }, + { + "name": "slashed-zero" + }, + { + "name": "stacked-fractions" + }, + { + "name": "tabular-nums" + } + ] + }, + { + "name": "font-variant-position", + "desc": "Specifies the vertical position", + "browsers": "FF34", + "restriction": "enum", + "values": [ + { + "name": "normal", + "desc": "None of the features are enabled." + }, + { + "name": "sub", + "desc": "Enables display of subscript variants (OpenType feature: subs)." + }, + { + "name": "super", + "desc": "Enables display of superscript variants (OpenType feature: sups)." + } + ] + }, + { + "name": "font-weight", + "desc": "Specifies weight of glyphs in the font, their degree of blackness or stroke thickness.", + "restriction": "enum", + "values": [ + { + "name": "100" + }, + { + "name": "200" + }, + { + "name": "300" + }, + { + "name": "400" + }, + { + "name": "500" + }, + { + "name": "600" + }, + { + "name": "700" + }, + { + "name": "800" + }, + { + "name": "900" + }, + { + "name": "bold" + }, + { + "name": "bolder" + }, + { + "name": "lighter" + }, + { + "name": "normal", + "desc": "Same as 400" + } + ] + }, + { + "name": "glyph-orientation-horizontal", + "desc": "Controls glyph orientation when the inline-progression-direction is horizontal.", + "restriction": "angle, number" + }, + { + "name": "glyph-orientation-vertical", + "desc": "Controls glyph orientation when the inline-progression-direction is vertical.", + "restriction": "angle, number, enum", + "values": [ + { + "name": "auto", + "desc": "Sets the orientation based on the fullwidth or non-fullwidth characters and the most common orientation." + } + ] + }, + { + "name": "height", + "desc": "Specifies the height of the content area, padding area or border area (depending on 'box-sizing') of certain boxes.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "The height depends on the values of other properties." + }, + { + "name": "fit-content", + "browsers": "C46,O33" + }, + { + "name": "max-content", + "browsers": "C46,O33" + }, + { + "name": "min-content", + "browsers": "C46,O33" + } + ] + }, + { + "name": "image-orientation", + "desc": "Specifies an orthogonal rotation to be applied to an image before it is laid out.", + "browsers": "FF26", + "restriction": "angle", + "values": [ + { + "name": "flip" + }, + { + "name": "from-image" + } + ] + }, + { + "name": "image-rendering", + "desc": "Provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm.", + "browsers": "C,FF3.6,O11.6,S", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The image should be scaled with an algorithm that maximizes the appearance of the image." + }, + { + "name": "crisp-edges" + }, + { + "name": "-moz-crisp-edges", + "browsers": "FF" + }, + { + "name": "optimizeQuality" + }, + { + "name": "optimizeSpeed", + "desc": "Deprecated." + }, + { + "name": "pixelated" + } + ] + }, + { + "name": "ime-mode", + "desc": "Controls the state of the input method editor for text fields.", + "browsers": "E,FF3,IE5", + "restriction": "enum", + "values": [ + { + "name": "active" + }, + { + "name": "auto", + "desc": "No change is made to the current input method editor state. This is the default." + }, + { + "name": "disabled" + }, + { + "name": "inactive" + }, + { + "name": "normal", + "desc": "The IME state should be normal; this value can be used in a user style sheet to override the page setting." + } + ] + }, + { + "name": "inline-size", + "desc": "Logical 'height'. Mapping depends on the element’s 'writing-mode'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "Depends on the values of other properties." + } + ] + }, + { + "name": "isolation", + "desc": "In CSS setting to 'isolate' will turn the element into a stacking context. In SVG, it defines whether an element is isolated or not.", + "browsers": "C,FF,O,S", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Elements are not isolated unless an operation is applied that causes the creation of a stacking context." + }, + { + "name": "isolate", + "desc": "In CSS will turn the element into a stacking context." + } + ] + }, + { + "name": "justify-content", + "desc": "Aligns flex items along the main axis of the current line of the flex container.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "center", + "desc": "Flex items are packed toward the center of the line." + }, + { + "name": "flex-end", + "desc": "Flex items are packed toward the end of the line." + }, + { + "name": "flex-start", + "desc": "Flex items are packed toward the start of the line." + }, + { + "name": "space-around", + "desc": "Flex items are evenly distributed in the line, with half-size spaces on either end." + }, + { + "name": "space-between", + "desc": "Flex items are evenly distributed in the line." + } + ] + }, + { + "name": "kerning", + "desc": "Indicates whether the user agent should adjust inter-glyph spacing based on kerning tables that are included in the relevant font or instead disable auto-kerning and set inter-character spacing to a specific length.", + "restriction": "length, enum", + "values": [ + { + "name": "auto", + "desc": "Indicates that the user agent should adjust inter-glyph spacing based on kerning tables that are included in the font that will be used." + } + ] + }, + { + "name": "left", + "desc": "Specifies how far an absolutely positioned box's left margin edge is offset to the right of the left edge of the box's 'containing block'.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well" + } + ] + }, + { + "name": "letter-spacing", + "desc": "Specifies the minimum, maximum, and optimal spacing between grapheme clusters.", + "restriction": "length", + "values": [ + { + "name": "normal", + "desc": "The spacing is the normal spacing for the current font. It is typically zero-length." + } + ] + }, + { + "name": "lighting-color", + "desc": "Defines the color of the light source for filter primitives 'feDiffuseLighting' and 'feSpecularLighting'.", + "browsers": "E,C5,FF3,IE10,O9,S6", + "restriction": "color" + }, + { + "name": "line-height", + "desc": "Determines the block-progression dimension of the text content area of an inline box.", + "restriction": "number, length, percentage", + "values": [ + { + "name": "normal", + "desc": "Tells user agents to set the computed value to a 'reasonable' value based on the font size of the element." + } + ] + }, + { + "name": "list-style", + "desc": "Shorthand for setting 'list-style-type', 'list-style-position' and 'list-style-image'", + "restriction": "image, enum, url", + "values": [ + { + "name": "armenian" + }, + { + "name": "circle" + }, + { + "name": "decimal" + }, + { + "name": "decimal-leading-zero" + }, + { + "name": "disc" + }, + { + "name": "georgian" + }, + { + "name": "inside" + }, + { + "name": "lower-alpha" + }, + { + "name": "lower-greek" + }, + { + "name": "lower-latin" + }, + { + "name": "lower-roman" + }, + { + "name": "none" + }, + { + "name": "outside" + }, + { + "name": "square", + "desc": "A filled square." + }, + { + "name": "symbols()", + "browsers": "FF35" + }, + { + "name": "upper-alpha" + }, + { + "name": "upper-latin" + }, + { + "name": "upper-roman" + }, + { + "name": "url()" + } + ] + }, + { + "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": "image", + "values": [ + { + "name": "none", + "desc": "The default contents of the of the list item’s marker are given by 'list-style-type' instead." + } + ] + }, + { + "name": "list-style-position", + "desc": "Specifies the position of the '::marker' pseudo-element's box in the list item.", + "restriction": "enum", + "values": [ + { + "name": "inside" + }, + { + "name": "outside" + } + ] + }, + { + "name": "list-style-type", + "desc": "Used to construct the default contents of a list item’s marker", + "restriction": "enum, string", + "values": [ + { + "name": "armenian", + "desc": "Traditional uppercase Armenian numbering." + }, + { + "name": "circle" + }, + { + "name": "decimal", + "desc": "Western decimal numbers." + }, + { + "name": "decimal-leading-zero", + "desc": "Decimal numbers padded by initial zeros." + }, + { + "name": "disc" + }, + { + "name": "georgian", + "desc": "Traditional Georgian numbering." + }, + { + "name": "lower-alpha", + "desc": "Lowercase ASCII letters." + }, + { + "name": "lower-greek", + "desc": "Lowercase classical Greek." + }, + { + "name": "lower-latin", + "desc": "Lowercase ASCII letters." + }, + { + "name": "lower-roman", + "desc": "Lowercase ASCII Roman numerals." + }, + { + "name": "none", + "desc": "No marker" + }, + { + "name": "square", + "desc": "A filled square." + }, + { + "name": "symbols()", + "browsers": "FF35" + }, + { + "name": "upper-alpha", + "desc": "Uppercase ASCII letters." + }, + { + "name": "upper-latin", + "desc": "Uppercase ASCII letters." + }, + { + "name": "upper-roman", + "desc": "Uppercase ASCII Roman numerals." + } + ] + }, + { + "name": "margin", + "desc": "Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "margin-block-end", + "desc": "Logical 'margin-bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "margin-block-start", + "desc": "Logical 'margin-top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "margin-bottom", + "desc": "Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "margin-inline-end", + "desc": "Logical 'margin-right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "margin-inline-start", + "desc": "Logical 'margin-left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "margin-left", + "desc": "Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "margin-right", + "desc": "Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "margin-top", + "desc": "Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "marker", + "desc": "Specifies the marker symbol that shall be used for all points on the sets the value for all vertices on the given ‘path’ element or basic shape.", + "restriction": "url", + "values": [ + { + "name": "none", + "desc": "Indicates that no marker symbol will be drawn at the given vertex or vertices." + }, + { + "name": "url()", + "desc": "Indicates that the element referenced will be used." + } + ] + }, + { + "name": "marker-end", + "desc": "Specifies the marker that will be drawn at the last vertices of the given markable element.", + "restriction": "url", + "values": [ + { + "name": "none", + "desc": "Indicates that no marker symbol will be drawn at the given vertex or vertices." + }, + { + "name": "url()", + "desc": "Indicates that the element referenced will be used." + } + ] + }, + { + "name": "marker-mid", + "desc": "Specifies the marker that will be drawn at all vertices except the first and last.", + "restriction": "url", + "values": [ + { + "name": "none", + "desc": "Indicates that no marker symbol will be drawn at the given vertex or vertices." + }, + { + "name": "url()", + "desc": "Indicates that the element referenced will be used." + } + ] + }, + { + "name": "marker-start", + "desc": "Specifies the marker that will be drawn at the first vertices of the given markable element.", + "restriction": "url", + "values": [ + { + "name": "none", + "desc": "Indicates that no marker symbol will be drawn at the given vertex or vertices." + }, + { + "name": "url()", + "desc": "Indicates that the element referenced will be used." + } + ] + }, + { + "name": "mask-type", + "desc": "Defines whether the content of the element is treated as as luminance mask or alpha mask.", + "browsers": "C24,FF35,O15,S7", + "restriction": "enum", + "values": [ + { + "name": "alpha" + }, + { + "name": "luminance" + } + ] + }, + { + "name": "max-block-size", + "desc": "Logical 'max-width'. Mapping depends on the element’s 'writing-mode'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "none", + "desc": "No limit on the width of the box." + } + ] + }, + { + "name": "max-height", + "desc": "Allows authors to constrain content height to a certain range.", + "browsers": "E,C,FF1,IE7,O7,S1", + "restriction": "length, percentage", + "values": [ + { + "name": "none", + "desc": "No limit on the height of the box." + }, + { + "name": "fit-content", + "browsers": "C46,O33" + }, + { + "name": "max-content", + "browsers": "C46,O33" + }, + { + "name": "min-content", + "browsers": "C46,O33" + } + ] + }, + { + "name": "max-inline-size", + "desc": "Logical 'max-height'. Mapping depends on the element’s 'writing-mode'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "none", + "desc": "No limit on the height of the box." + } + ] + }, + { + "name": "max-width", + "desc": "Allows authors to constrain content width to a certain range.", + "browsers": "E,C,FF1,IE7,O7,S1", + "restriction": "length, percentage", + "values": [ + { + "name": "none", + "desc": "No limit on the width of the box." + }, + { + "name": "fit-content", + "browsers": "C46,O33" + }, + { + "name": "max-content", + "browsers": "C46,O33" + }, + { + "name": "min-content", + "browsers": "C46,O33" + } + ] + }, + { + "name": "min-block-size", + "desc": "Logical 'min-width'. Mapping depends on the element’s 'writing-mode'.", + "browsers": "FF41", + "restriction": "length, percentage" + }, + { + "name": "min-height", + "desc": "Allows authors to constrain content height to a certain range.", + "browsers": "E,C,FF1,IE7,O7,S1", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "browsers": "E,IE11" + }, + { + "name": "fit-content", + "browsers": "C46,O33" + }, + { + "name": "max-content", + "browsers": "C46,O33" + }, + { + "name": "min-content", + "browsers": "C46,O33" + } + ] + }, + { + "name": "min-inline-size", + "desc": "Logical 'min-height'. Mapping depends on the element’s 'writing-mode'.", + "browsers": "FF41", + "restriction": "length, percentage" + }, + { + "name": "min-width", + "desc": "Allows authors to constrain content width to a certain range.", + "browsers": "E,C,FF1,IE7,O7,S1", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "browsers": "E,IE11" + }, + { + "name": "fit-content", + "browsers": "C46,O33" + }, + { + "name": "max-content", + "browsers": "C46,O33" + }, + { + "name": "min-content", + "browsers": "C46,O33" + } + ] + }, + { + "name": "mix-blend-mode", + "desc": "Defines the formula that must be used to mix the colors with the backdrop.", + "browsers": "C41,FF32,O29,S7.1", + "restriction": "enum", + "values": [ + { + "name": "normal", + "desc": "Default attribute which specifies no blending" + }, + { + "name": "multiply" + }, + { + "name": "screen" + }, + { + "name": "overlay" + }, + { + "name": "darken" + }, + { + "name": "lighten" + }, + { + "name": "color-dodge" + }, + { + "name": "color-burn" + }, + { + "name": "hard-light" + }, + { + "name": "soft-light" + }, + { + "name": "difference" + }, + { + "name": "exclusion" + }, + { + "name": "hue", + "browsers": "C41,FF32,O29" + }, + { + "name": "saturation", + "browsers": "C41,FF32,O29" + }, + { + "name": "color", + "browsers": "C41,FF32,O29" + }, + { + "name": "luminosity", + "browsers": "C41,FF32,O29" + } + ] + }, + { + "name": "motion", + "desc": "Shorthand property for setting 'motion-path', 'motion-offset' and 'motion-rotation'.", + "browsers": "C46,O33", + "restriction": "url, length, percentage, angle, shape, geometry-box, enum", + "values": [ + { + "name": "none", + "desc": "No motion path gets created." + }, + { + "name": "path()" + }, + { + "name": "auto", + "desc": "Indicates that the object is rotated by the angle of the direction of the motion path." + }, + { + "name": "reverse", + "desc": "Indicates that the object is rotated by the angle of the direction of the motion path plus 180 degrees." + } + ] + }, + { + "name": "motion-offset", + "desc": "A distance that describes the position along the specified motion path.", + "browsers": "C46,O33", + "restriction": "length, percentage" + }, + { + "name": "motion-path", + "desc": "Specifies the motion path the element gets positioned at.", + "browsers": "C46,O33", + "restriction": "url, shape, geometry-box, enum", + "values": [ + { + "name": "none", + "desc": "No motion path gets created." + }, + { + "name": "path()" + } + ] + }, + { + "name": "motion-rotation", + "desc": "Defines the direction of the element while positioning along the motion path.", + "browsers": "C46,O33", + "restriction": "angle", + "values": [ + { + "name": "auto", + "desc": "Indicates that the object is rotated by the angle of the direction of the motion path." + }, + { + "name": "reverse", + "desc": "Indicates that the object is rotated by the angle of the direction of the motion path plus 180 degrees." + } + ] + }, + { + "name": "-moz-animation", + "desc": "Shorthand property combines six of the animation properties into a single property.", + "browsers": "FF9", + "restriction": "time, enum, timing-function, identifier, number", + "values": [ + { + "name": "alternate" + }, + { + "name": "alternate-reverse" + }, + { + "name": "backwards" + }, + { + "name": "both", + "desc": "Both forwards and backwards fill modes are applied." + }, + { + "name": "forwards" + }, + { + "name": "infinite", + "desc": "Causes the animation to repeat forever." + }, + { + "name": "none", + "desc": "No animation is performed" + }, + { + "name": "normal", + "desc": "Normal playback." + }, + { + "name": "reverse", + "desc": "All iterations of the animation are played in the reverse direction from the way they were specified." + } + ] + }, + { + "name": "-moz-animation-delay", + "desc": "Defines when the animation will start.", + "browsers": "FF9", + "restriction": "time" + }, + { + "name": "-moz-animation-direction", + "desc": "Defines whether or not the animation should play in reverse on alternate cycles.", + "browsers": "FF9", + "restriction": "enum", + "values": [ + { + "name": "alternate" + }, + { + "name": "alternate-reverse" + }, + { + "name": "normal", + "desc": "Normal playback." + }, + { + "name": "reverse", + "desc": "All iterations of the animation are played in the reverse direction from the way they were specified." + } + ] + }, + { + "name": "-moz-animation-duration", + "desc": "Defines the length of time that an animation takes to complete one cycle.", + "browsers": "FF9", + "restriction": "time" + }, + { + "name": "-moz-animation-iteration-count", + "desc": "Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.", + "browsers": "FF9", + "restriction": "number, enum", + "values": [ + { + "name": "infinite", + "desc": "Causes the animation to repeat forever." + } + ] + }, + { + "name": "-moz-animation-name", + "desc": "Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation.", + "browsers": "FF9", + "restriction": "identifier, enum", + "values": [ + { + "name": "none", + "desc": "No animation is performed" + } + ] + }, + { + "name": "-moz-animation-play-state", + "desc": "Defines whether the animation is running or paused.", + "browsers": "FF9", + "restriction": "enum", + "values": [ + { + "name": "paused" + }, + { + "name": "running" + } + ] + }, + { + "name": "-moz-animation-timing-function", + "desc": "Describes how the animation will progress over one cycle of its duration. See the 'transition-timing-function'.", + "browsers": "FF9", + "restriction": "timing-function" + }, + { + "name": "-moz-appearance", + "desc": "Used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.", + "browsers": "FF1", + "restriction": "enum", + "values": [ + { + "name": "button" + }, + { + "name": "button-arrow-down" + }, + { + "name": "button-arrow-next" + }, + { + "name": "button-arrow-previous" + }, + { + "name": "button-arrow-up" + }, + { + "name": "button-bevel" + }, + { + "name": "checkbox" + }, + { + "name": "checkbox-container" + }, + { + "name": "checkbox-label" + }, + { + "name": "dialog" + }, + { + "name": "groupbox" + }, + { + "name": "listbox" + }, + { + "name": "menuarrow" + }, + { + "name": "menuimage" + }, + { + "name": "menuitem" + }, + { + "name": "menuitemtext" + }, + { + "name": "menulist" + }, + { + "name": "menulist-button" + }, + { + "name": "menulist-text" + }, + { + "name": "menulist-textfield" + }, + { + "name": "menupopup" + }, + { + "name": "menuradio" + }, + { + "name": "menuseparator" + }, + { + "name": "-moz-mac-unified-toolbar" + }, + { + "name": "-moz-win-borderless-glass" + }, + { + "name": "-moz-win-browsertabbar-toolbox" + }, + { + "name": "-moz-win-communications-toolbox" + }, + { + "name": "-moz-win-glass" + }, + { + "name": "-moz-win-media-toolbox" + }, + { + "name": "none" + }, + { + "name": "progressbar" + }, + { + "name": "progresschunk" + }, + { + "name": "radio" + }, + { + "name": "radio-container" + }, + { + "name": "radio-label" + }, + { + "name": "radiomenuitem" + }, + { + "name": "resizer" + }, + { + "name": "resizerpanel" + }, + { + "name": "scrollbarbutton-down" + }, + { + "name": "scrollbarbutton-left" + }, + { + "name": "scrollbarbutton-right" + }, + { + "name": "scrollbarbutton-up" + }, + { + "name": "scrollbar-small" + }, + { + "name": "scrollbartrack-horizontal" + }, + { + "name": "scrollbartrack-vertical" + }, + { + "name": "separator" + }, + { + "name": "spinner" + }, + { + "name": "spinner-downbutton" + }, + { + "name": "spinner-textfield" + }, + { + "name": "spinner-upbutton" + }, + { + "name": "statusbar" + }, + { + "name": "statusbarpanel" + }, + { + "name": "tab" + }, + { + "name": "tabpanels" + }, + { + "name": "tab-scroll-arrow-back" + }, + { + "name": "tab-scroll-arrow-forward" + }, + { + "name": "textfield" + }, + { + "name": "textfield-multiline" + }, + { + "name": "toolbar" + }, + { + "name": "toolbox" + }, + { + "name": "tooltip" + }, + { + "name": "treeheadercell" + }, + { + "name": "treeheadersortarrow" + }, + { + "name": "treeitem" + }, + { + "name": "treetwistyopen" + }, + { + "name": "treeview" + }, + { + "name": "treewisty" + }, + { + "name": "window" + } + ] + }, + { + "name": "-moz-backface-visibility", + "desc": "Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer.", + "browsers": "FF10", + "restriction": "enum", + "values": [ + { + "name": "hidden" + }, + { + "name": "visible" + } + ] + }, + { + "name": "-moz-background-clip", + "desc": "Determines the background painting area.", + "browsers": "FF1-3.6", + "restriction": "box, enum", + "values": [ + { + "name": "padding" + } + ] + }, + { + "name": "-moz-background-inline-policy", + "desc": "In Gecko-based applications like Firefox, the -moz-background-inline-policy CSS property specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines. The choice of position has significant effects on repetition.", + "browsers": "FF1", + "restriction": "enum", + "values": [ + { + "name": "bounding-box" + }, + { + "name": "continuous" + }, + { + "name": "each-box" + } + ] + }, + { + "name": "-moz-background-origin", + "desc": "For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s).", + "browsers": "FF1", + "restriction": "box" + }, + { + "name": "-moz-border-bottom-colors", + "desc": "Sets a list of colors for the bottom border.", + "browsers": "FF1", + "restriction": "color" + }, + { + "name": "-moz-border-image", + "desc": "Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values.", + "browsers": "FF3.6", + "restriction": "length, percentage, number, url, enum", + "values": [ + { + "name": "auto", + "desc": "If 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead." + }, + { + "name": "fill", + "desc": "Causes the middle part of the border-image to be preserved." + }, + { + "name": "none" + }, + { + "name": "repeat" + }, + { + "name": "round", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does." + }, + { + "name": "space", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles." + }, + { + "name": "stretch", + "desc": "The image is stretched to fill the area." + }, + { + "name": "url()" + } + ] + }, + { + "name": "-moz-border-left-colors", + "desc": "Sets a list of colors for the bottom border.", + "browsers": "FF1", + "restriction": "color" + }, + { + "name": "-moz-border-right-colors", + "desc": "Sets a list of colors for the bottom border.", + "browsers": "FF1", + "restriction": "color" + }, + { + "name": "-moz-border-top-colors", + "desc": "Ske Firefox, -moz-border-bottom-colors sets a list of colors for the bottom border.", + "browsers": "FF1", + "restriction": "color" + }, + { + "name": "-moz-box-align", + "desc": "Specifies how a XUL box aligns its contents across (perpendicular to) the direction of its layout. The effect of this is only visible if there is extra space in the box.", + "browsers": "FF1", + "restriction": "enum", + "values": [ + { + "name": "baseline", + "desc": "If this box orientation is inline-axis or horizontal, all children are placed with their baselines aligned, and extra space placed before or after as necessary. For block flows, the baseline of the first non-empty line box located within the element is used. For tables, the baseline of the first cell is used." + }, + { + "name": "center", + "desc": "Any extra space is divided evenly, with half placed above the child and the other half placed after the child." + }, + { + "name": "end", + "desc": "For normal direction boxes, the bottom edge of each child is placed along the bottom of the box. Extra space is placed above the element. For reverse direction boxes, the top edge of each child is placed along the top of the box. Extra space is placed below the element." + }, + { + "name": "start", + "desc": "For normal direction boxes, the top edge of each child is placed along the top of the box. Extra space is placed below the element. For reverse direction boxes, the bottom edge of each child is placed along the bottom of the box. Extra space is placed above the element." + }, + { + "name": "stretch", + "desc": "The height of each child is adjusted to that of the containing block." + } + ] + }, + { + "name": "-moz-box-direction", + "desc": "Specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).", + "browsers": "FF1", + "restriction": "enum", + "values": [ + { + "name": "normal", + "desc": "A box with a computed value of horizontal for box-orient displays its children from left to right. A box with a computed value of vertical displays its children from top to bottom." + }, + { + "name": "reverse", + "desc": "A box with a computed value of horizontal for box-orient displays its children from right to left. A box with a computed value of vertical displays its children from bottom to top." + } + ] + }, + { + "name": "-moz-box-flex", + "desc": "Specifies how a box grows to fill the box that contains it, in the direction of the containing box's layout.", + "browsers": "FF1", + "restriction": "number" + }, + { + "name": "-moz-box-flexgroup", + "desc": "Flexible elements can be assigned to flex groups using the 'box-flex-group' property.", + "browsers": "FF1", + "restriction": "integer" + }, + { + "name": "-moz-box-ordinal-group", + "desc": "Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group.", + "browsers": "FF1", + "restriction": "integer" + }, + { + "name": "-moz-box-orient", + "desc": "In Mozilla applications, -moz-box-orient specifies whether a box lays out its contents horizontally or vertically.", + "browsers": "FF1", + "restriction": "enum", + "values": [ + { + "name": "block-axis" + }, + { + "name": "horizontal", + "desc": "The box displays its children from left to right in a horizontal line." + }, + { + "name": "inline-axis" + }, + { + "name": "vertical", + "desc": "The box displays its children from stacked from top to bottom vertically." + } + ] + }, + { + "name": "-moz-box-pack", + "desc": "Specifies how a box packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box.", + "browsers": "FF1", + "restriction": "enum", + "values": [ + { + "name": "center", + "desc": "The extra space is divided evenly, with half placed before the first child and the other half placed after the last child." + }, + { + "name": "end", + "desc": "For normal direction boxes, the right edge of the last child is placed at the right side, with all extra space placed before the first child. For reverse direction boxes, the left edge of the first child is placed at the left side, with all extra space placed after the last child." + }, + { + "name": "justify", + "desc": "The space is divided evenly in-between each child, with none of the extra space placed before the first child or after the last child. If there is only one child, treat the pack value as if it were start." + }, + { + "name": "start", + "desc": "For normal direction boxes, the left edge of the first child is placed at the left side, with all extra space placed after the last child. For reverse direction boxes, the right edge of the last child is placed at the right side, with all extra space placed before the first child." + } + ] + }, + { + "name": "-moz-box-sizing", + "desc": "Box Model addition in CSS3.", + "browsers": "FF1", + "restriction": "enum", + "values": [ + { + "name": "border-box" + }, + { + "name": "content-box" + }, + { + "name": "padding-box" + } + ] + }, + { + "name": "-moz-column-count", + "desc": "Describes the optimal number of columns into which the content of the element will be flowed.", + "browsers": "FF3.5", + "restriction": "integer", + "values": [ + { + "name": "auto", + "desc": "Determines the number of columns by the 'column-width' property and the element width." + } + ] + }, + { + "name": "-moz-column-gap", + "desc": "Sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap.", + "browsers": "FF3.5", + "restriction": "length", + "values": [ + { + "name": "normal", + "desc": "User agent specific and typically equivalent to 1em." + } + ] + }, + { + "name": "-moz-column-rule", + "desc": "Shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values.", + "browsers": "FF3.5", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "-moz-column-rule-color", + "desc": "Sets the color of the column rule", + "browsers": "FF3.5", + "restriction": "color" + }, + { + "name": "-moz-column-rule-style", + "desc": "Sets the style of the rule between columns of an element.", + "browsers": "FF3.5", + "restriction": "line-style" + }, + { + "name": "-moz-column-rule-width", + "desc": "Sets the width of the rule between columns. Negative values are not allowed.", + "browsers": "FF3.5", + "restriction": "length, line-width" + }, + { + "name": "-moz-columns", + "desc": "A shorthand property which sets both 'column-width' and 'column-count'.", + "browsers": "FF9", + "restriction": "length, integer", + "values": [ + { + "name": "auto", + "desc": "The width depends on the values of other properties." + } + ] + }, + { + "name": "-moz-column-width", + "desc": "This property describes the width of columns in multicol elements.", + "browsers": "FF3.5", + "restriction": "length", + "values": [ + { + "name": "auto", + "desc": "The width depends on the values of other properties." + } + ] + }, + { + "name": "-moz-font-feature-settings", + "desc": "Provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case.", + "browsers": "FF4", + "restriction": "string, integer", + "values": [ + { + "name": "\"c2cs\"" + }, + { + "name": "\"dlig\"" + }, + { + "name": "\"kern\"" + }, + { + "name": "\"liga\"" + }, + { + "name": "\"lnum\"" + }, + { + "name": "\"onum\"" + }, + { + "name": "\"smcp\"" + }, + { + "name": "\"swsh\"" + }, + { + "name": "\"tnum\"" + }, + { + "name": "normal", + "desc": "No change in glyph substitution or positioning occurs." + }, + { + "name": "off", + "browsers": "FF15" + }, + { + "name": "on", + "browsers": "FF15" + } + ] + }, + { + "name": "-moz-hyphens", + "desc": "Controls whether hyphenation is allowed to create more break opportunities within a line of text.", + "browsers": "FF9", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word." + }, + { + "name": "manual" + }, + { + "name": "none", + "desc": "Words are not broken at line breaks, even if characters inside the word suggest line break points." + } + ] + }, + { + "name": "-moz-perspective", + "desc": "Applies the same transform as the perspective() transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.", + "browsers": "FF10", + "restriction": "length", + "values": [ + { + "name": "none", + "desc": "No perspective transform is applied." + } + ] + }, + { + "name": "-moz-perspective-origin", + "desc": "Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.", + "browsers": "FF10", + "restriction": "position, percentage, length" + }, + { + "name": "-moz-text-align-last", + "desc": "Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'.", + "browsers": "FF12", + "restriction": "enum", + "values": [ + { + "name": "auto" + }, + { + "name": "center", + "desc": "The inline contents are centered within the line box." + }, + { + "name": "justify", + "desc": "The text is justified according to the method specified by the 'text-justify' property." + }, + { + "name": "left", + "desc": "The inline contents are aligned to the left edge of the line box. In vertical text, 'left' aligns to the edge of the line box that would be the start edge for left-to-right text." + }, + { + "name": "right", + "desc": "The inline contents are aligned to the right edge of the line box. In vertical text, 'right' aligns to the edge of the line box that would be the end edge for left-to-right text." + } + ] + }, + { + "name": "-moz-text-decoration-color", + "desc": "Specifies the color of text decoration (underlines overlines, and line-throughs) set on the element with text-decoration-line.", + "browsers": "FF6", + "restriction": "color" + }, + { + "name": "-moz-text-decoration-line", + "desc": "Specifies what line decorations, if any, are added to the element.", + "browsers": "FF6", + "restriction": "enum", + "values": [ + { + "name": "line-through" + }, + { + "name": "none", + "desc": "Neither produces nor inhibits text decoration." + }, + { + "name": "overline" + }, + { + "name": "underline" + } + ] + }, + { + "name": "-moz-text-decoration-style", + "desc": "Specifies the line style for underline, line-through and overline text decoration.", + "browsers": "FF6", + "restriction": "enum", + "values": [ + { + "name": "dashed" + }, + { + "name": "dotted" + }, + { + "name": "double" + }, + { + "name": "none", + "desc": "Produces no line." + }, + { + "name": "solid" + }, + { + "name": "wavy" + } + ] + }, + { + "name": "-moz-text-size-adjust", + "desc": "Specifies a size adjustment for displaying text content in mobile browsers.", + "browsers": "FF", + "restriction": "enum, percentage", + "values": [ + { + "name": "auto", + "desc": "Renderers must use the default size adjustment when displaying on a small device." + }, + { + "name": "none", + "desc": "Renderers must not do size adjustment when displaying on a small device." + } + ] + }, + { + "name": "-moz-transform", + "desc": "A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.", + "browsers": "FF3.5", + "restriction": "enum", + "values": [ + { + "name": "matrix()" + }, + { + "name": "matrix3d()" + }, + { + "name": "none" + }, + { + "name": "perspective" + }, + { + "name": "rotate()" + }, + { + "name": "rotate3d()" + }, + { + "name": "rotateX('angle')" + }, + { + "name": "rotateY('angle')" + }, + { + "name": "rotateZ('angle')" + }, + { + "name": "scale()" + }, + { + "name": "scale3d()" + }, + { + "name": "scaleX()" + }, + { + "name": "scaleY()" + }, + { + "name": "scaleZ()" + }, + { + "name": "skew()" + }, + { + "name": "skewX()" + }, + { + "name": "skewY()" + }, + { + "name": "translate()" + }, + { + "name": "translate3d()" + }, + { + "name": "translateX()" + }, + { + "name": "translateY()" + }, + { + "name": "translateZ()" + } + ] + }, + { + "name": "-moz-transform-origin", + "desc": "Establishes the origin of transformation for an element.", + "browsers": "FF3.5", + "restriction": "position, length, percentage" + }, + { + "name": "-moz-transition", + "desc": "Shorthand property combines four of the transition properties into a single property.", + "browsers": "FF4", + "restriction": "time, property, timing-function, enum", + "values": [ + { + "name": "all", + "desc": "Every property that is able to undergo a transition will do so." + }, + { + "name": "none", + "desc": "No property will transition." + } + ] + }, + { + "name": "-moz-transition-delay", + "desc": "Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied.", + "browsers": "FF4", + "restriction": "time" + }, + { + "name": "-moz-transition-duration", + "desc": "Specifies how long the transition from the old value to the new value should take.", + "browsers": "FF4", + "restriction": "time" + }, + { + "name": "-moz-transition-property", + "desc": "Specifies the name of the CSS property to which the transition is applied.", + "browsers": "FF4", + "restriction": "property", + "values": [ + { + "name": "all", + "desc": "Every property that is able to undergo a transition will do so." + }, + { + "name": "none", + "desc": "No property will transition." + } + ] + }, + { + "name": "-moz-transition-timing-function", + "desc": "Describes how the intermediate values used during a transition will be calculated.", + "browsers": "FF4", + "restriction": "timing-function" + }, + { + "name": "-moz-user-focus", + "desc": "Used to indicate whether the element can have focus.", + "browsers": "FF1.5", + "values": [ + { + "name": "ignore" + }, + { + "name": "normal" + } + ] + }, + { + "name": "-moz-user-select", + "desc": "Controls the appearance of selection.", + "browsers": "FF1.5", + "restriction": "enum", + "values": [ + { + "name": "all" + }, + { + "name": "element" + }, + { + "name": "elements" + }, + { + "name": "-moz-all" + }, + { + "name": "-moz-none" + }, + { + "name": "none" + }, + { + "name": "text" + }, + { + "name": "toggle" + } + ] + }, + { + "name": "-ms-accelerator", + "desc": "IE only. Has the ability to turn off its system underlines for accelerator keys until the ALT key is pressed", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "false" + }, + { + "name": "true" + } + ] + }, + { + "name": "-ms-behavior", + "desc": "IE only. Used to extend behaviors of the browser", + "browsers": "IE8", + "restriction": "url" + }, + { + "name": "-ms-block-progression", + "desc": "Sets the block-progression value and the flow orientation", + "browsers": "IE8", + "restriction": "enum", + "values": [ + { + "name": "bt" + }, + { + "name": "lr" + }, + { + "name": "rl" + }, + { + "name": "tb" + } + ] + }, + { + "name": "-ms-content-zoom-chaining", + "desc": "Specifies the zoom behavior that occurs when a user hits the zoom limit during a manipulation.", + "browsers": "E,IE10", + "values": [ + { + "name": "chained", + "desc": "The nearest zoomable parent element begins zooming when the user hits a zoom limit during a manipulation. No bounce effect is shown." + }, + { + "name": "none", + "desc": "A bounce effect is shown when the user hits a zoom limit during a manipulation." + } + ] + }, + { + "name": "-ms-content-zooming", + "desc": "Specifies whether zooming is enabled.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "none", + "desc": "The element is not zoomable." + }, + { + "name": "zoom" + } + ] + }, + { + "name": "-ms-content-zoom-limit", + "desc": "Shorthand property for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.", + "browsers": "E,IE10", + "restriction": "percentage" + }, + { + "name": "-ms-content-zoom-limit-max", + "desc": "Specifies the maximum zoom factor.", + "browsers": "E,IE10", + "restriction": "percentage" + }, + { + "name": "-ms-content-zoom-limit-min", + "desc": "Specifies the minimum zoom factor.", + "browsers": "E,IE10", + "restriction": "percentage" + }, + { + "name": "-ms-content-zoom-snap", + "desc": "Shorthand property for the -ms-content-zoom-snap-type and -ms-content-zoom-snap-points properties.", + "browsers": "E,IE10", + "values": [ + { + "name": "mandatory", + "desc": "Indicates that the motion of the content after the contact is picked up is always adjusted so that it lands on a snap-point." + }, + { + "name": "none", + "desc": "Indicates that zooming is unaffected by any defined snap-points." + }, + { + "name": "proximity", + "desc": "Indicates that the motion of the content after the contact is picked up may be adjusted if the content would normally stop \"close enough\" to a snap-point." + }, + { + "name": "snapInterval(100%, 100%)", + "desc": "Specifies where the snap-points will be placed." + }, + { + "name": "snapList()", + "desc": "Specifies the position of individual snap-points as a comma-separated list of zoom factors." + } + ] + }, + { + "name": "-ms-content-zoom-snap-points", + "desc": "Defines where zoom snap-points are located.", + "browsers": "E,IE10", + "values": [ + { + "name": "snapInterval(100%, 100%)", + "desc": "Specifies where the snap-points will be placed." + }, + { + "name": "snapList()", + "desc": "Specifies the position of individual snap-points as a comma-separated list of zoom factors." + } + ] + }, + { + "name": "-ms-content-zoom-snap-type", + "desc": "Specifies how zooming is affected by defined snap-points.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "mandatory", + "desc": "Indicates that the motion of the content after the contact is picked up is always adjusted so that it lands on a snap-point." + }, + { + "name": "none", + "desc": "Indicates that zooming is unaffected by any defined snap-points." + }, + { + "name": "proximity", + "desc": "Indicates that the motion of the content after the contact is picked up may be adjusted if the content would normally stop \"close enough\" to a snap-point." + } + ] + }, + { + "name": "-ms-filter", + "desc": "IE only. Used to produce visual effects.", + "browsers": "IE8-9", + "restriction": "string" + }, + { + "name": "-ms-flex", + "desc": "specifies the parameters of a flexible length: the positive and negative flexibility, and the preferred size.", + "browsers": "IE10", + "restriction": "length, number, percentage", + "values": [ + { + "name": "auto", + "desc": "Retrieves the value of the main size property as the used 'flex-basis'." + }, + { + "name": "none", + "desc": "Expands to '0 0 auto'." + } + ] + }, + { + "name": "-ms-flex-align", + "desc": "Aligns flex items along the cross axis of the current line of the flex container.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "baseline", + "desc": "If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment." + }, + { + "name": "center", + "desc": "The flex item’s margin box is centered in the cross axis within the line." + }, + { + "name": "end", + "desc": "The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line." + }, + { + "name": "start", + "desc": "The cross-start margin edge of the flexbox item is placed flush with the cross-start edge of the line." + }, + { + "name": "stretch", + "desc": "If the cross size property of the flexbox item is anything other than 'auto', this value is identical to 'start'." + } + ] + }, + { + "name": "-ms-flex-direction", + "desc": "Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "column", + "desc": "The flex container’s main axis has the same orientation as the block axis of the current writing mode." + }, + { + "name": "column-reverse" + }, + { + "name": "row" + }, + { + "name": "row-reverse" + } + ] + }, + { + "name": "-ms-flex-flow", + "desc": "Specifies how flexbox items are placed in the flexbox.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "column", + "desc": "The flex container’s main axis has the same orientation as the block axis of the current writing mode." + }, + { + "name": "column-reverse" + }, + { + "name": "nowrap", + "desc": "The flex container is single-line." + }, + { + "name": "row" + }, + { + "name": "wrap", + "desc": "The flexbox is multi-line." + }, + { + "name": "wrap-reverse" + } + ] + }, + { + "name": "-ms-flex-item-align", + "desc": "Allows the default alignment along the cross axis to be overridden for individual flex items.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Computes to the value of 'align-items' on the element’s parent, or 'stretch' if the element has no parent. On absolutely positioned elements, it computes to itself." + }, + { + "name": "baseline", + "desc": "If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment." + }, + { + "name": "center", + "desc": "The flex item’s margin box is centered in the cross axis within the line." + }, + { + "name": "end", + "desc": "The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line." + }, + { + "name": "start", + "desc": "The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line." + }, + { + "name": "stretch", + "desc": "If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched." + } + ] + }, + { + "name": "-ms-flex-line-pack", + "desc": "Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how 'justify-content' aligns individual items within the main-axis.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "center", + "desc": "Lines are packed toward the center of the flex container." + }, + { + "name": "distribute", + "desc": "Lines are evenly distributed in the flex container, with half-size spaces on either end." + }, + { + "name": "end", + "desc": "Lines are packed toward the end of the flex container." + }, + { + "name": "justify", + "desc": "Lines are evenly distributed in the flex container." + }, + { + "name": "start", + "desc": "Lines are packed toward the start of the flex container." + }, + { + "name": "stretch", + "desc": "Lines stretch to take up the remaining space." + } + ] + }, + { + "name": "-ms-flex-order", + "desc": "Controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups.", + "browsers": "IE10", + "restriction": "integer" + }, + { + "name": "-ms-flex-pack", + "desc": "Aligns flex items along the main axis of the current line of the flex container.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "center", + "desc": "Flex items are packed toward the center of the line." + }, + { + "name": "distribute", + "desc": "Flex items are evenly distributed in the line, with half-size spaces on either end." + }, + { + "name": "end", + "desc": "Flex items are packed toward the end of the line." + }, + { + "name": "justify", + "desc": "Flex items are evenly distributed in the line." + }, + { + "name": "start", + "desc": "Flex items are packed toward the start of the line." + } + ] + }, + { + "name": "-ms-flex-wrap", + "desc": "Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "nowrap", + "desc": "The flex container is single-line." + }, + { + "name": "wrap", + "desc": "The flexbox is multi-line." + }, + { + "name": "wrap-reverse" + } + ] + }, + { + "name": "-ms-flow-from", + "desc": "Makes a block container a region and associates it with a named flow.", + "browsers": "E,IE10", + "restriction": "identifier", + "values": [ + { + "name": "none", + "desc": "The block container is not a CSS Region." + } + ] + }, + { + "name": "-ms-flow-into", + "desc": "Places an element or its contents into a named flow.", + "browsers": "E,IE10", + "restriction": "identifier", + "values": [ + { + "name": "none", + "desc": "The element is not moved to a named flow and normal CSS processing takes place." + } + ] + }, + { + "name": "-ms-grid-column", + "desc": "Used to place grid items and explicitly defined grid cells in the Grid.", + "browsers": "E,IE10", + "restriction": "integer, string, enum", + "values": [ + { + "name": "auto" + }, + { + "name": "end" + }, + { + "name": "start" + } + ] + }, + { + "name": "-ms-grid-column-align", + "desc": "Aligns the columns in a grid.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "center", + "desc": "Places the center of the Grid Item's margin box at the center of the Grid Item's column." + }, + { + "name": "end", + "desc": "Aligns the end edge of the Grid Item's margin box to the end edge of the Grid Item's column." + }, + { + "name": "start", + "desc": "Aligns the starting edge of the Grid Item's margin box to the starting edge of the Grid Item's column." + }, + { + "name": "stretch", + "desc": "Ensures that the Grid Item's margin box is equal to the size of the Grid Item's column." + } + ] + }, + { + "name": "-ms-grid-columns", + "desc": "Lays out the columns of the grid.", + "browsers": "E,IE10" + }, + { + "name": "-ms-grid-column-span", + "desc": "Specifies the number of columns to span.", + "browsers": "E,IE10", + "restriction": "integer" + }, + { + "name": "-ms-grid-layer", + "desc": "Grid-layer is similar in concept to z-index, but avoids overloading the meaning of the z-index property, which is applicable only to positioned elements.", + "browsers": "E,IE10", + "restriction": "integer" + }, + { + "name": "-ms-grid-row", + "desc": "grid-row is used to place grid items and explicitly defined grid cells in the Grid.", + "browsers": "E,IE10", + "restriction": "integer, string, enum", + "values": [ + { + "name": "auto" + }, + { + "name": "end" + }, + { + "name": "start" + } + ] + }, + { + "name": "-ms-grid-row-align", + "desc": "Aligns the rows in a grid.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "center", + "desc": "Places the center of the Grid Item's margin box at the center of the Grid Item's row." + }, + { + "name": "end", + "desc": "Aligns the end edge of the Grid Item's margin box to the end edge of the Grid Item's row." + }, + { + "name": "start", + "desc": "Aligns the starting edge of the Grid Item's margin box to the starting edge of the Grid Item's row." + }, + { + "name": "stretch", + "desc": "Ensures that the Grid Item's margin box is equal to the size of the Grid Item's row." + } + ] + }, + { + "name": "-ms-grid-rows", + "desc": "Lays out the columns of the grid.", + "browsers": "E,IE10" + }, + { + "name": "-ms-grid-row-span", + "desc": "Specifies the number of rows to span.", + "browsers": "E,IE10", + "restriction": "integer" + }, + { + "name": "-ms-high-contrast-adjust", + "desc": "Specifies if properties should be adjusted in high contrast mode.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Properties will be adjusted as applicable." + }, + { + "name": "none", + "desc": "No adjustments will be applied." + } + ] + }, + { + "name": "-ms-hyphenate-limit-chars", + "desc": "Specifies the minimum number of characters in a hyphenated word.", + "browsers": "E,IE10", + "restriction": "integer", + "values": [ + { + "name": "auto", + "desc": "The user agent chooses a value that adapts to the current layout." + } + ] + }, + { + "name": "-ms-hyphenate-limit-lines", + "desc": "Indicates the maximum number of successive hyphenated lines in an element.", + "browsers": "E,IE10", + "restriction": "integer", + "values": [ + { + "name": "no-limit" + } + ] + }, + { + "name": "-ms-hyphenate-limit-zone", + "desc": "Specifies the maximum amount of unfilled space (before justification) that may be left in the line box before hyphenation is triggered to pull part of a word from the next line back up into the current line.", + "browsers": "E,IE10", + "restriction": "percentage, length" + }, + { + "name": "-ms-hyphens", + "desc": "Controls whether hyphenation is allowed to create more break opportunities within a line of text.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word." + }, + { + "name": "manual" + }, + { + "name": "none", + "desc": "Words are not broken at line breaks, even if characters inside the word suggest line break points." + } + ] + }, + { + "name": "-ms-ime-mode", + "desc": "Controls the state of the input method editor for text fields.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "active" + }, + { + "name": "auto", + "desc": "No change is made to the current input method editor state. This is the default." + }, + { + "name": "disabled" + }, + { + "name": "inactive" + }, + { + "name": "normal", + "desc": "The IME state should be normal; this value can be used in a user style sheet to override the page setting." + } + ] + }, + { + "name": "-ms-interpolation-mode", + "desc": "Gets or sets the interpolation (resampling) method used to stretch images.", + "browsers": "IE7", + "restriction": "enum", + "values": [ + { + "name": "bicubic" + }, + { + "name": "nearest-neighbor" + } + ] + }, + { + "name": "-ms-layout-grid", + "desc": "Sets or retrieves the composite document grid properties that specify the layout of text characters.", + "browsers": "E,IE10", + "values": [ + { + "name": "char", + "desc": "Any of the range of character values available to the -ms-layout-grid-char property." + }, + { + "name": "line", + "desc": "Any of the range of line values available to the -ms-layout-grid-line property." + }, + { + "name": "mode" + }, + { + "name": "type" + } + ] + }, + { + "name": "-ms-layout-grid-char", + "desc": "Sets or retrieves the size of the character grid used for rendering the text content of an element.", + "browsers": "E,IE10", + "restriction": "enum, length, percentage", + "values": [ + { + "name": "auto", + "desc": "Largest character in the font of the element is used to set the character grid." + }, + { + "name": "none", + "desc": "Default. No character grid is set." + } + ] + }, + { + "name": "-ms-layout-grid-line", + "desc": "Sets or retrieves the gridline value used for rendering the text content of an element.", + "browsers": "E,IE10", + "restriction": "length", + "values": [ + { + "name": "auto", + "desc": "Largest character in the font of the element is used to set the character grid." + }, + { + "name": "none", + "desc": "Default. No grid line is set." + } + ] + }, + { + "name": "-ms-layout-grid-mode", + "desc": "Gets or sets whether the text layout grid uses two dimensions.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "both", + "desc": "Default. Both the char and line grid modes are enabled. This setting is necessary to fully enable the layout grid on an element." + }, + { + "name": "char", + "desc": "Only a character grid is used. This is recommended for use with block-level elements, such as a blockquote, where the line grid is intended to be disabled." + }, + { + "name": "line", + "desc": "Only a line grid is used. This is recommended for use with inline elements, such as a span, to disable the horizontal grid on runs of text that act as a single entity in the grid layout." + }, + { + "name": "none", + "desc": "No grid is used." + } + ] + }, + { + "name": "-ms-layout-grid-type", + "desc": "Sets or retrieves the type of grid used for rendering the text content of an element.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "fixed", + "desc": "Grid used for monospaced layout. All noncursive characters are treated as equal; every character is centered within a single grid space by default." + }, + { + "name": "loose" + }, + { + "name": "strict", + "desc": "Grid used for Chinese, as well as Japanese (Genko) and Korean characters. Only the ideographs, kanas, and wide characters are snapped to the grid." + } + ] + }, + { + "name": "-ms-line-break", + "desc": "Specifies what set of line breaking restrictions are in effect within the element.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The UA determines the set of line-breaking restrictions to use for CJK scripts, and it may vary the restrictions based on the length of the line; e.g., use a less restrictive set of line-break rules for short lines." + }, + { + "name": "keep-all", + "desc": "Sequences of CJK characters can no longer break on implied break points. This option should only be used where the presence of word separator characters still creates line-breaking opportunities, as in Korean." + }, + { + "name": "newspaper", + "desc": "Breaks CJK scripts using the least restrictive set of line-breaking rules. Typically used for short lines, such as in newspapers." + }, + { + "name": "normal", + "desc": "Breaks CJK scripts using a normal set of line-breaking rules." + }, + { + "name": "strict", + "desc": "Breaks CJK scripts using a more restrictive set of line-breaking rules than 'normal'." + } + ] + }, + { + "name": "-ms-overflow-style", + "desc": "Specify whether content is clipped when it overflows the element's content area.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "No preference, UA should use the first scrolling method in the list that it supports." + }, + { + "name": "-ms-autohiding-scrollbar" + }, + { + "name": "none", + "desc": "Indicates the element does not display scrollbars or panning indicators, even when its content overflows." + }, + { + "name": "scrollbar" + } + ] + }, + { + "name": "-ms-perspective", + "desc": "Applies the same transform as the perspective() transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.", + "browsers": "IE10", + "restriction": "length", + "values": [ + { + "name": "none", + "desc": "No perspective transform is applied." + } + ] + }, + { + "name": "-ms-perspective-origin", + "desc": "Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.", + "browsers": "IE10", + "restriction": "position, percentage, length" + }, + { + "name": "-ms-perspective-origin-x", + "desc": "Establishes the origin for the perspective property. It effectively sets the X position at which the viewer appears to be looking at the children of the element.", + "browsers": "IE10", + "restriction": "position, percentage, length" + }, + { + "name": "-ms-perspective-origin-y", + "desc": "Establishes the origin for the perspective property. It effectively sets the Y position at which the viewer appears to be looking at the children of the element.", + "browsers": "IE10", + "restriction": "position, percentage, length" + }, + { + "name": "-ms-progress-appearance", + "desc": "Gets or sets a value that specifies whether a progress control displays as a bar or a ring.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "bar" + }, + { + "name": "ring" + } + ] + }, + { + "name": "-ms-scrollbar-3dlight-color", + "desc": "Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.", + "browsers": "IE8", + "restriction": "color" + }, + { + "name": "-ms-scrollbar-arrow-color", + "desc": "Determines the color of the arrow elements of a scroll arrow.", + "browsers": "IE8", + "restriction": "color" + }, + { + "name": "-ms-scrollbar-base-color", + "desc": "Determines the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.", + "browsers": "IE8", + "restriction": "color" + }, + { + "name": "-ms-scrollbar-darkshadow-color", + "desc": "Determines the color of the gutter of a scroll bar.", + "browsers": "IE8", + "restriction": "color" + }, + { + "name": "-ms-scrollbar-face-color", + "desc": "Determines the color of the scroll box and scroll arrows of a scroll bar.", + "browsers": "IE8", + "restriction": "color" + }, + { + "name": "-ms-scrollbar-highlight-color", + "desc": "Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.", + "browsers": "IE8", + "restriction": "color" + }, + { + "name": "-ms-scrollbar-shadow-color", + "desc": "Determines the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.", + "browsers": "IE8", + "restriction": "color" + }, + { + "name": "-ms-scrollbar-track-color", + "desc": "Determines the color of the track element of a scroll bar.", + "browsers": "IE8", + "restriction": "color" + }, + { + "name": "-ms-scroll-chaining", + "desc": "Gets or sets a value that indicates the scrolling behavior that occurs when a user hits the content boundary during a manipulation.", + "browsers": "E,IE10", + "restriction": "enum, length", + "values": [ + { + "name": "chained" + }, + { + "name": "none" + } + ] + }, + { + "name": "-ms-scroll-limit", + "desc": "Gets or sets a shorthand value that sets values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-max, and -ms-scroll-limit-y-max properties.", + "browsers": "E,IE10", + "restriction": "length", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "-ms-scroll-limit-x-max", + "desc": "Gets or sets a value that specifies the maximum value for the scrollLeft property.", + "browsers": "E,IE10", + "restriction": "length", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "-ms-scroll-limit-x-min", + "desc": "Gets or sets a value that specifies the minimum value for the scrollLeft property.", + "browsers": "E,IE10", + "restriction": "length" + }, + { + "name": "-ms-scroll-limit-y-max", + "desc": "Gets or sets a value that specifies the maximum value for the scrollTop property.", + "browsers": "E,IE10", + "restriction": "length", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "-ms-scroll-limit-y-min", + "desc": "Gets or sets a value that specifies the minimum value for the scrollTop property.", + "browsers": "E,IE10", + "restriction": "length" + }, + { + "name": "-ms-scroll-rails", + "desc": "Gets or sets a value that indicates whether or not small motions perpendicular to the primary axis of motion will result in either changes to both the scrollTop and scrollLeft properties or a change to the primary axis (for instance, either the scrollTop or scrollLeft properties will change, but not both).", + "browsers": "E,IE10", + "restriction": "enum, length", + "values": [ + { + "name": "none" + }, + { + "name": "railed" + } + ] + }, + { + "name": "-ms-scroll-snap-points-x", + "desc": "Gets or sets a value that defines where snap-points will be located along the x-axis.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "snapInterval(100%, 100%)" + }, + { + "name": "snapList()" + } + ] + }, + { + "name": "-ms-scroll-snap-points-y", + "desc": "Gets or sets a value that defines where snap-points will be located along the y-axis.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "snapInterval(100%, 100%)" + }, + { + "name": "snapList()" + } + ] + }, + { + "name": "-ms-scroll-snap-type", + "desc": "Gets or sets a value that defines what type of snap-point should be used for the current element. There are two type of snap-points, with the primary difference being whether or not the user is guaranteed to always stop on a snap-point.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "none", + "desc": "The visual viewport of this scroll container must ignore snap points, if any, when scrolled." + }, + { + "name": "mandatory", + "desc": "The visual viewport of this scroll container is guaranteed to rest on a snap point when there are no active scrolling operations." + }, + { + "name": "proximity", + "desc": "The visual viewport of this scroll container may come to rest on a snap point at the termination of a scroll at the discretion of the UA given the parameters of the scroll." + } + ] + }, + { + "name": "-ms-scroll-snap-x", + "desc": "Gets or sets a shorthand value that sets values for the -ms-scroll-snap-type and -ms-scroll-snap-points-x properties.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "mandatory" + }, + { + "name": "none" + }, + { + "name": "proximity" + }, + { + "name": "snapInterval(100%, 100%)" + }, + { + "name": "snapList()" + } + ] + }, + { + "name": "-ms-scroll-snap-y", + "desc": "Gets or sets a shorthand value that sets values for the -ms-scroll-snap-type and -ms-scroll-snap-points-y properties.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "mandatory" + }, + { + "name": "none" + }, + { + "name": "proximity" + }, + { + "name": "snapInterval(100%, 100%)" + }, + { + "name": "snapList()" + } + ] + }, + { + "name": "-ms-scroll-translation", + "desc": "Gets or sets a value that specifies whether vertical-to-horizontal scroll wheel translation occurs on the specified element.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "none" + }, + { + "name": "vertical-to-horizontal" + } + ] + }, + { + "name": "-ms-text-align-last", + "desc": "Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'.", + "browsers": "E,IE8", + "restriction": "enum", + "values": [ + { + "name": "auto" + }, + { + "name": "center", + "desc": "The inline contents are centered within the line box." + }, + { + "name": "justify", + "desc": "The text is justified according to the method specified by the 'text-justify' property." + }, + { + "name": "left", + "desc": "The inline contents are aligned to the left edge of the line box. In vertical text, 'left' aligns to the edge of the line box that would be the start edge for left-to-right text." + }, + { + "name": "right", + "desc": "The inline contents are aligned to the right edge of the line box. In vertical text, 'right' aligns to the edge of the line box that would be the end edge for left-to-right text." + } + ] + }, + { + "name": "-ms-text-autospace", + "desc": "Determines whether or not a full-width punctuation mark character should be trimmed if it appears at the beginning of a line, so that its 'ink' lines up with the first glyph in the line above and below.", + "browsers": "E,IE8", + "restriction": "enum", + "values": [ + { + "name": "ideograph-alpha" + }, + { + "name": "ideograph-numeric" + }, + { + "name": "ideograph-parenthesis" + }, + { + "name": "ideograph-space" + }, + { + "name": "none", + "desc": "No extra space is created." + }, + { + "name": "punctuation" + } + ] + }, + { + "name": "-ms-text-combine-horizontal", + "desc": "This property specifies the combination of multiple characters into the space of a single character.", + "browsers": "E,IE11", + "restriction": "enum, integer", + "values": [ + { + "name": "all", + "desc": "Attempt to typeset horizontally all consecutive characters within the box such that they take up the space of a single character within the vertical line box." + }, + { + "name": "digits" + }, + { + "name": "none", + "desc": "No special processing." + } + ] + }, + { + "name": "-ms-text-justify", + "desc": "Selects the justification algorithm used when 'text-align' is set to 'justify'. The property applies to block containers, but the UA may (but is not required to) also support it on inline elements.", + "browsers": "E,IE8", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The UA determines the justification algorithm to follow, based on a balance between performance and adequate presentation quality." + }, + { + "name": "distribute", + "desc": "Justification primarily changes spacing both at word separators and at grapheme cluster boundaries in all scripts except those in the connected and cursive groups. This value is sometimes used in e.g. Japanese, often with the 'text-align-last' property." + }, + { + "name": "inter-cluster" + }, + { + "name": "inter-ideograph" + }, + { + "name": "inter-word" + }, + { + "name": "kashida" + } + ] + }, + { + "name": "-ms-text-kashida-space", + "desc": "Sets or retrieves the ratio of kashida expansion to white space expansion when justifying lines of text in the object.", + "browsers": "E,IE10", + "restriction": "percentage" + }, + { + "name": "-ms-text-overflow", + "desc": "Text can overflow for example when it is prevented from wrapping", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "clip" + }, + { + "name": "ellipsis" + } + ] + }, + { + "name": "-ms-text-size-adjust", + "desc": "Specifies a size adjustment for displaying text content in mobile browsers.", + "browsers": "E,IE10", + "restriction": "enum, percentage", + "values": [ + { + "name": "auto", + "desc": "Renderers must use the default size adjustment when displaying on a small device." + }, + { + "name": "none", + "desc": "Renderers must not do size adjustment when displaying on a small device." + } + ] + }, + { + "name": "-ms-text-underline-position", + "desc": "Sets the position of an underline specified on the same element: it does not affect underlines specified by ancestor elements.This property is typically used in vertical writing contexts such as in Japanese documents where it often desired to have the underline appear 'over' (to the right of) the affected run of text", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "alphabetic", + "desc": "The underline is aligned with the alphabetic baseline. In this case the underline is likely to cross some descenders." + }, + { + "name": "auto", + "desc": "The user agent may use any algorithm to determine the underline's position. In horizontal line layout, the underline should be aligned as for alphabetic. In vertical line layout, if the language is set to Japanese or Korean, the underline should be aligned as for over." + }, + { + "name": "over" + }, + { + "name": "under" + } + ] + }, + { + "name": "-ms-touch-action", + "desc": "Gets or sets a value that indicates whether and how a given region can be manipulated by the user.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The element is a passive element, with several exceptions." + }, + { + "name": "double-tap-zoom", + "desc": "The element will zoom on double-tap." + }, + { + "name": "manipulation", + "desc": "The element is a manipulation-causing element." + }, + { + "name": "none", + "desc": "The element is a manipulation-blocking element." + }, + { + "name": "pan-x", + "desc": "The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content." + }, + { + "name": "pan-y", + "desc": "The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content." + }, + { + "name": "pinch-zoom", + "desc": "The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content." + } + ] + }, + { + "name": "-ms-touch-select", + "desc": "Gets or sets a value that toggles the 'gripper' visual elements that enable touch text selection.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "grippers" + }, + { + "name": "none", + "desc": "Grippers are always off." + } + ] + }, + { + "name": "-ms-transform", + "desc": "A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.", + "browsers": "IE9-9", + "restriction": "enum", + "values": [ + { + "name": "matrix()" + }, + { + "name": "matrix3d()" + }, + { + "name": "none" + }, + { + "name": "rotate()" + }, + { + "name": "rotate3d()" + }, + { + "name": "rotateX('angle')" + }, + { + "name": "rotateY('angle')" + }, + { + "name": "rotateZ('angle')" + }, + { + "name": "scale()" + }, + { + "name": "scale3d()" + }, + { + "name": "scaleX()" + }, + { + "name": "scaleY()" + }, + { + "name": "scaleZ()" + }, + { + "name": "skew()" + }, + { + "name": "skewX()" + }, + { + "name": "skewY()" + }, + { + "name": "translate()" + }, + { + "name": "translate3d()" + }, + { + "name": "translateX()" + }, + { + "name": "translateY()" + }, + { + "name": "translateZ()" + } + ] + }, + { + "name": "-ms-transform-origin", + "desc": "Establishes the origin of transformation for an element.", + "browsers": "IE9-9", + "restriction": "position, length, percentage" + }, + { + "name": "-ms-transform-origin-x", + "desc": "The x coordinate of the origin for transforms applied to an element with respect to its border box.", + "browsers": "IE10", + "restriction": "length, percentage" + }, + { + "name": "-ms-transform-origin-y", + "desc": "The y coordinate of the origin for transforms applied to an element with respect to its border box.", + "browsers": "IE10", + "restriction": "length, percentage" + }, + { + "name": "-ms-transform-origin-z", + "desc": "The z coordinate of the origin for transforms applied to an element with respect to its border box.", + "browsers": "IE10", + "restriction": "length, percentage" + }, + { + "name": "-ms-user-select", + "desc": "Controls the appearance of selection.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "element" + }, + { + "name": "none" + }, + { + "name": "text" + } + ] + }, + { + "name": "-ms-word-break", + "desc": "Specifies line break opportunities for non-CJK scripts.", + "browsers": "IE8", + "restriction": "enum", + "values": [ + { + "name": "break-all" + }, + { + "name": "keep-all", + "desc": "Block characters can no longer create implied break points." + }, + { + "name": "normal", + "desc": "Breaks non-CJK scripts according to their own rules." + } + ] + }, + { + "name": "-ms-word-wrap", + "desc": "Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit.", + "browsers": "IE8", + "restriction": "enum", + "values": [ + { + "name": "break-word", + "desc": "An unbreakable 'word' may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line." + }, + { + "name": "normal", + "desc": "Lines may break only at allowed break points." + } + ] + }, + { + "name": "-ms-wrap-flow", + "desc": "An element becomes an exclusion when its 'wrap-flow' property has a computed value other than 'auto'.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "For floats an exclusion is created, for all other elements an exclusion is not created." + }, + { + "name": "both", + "desc": "Inline flow content can flow on all sides of the exclusion." + }, + { + "name": "clear" + }, + { + "name": "end", + "desc": "Inline flow content can wrap on the end side of the exclusion area but must leave the area to the start edge of the exclusion area empty." + }, + { + "name": "maximum" + }, + { + "name": "minimum" + }, + { + "name": "start", + "desc": "Inline flow content can wrap on the start edge of the exclusion area but must leave the area to end edge of the exclusion area empty." + } + ] + }, + { + "name": "-ms-wrap-margin", + "desc": "Gets or sets a value that is used to offset the inner wrap shape from other shapes.", + "browsers": "E,IE10", + "restriction": "length, percentage" + }, + { + "name": "-ms-wrap-through", + "desc": "Specifies if an element inherits its parent wrapping context. In other words if it is subject to the exclusions defined outside the element.", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "none", + "desc": "The exclusion element does not inherit its parent node's wrapping context. Its descendants are only subject to exclusion shapes defined inside the element." + }, + { + "name": "wrap", + "desc": "The exclusion element inherits its parent node's wrapping context. Its descendant inline content wraps around exclusions defined outside the element." + } + ] + }, + { + "name": "-ms-writing-mode", + "desc": "Shorthand property for both 'direction' and 'block-progression'.", + "browsers": "IE8", + "restriction": "enum", + "values": [ + { + "name": "bt-lr" + }, + { + "name": "bt-rl" + }, + { + "name": "lr-bt" + }, + { + "name": "lr-tb" + }, + { + "name": "rl-bt" + }, + { + "name": "rl-tb" + }, + { + "name": "tb-lr" + }, + { + "name": "tb-rl" + } + ] + }, + { + "name": "-ms-zoom", + "desc": "Sets or retrieves the magnification scale of the object.", + "browsers": "IE8", + "restriction": "enum, integer, number, percentage", + "values": [ + { + "name": "normal" + } + ] + }, + { + "name": "-ms-zoom-animation", + "desc": "Gets or sets a value that indicates whether an animation is used when zooming.", + "browsers": "IE10", + "restriction": "enum", + "values": [ + { + "name": "default" + }, + { + "name": "none" + } + ] + }, + { + "name": "nav-down", + "desc": "Provides an way to control directional focus navigation.", + "browsers": "O9.5", + "restriction": "enum, identifier, string", + "values": [ + { + "name": "auto", + "desc": "The user agent automatically determines which element to navigate the focus to in response to directional navigational input." + }, + { + "name": "current" + }, + { + "name": "root" + } + ] + }, + { + "name": "nav-index", + "desc": "Provides an input-method-neutral way of specifying the sequential navigation order (also known as 'tabbing order').", + "browsers": "O9.5", + "restriction": "number", + "values": [ + { + "name": "auto", + "desc": "The element's sequential navigation order is assigned automatically by the user agent." + } + ] + }, + { + "name": "nav-left", + "desc": "Provides an way to control directional focus navigation.", + "browsers": "O9.5", + "restriction": "enum, identifier, string", + "values": [ + { + "name": "auto", + "desc": "The user agent automatically determines which element to navigate the focus to in response to directional navigational input." + }, + { + "name": "current" + }, + { + "name": "root" + } + ] + }, + { + "name": "nav-right", + "desc": "Provides an way to control directional focus navigation.", + "browsers": "O9.5", + "restriction": "enum, identifier, string", + "values": [ + { + "name": "auto", + "desc": "The user agent automatically determines which element to navigate the focus to in response to directional navigational input." + }, + { + "name": "current" + }, + { + "name": "root" + } + ] + }, + { + "name": "nav-up", + "desc": "Provides an way to control directional focus navigation.", + "browsers": "O9.5", + "restriction": "enum, identifier, string", + "values": [ + { + "name": "auto", + "desc": "The user agent automatically determines which element to navigate the focus to in response to directional navigational input." + }, + { + "name": "current" + }, + { + "name": "root" + } + ] + }, + { + "name": "negative", + "desc": "@counter-style descriptor. Defines how to alter the representation when the counter value is negative.", + "browsers": "FF33", + "restriction": "image, identifier, string" + }, + { + "name": "-o-animation", + "desc": "Shorthand property combines six of the animation properties into a single property.", + "browsers": "O12", + "restriction": "time, enum, timing-function, identifier, number", + "values": [ + { + "name": "alternate" + }, + { + "name": "alternate-reverse" + }, + { + "name": "backwards" + }, + { + "name": "both", + "desc": "Both forwards and backwards fill modes are applied." + }, + { + "name": "forwards" + }, + { + "name": "infinite", + "desc": "Causes the animation to repeat forever." + }, + { + "name": "none", + "desc": "No animation is performed" + }, + { + "name": "normal", + "desc": "Normal playback." + }, + { + "name": "reverse", + "desc": "All iterations of the animation are played in the reverse direction from the way they were specified." + } + ] + }, + { + "name": "-o-animation-delay", + "desc": "Defines when the animation will start.", + "browsers": "O12", + "restriction": "time" + }, + { + "name": "-o-animation-direction", + "desc": "Defines whether or not the animation should play in reverse on alternate cycles.", + "browsers": "O12", + "restriction": "enum", + "values": [ + { + "name": "alternate" + }, + { + "name": "alternate-reverse" + }, + { + "name": "normal", + "desc": "Normal playback." + }, + { + "name": "reverse", + "desc": "All iterations of the animation are played in the reverse direction from the way they were specified." + } + ] + }, + { + "name": "-o-animation-duration", + "desc": "Defines the length of time that an animation takes to complete one cycle.", + "browsers": "O12", + "restriction": "time" + }, + { + "name": "-o-animation-fill-mode", + "desc": "Defines what values are applied by the animation outside the time it is executing.", + "browsers": "O12", + "restriction": "enum", + "values": [ + { + "name": "backwards" + }, + { + "name": "both", + "desc": "Both forwards and backwards fill modes are applied." + }, + { + "name": "forwards" + }, + { + "name": "none", + "desc": "There is no change to the property value between the time the animation is applied and the time the animation begins playing or after the animation completes." + } + ] + }, + { + "name": "-o-animation-iteration-count", + "desc": "Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.", + "browsers": "O12", + "restriction": "number, enum", + "values": [ + { + "name": "infinite", + "desc": "Causes the animation to repeat forever." + } + ] + }, + { + "name": "-o-animation-name", + "desc": "Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation.", + "browsers": "O12", + "restriction": "identifier, enum", + "values": [ + { + "name": "none", + "desc": "No animation is performed" + } + ] + }, + { + "name": "-o-animation-play-state", + "desc": "Defines whether the animation is running or paused.", + "browsers": "O12", + "restriction": "enum", + "values": [ + { + "name": "paused" + }, + { + "name": "running" + } + ] + }, + { + "name": "-o-animation-timing-function", + "desc": "Describes how the animation will progress over one cycle of its duration. See the 'transition-timing-function'.", + "browsers": "O12", + "restriction": "timing-function" + }, + { + "name": "object-fit", + "desc": "Specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width.", + "browsers": "C32,FF36,O19,S7.1", + "restriction": "enum", + "values": [ + { + "name": "contain", + "desc": "The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element's used width and height." + }, + { + "name": "cover", + "desc": "The replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height." + }, + { + "name": "fill", + "desc": "The replaced content is sized to fill the element’s content box: the object's concrete object size is the element's used width and height." + }, + { + "name": "none", + "desc": "The replaced content is not resized to fit inside the element's content box" + }, + { + "name": "scale-down" + } + ] + }, + { + "name": "object-position", + "desc": "Determines the alignment of the replaced element inside its box.", + "browsers": "C32,FF36,O19", + "restriction": "position, length, percentage" + }, + { + "name": "-o-border-image", + "desc": "Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values.", + "browsers": "O11.6", + "restriction": "length, percentage, number, image, enum", + "values": [ + { + "name": "auto", + "desc": "If 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead." + }, + { + "name": "fill", + "desc": "Causes the middle part of the border-image to be preserved." + }, + { + "name": "none" + }, + { + "name": "repeat" + }, + { + "name": "round", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does." + }, + { + "name": "space", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles." + }, + { + "name": "stretch", + "desc": "The image is stretched to fill the area." + } + ] + }, + { + "name": "-o-object-fit", + "desc": "Specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width.", + "browsers": "O10.6", + "restriction": "enum", + "values": [ + { + "name": "contain", + "desc": "The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element's used width and height." + }, + { + "name": "cover", + "desc": "The replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height." + }, + { + "name": "fill", + "desc": "The replaced content is sized to fill the element’s content box: the object's concrete object size is the element's used width and height." + }, + { + "name": "none", + "desc": "The replaced content is not resized to fit inside the element's content box" + }, + { + "name": "scale-down" + } + ] + }, + { + "name": "-o-object-position", + "desc": "Determines the alignment of the replaced element inside its box.", + "browsers": "O10.6", + "restriction": "position, length, percentage" + }, + { + "name": "opacity", + "desc": "Opacity of an element's text, where 1 is opaque and 0 is entirely transparent.", + "browsers": "C,FF3.6,IE9,O9,S1.2", + "restriction": "number(0-1)" + }, + { + "name": "order", + "desc": "Controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups.", + "browsers": "E,C29,FF22,IE11,O12.1,S9", + "restriction": "integer" + }, + { + "name": "orphans", + "desc": "Specifies the minimum number of line boxes in a block container that must be left in a fragment before a fragmentation break.", + "browsers": "C,IE8,O7,S1.3", + "restriction": "integer" + }, + { + "name": "-o-table-baseline", + "desc": "Determines which row of a inline-table should be used as baseline of inline-table.", + "browsers": "O9.6", + "restriction": "integer" + }, + { + "name": "-o-tab-size", + "desc": "This property determines the width of the tab character (U+0009), in space characters (U+0020), when rendered.", + "browsers": "O10.6", + "restriction": "integer, length" + }, + { + "name": "-o-text-overflow", + "desc": "Text can overflow for example when it is prevented from wrapping", + "browsers": "O10", + "restriction": "enum", + "values": [ + { + "name": "clip" + }, + { + "name": "ellipsis" + } + ] + }, + { + "name": "-o-transform", + "desc": "A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.", + "browsers": "O10.5", + "restriction": "enum", + "values": [ + { + "name": "matrix()" + }, + { + "name": "matrix3d()" + }, + { + "name": "none" + }, + { + "name": "rotate()" + }, + { + "name": "rotate3d()" + }, + { + "name": "rotateX('angle')" + }, + { + "name": "rotateY('angle')" + }, + { + "name": "rotateZ('angle')" + }, + { + "name": "scale()" + }, + { + "name": "scale3d()" + }, + { + "name": "scaleX()" + }, + { + "name": "scaleY()" + }, + { + "name": "scaleZ()" + }, + { + "name": "skew()" + }, + { + "name": "skewX()" + }, + { + "name": "skewY()" + }, + { + "name": "translate()" + }, + { + "name": "translate3d()" + }, + { + "name": "translateX()" + }, + { + "name": "translateY()" + }, + { + "name": "translateZ()" + } + ] + }, + { + "name": "-o-transform-origin", + "desc": "Establishes the origin of transformation for an element.", + "browsers": "O10.5", + "restriction": "positon, length, percentage" + }, + { + "name": "-o-transition", + "desc": "Shorthand property combines four of the transition properties into a single property.", + "browsers": "O11.5", + "restriction": "time, property, timing-function, enum", + "values": [ + { + "name": "all", + "desc": "Every property that is able to undergo a transition will do so." + }, + { + "name": "none", + "desc": "No property will transition." + } + ] + }, + { + "name": "-o-transition-delay", + "desc": "Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied.", + "browsers": "O11.5", + "restriction": "time" + }, + { + "name": "-o-transition-duration", + "desc": "Specifies how long the transition from the old value to the new value should take.", + "browsers": "O11.5", + "restriction": "time" + }, + { + "name": "-o-transition-property", + "desc": "Specifies the name of the CSS property to which the transition is applied.", + "browsers": "O11.5", + "restriction": "property", + "values": [ + { + "name": "all", + "desc": "Every property that is able to undergo a transition will do so." + }, + { + "name": "none", + "desc": "No property will transition." + } + ] + }, + { + "name": "-o-transition-timing-function", + "desc": "Describes how the intermediate values used during a transition will be calculated.", + "browsers": "O11.5", + "restriction": "timing-function" + }, + { + "name": "offset-block-end", + "desc": "Logical 'bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well." + } + ] + }, + { + "name": "offset-block-start", + "desc": "Logical 'top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well." + } + ] + }, + { + "name": "offset-inline-end", + "desc": "Logical 'right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well." + } + ] + }, + { + "name": "offset-inline-start", + "desc": "Logical 'left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well." + } + ] + }, + { + "name": "outline", + "desc": "Shorthand property for 'outline-style', 'outline-width', and 'outline-color'.", + "browsers": "E,C,FF1.5,IE8,O8,S1.2", + "restriction": "length, line-width, line-style, color, enum", + "values": [ + { + "name": "auto", + "desc": "Permits the user agent to render a custom outline style, typically the default platform style." + }, + { + "name": "invert", + "browsers": "E,IE8,O" + } + ] + }, + { + "name": "outline-color", + "desc": "The color of the outline.", + "browsers": "E,C,FF1.5,IE8,O8,S1.2", + "restriction": "enum, color", + "values": [ + { + "name": "invert", + "browsers": "E,IE8,O" + } + ] + }, + { + "name": "outline-offset", + "desc": "Offset the outline and draw it beyond the border edge.", + "browsers": "C,FF1.5,O9.5,S1.2", + "restriction": "length" + }, + { + "name": "outline-style", + "desc": "Style of the outline.", + "browsers": "E,C,FF1.5,IE8,O8,S1.2", + "restriction": "line-style, enum", + "values": [ + { + "name": "auto", + "desc": "Permits the user agent to render a custom outline style, typically the default platform style." + } + ] + }, + { + "name": "outline-width", + "desc": "Width of the outline.", + "browsers": "E,C,FF1.5,IE8,O8,S1.2", + "restriction": "length, line-width" + }, + { + "name": "overflow", + "desc": "Shorthand for setting 'overflow-x' and 'overflow-y'.", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The behavior of the 'auto' value is UA-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes." + }, + { + "name": "hidden", + "desc": "Content is clipped and no scrolling mechanism should be provided to view the content outside the clipping region." + }, + { + "name": "-moz-hidden-unscrollable", + "browsers": "FF" + }, + { + "name": "scroll", + "desc": "Content is clipped and if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped." + }, + { + "name": "visible", + "desc": "Content is not clipped, i.e., it may be rendered outside the content box." + } + ] + }, + { + "name": "overflow-wrap", + "desc": "Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box.", + "browsers": "C23,O12.1,S6.1", + "restriction": "enum", + "values": [ + { + "name": "break-word", + "desc": "An otherwise unbreakable sequence of characters may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line." + }, + { + "name": "normal", + "desc": "Lines may break only at allowed break points." + } + ] + }, + { + "name": "overflow-x", + "desc": "Specifies the handling of overflow in the horizontal direction.", + "browsers": "E,C,FF1.5,IE5,O9.5,S3", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The behavior of the 'auto' value is UA-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes." + }, + { + "name": "hidden", + "desc": "Content is clipped and no scrolling mechanism should be provided to view the content outside the clipping region." + }, + { + "name": "scroll", + "desc": "Content is clipped and if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped." + }, + { + "name": "visible", + "desc": "Content is not clipped, i.e., it may be rendered outside the content box." + } + ] + }, + { + "name": "overflow-y", + "desc": "Specifies the handling of overflow in the vertical direction.", + "browsers": "E,C,FF1.5,IE5,O9.5,S3", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The behavior of the 'auto' value is UA-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes." + }, + { + "name": "hidden", + "desc": "Content is clipped and no scrolling mechanism should be provided to view the content outside the clipping region." + }, + { + "name": "scroll", + "desc": "Content is clipped and if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped." + }, + { + "name": "visible", + "desc": "Content is not clipped, i.e., it may be rendered outside the content box." + } + ] + }, + { + "name": "pad", + "desc": "@counter-style descriptor. Specifies a “fixed-width” counter style, where representations shorter than the pad value are padded with a particular ", + "browsers": "FF33", + "restriction": "integer, image, string, identifier" + }, + { + "name": "padding", + "desc": "Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage", + "values": [] + }, + { + "name": "padding-bottom", + "desc": "Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage" + }, + { + "name": "padding-block-end", + "desc": "Logical 'padding-bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage" + }, + { + "name": "padding-block-start", + "desc": "Logical 'padding-top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage" + }, + { + "name": "padding-inline-end", + "desc": "Logical 'padding-right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage" + }, + { + "name": "padding-inline-start", + "desc": "Logical 'padding-left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.", + "browsers": "FF41", + "restriction": "length, percentage" + }, + { + "name": "padding-left", + "desc": "Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage" + }, + { + "name": "padding-right", + "desc": "Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage" + }, + { + "name": "padding-top", + "desc": "Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.", + "restriction": "length, percentage" + }, + { + "name": "page-break-after", + "desc": "Defines rules for page breaks after an element.", + "restriction": "enum", + "values": [ + { + "name": "always", + "desc": "Always force a page break after the generated box." + }, + { + "name": "auto", + "desc": "Neither force nor forbid a page break after generated box." + }, + { + "name": "avoid", + "desc": "Avoid a page break after the generated box." + }, + { + "name": "left", + "desc": "Force one or two page breaks after the generated box so that the next page is formatted as a left page." + }, + { + "name": "right", + "desc": "Force one or two page breaks after the generated box so that the next page is formatted as a right page." + } + ] + }, + { + "name": "page-break-before", + "desc": "Defines rules for page breaks before an element.", + "restriction": "enum", + "values": [ + { + "name": "always", + "desc": "Always force a page break before the generated box." + }, + { + "name": "auto", + "desc": "Neither force nor forbid a page break before the generated box." + }, + { + "name": "avoid", + "desc": "Avoid a page break before the generated box." + }, + { + "name": "left", + "desc": "Force one or two page breaks before the generated box so that the next page is formatted as a left page." + }, + { + "name": "right", + "desc": "Force one or two page breaks before the generated box so that the next page is formatted as a right page." + } + ] + }, + { + "name": "page-break-inside", + "desc": "Defines rules for page breaks inside an element.", + "browsers": "C,IE8,O7,S1.3", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Neither force nor forbid a page break inside the generated box." + }, + { + "name": "avoid", + "desc": "Avoid a page break inside the generated box." + } + ] + }, + { + "name": "paint-order", + "desc": "Controls the order that the three paint operations that shapes and text are rendered with: their fill, their stroke and any markers they might have.", + "browsers": "C35,FF31,O22,S7.1", + "restriction": "enum", + "values": [ + { + "name": "fill" + }, + { + "name": "markers" + }, + { + "name": "normal", + "desc": "The element is painted with the standard order of painting operations: the 'fill' is painted first, then its 'stroke' and finally its markers." + }, + { + "name": "stroke" + } + ] + }, + { + "name": "perspective", + "desc": "Applies the same transform as the perspective() transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.", + "browsers": "E,C36,FF16,IE10,O23,S9", + "restriction": "length, enum", + "values": [ + { + "name": "none", + "desc": "No perspective transform is applied." + } + ] + }, + { + "name": "perspective-origin", + "desc": "Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.", + "browsers": "E,C36,FF16,IE10,O23,S9", + "restriction": "position, percentage, length" + }, + { + "name": "pointer-events", + "desc": "Specifies under what circumstances a given element can be the target element for a pointer event.", + "restriction": "enum", + "values": [ + { + "name": "all", + "desc": "The given element can be the target element for pointer events whenever the pointer is over either the interior or the perimeter of the element." + }, + { + "name": "fill", + "desc": "The given element can be the target element for pointer events whenever the pointer is over the interior of the element." + }, + { + "name": "none", + "desc": "The given element does not receive pointer events." + }, + { + "name": "painted" + }, + { + "name": "stroke", + "desc": "The given element can be the target element for pointer events whenever the pointer is over the perimeter of the element." + }, + { + "name": "visible", + "desc": "The given element can be the target element for pointer events when the ‘visibility’ property is set to visible and the pointer is over either the interior or the perimete of the element." + }, + { + "name": "visibleFill" + }, + { + "name": "visiblePainted" + }, + { + "name": "visibleStroke" + } + ] + }, + { + "name": "position", + "restriction": "enum", + "values": [ + { + "name": "absolute" + }, + { + "name": "fixed", + "desc": "The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins." + }, + { + "name": "-ms-page", + "browsers": "E,IE10" + }, + { + "name": "relative" + }, + { + "name": "static" + }, + { + "name": "sticky", + "browsers": "FF32" + }, + { + "name": "-webkit-sticky", + "browsers": "S6.1" + } + ] + }, + { + "name": "prefix", + "desc": "@counter-style descriptor. Specifies a that is prepended to the marker representation.", + "browsers": "FF33", + "restriction": "image, string, identifier" + }, + { + "name": "quotes", + "desc": "Specifies quotation marks for any number of embedded quotations.", + "browsers": "E,C,FF1.5,IE8,O8,S5.1", + "restriction": "string", + "values": [ + { + "name": "none", + "desc": "The 'open-quote' and 'close-quote' values of the 'content' property produce no quotations marks, as if they were 'no-open-quote' and 'no-close-quote' respectively." + } + ] + }, + { + "name": "range", + "desc": "@counter-style descriptor. Defines the ranges over which the counter style is defined.", + "browsers": "FF33", + "restriction": "integer, enum", + "values": [ + { + "name": "auto", + "desc": "The range depends on the counter system." + }, + { + "name": "infinite", + "desc": "If used as the first value in a range, it represents negative infinity; if used as the second value, it represents positive infinity." + } + ] + }, + { + "name": "resize", + "desc": "Specifies whether or not an element is resizable by the user, and if so, along which axis/axes.", + "browsers": "C,FF4,O15,S3", + "restriction": "enum", + "values": [ + { + "name": "both", + "desc": "The UA presents a bidirectional resizing mechanism to allow the user to adjust both the height and the width of the element." + }, + { + "name": "horizontal", + "desc": "The UA presents a unidirectional horizontal resizing mechanism to allow the user to adjust only the width of the element." + }, + { + "name": "none", + "desc": "The UA does not present a resizing mechanism on the element, and the user is given no direct manipulation mechanism to resize the element." + }, + { + "name": "vertical", + "desc": "The UA presents a unidirectional vertical resizing mechanism to allow the user to adjust only the height of the element." + } + ] + }, + { + "name": "right", + "desc": "Specifies how far an absolutely positioned box's right margin edge is offset to the left of the right edge of the box's 'containing block'.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well" + } + ] + }, + { + "name": "ruby-align", + "desc": "Specifies how text is distributed within the various ruby boxes when their contents do not exactly fill their respective boxes.", + "browsers": "FF10,IE5", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The user agent determines how the ruby contents are aligned. This is the initial value.", + "browsers": "E,IE5" + }, + { + "name": "center", + "desc": "The ruby content is centered within its box." + }, + { + "name": "distribute-letter", + "browsers": "E,IE5" + }, + { + "name": "distribute-space", + "browsers": "E,IE5" + }, + { + "name": "left", + "desc": "The ruby text content is aligned with the start edge of the base." + }, + { + "name": "line-edge", + "browsers": "E,IE5" + }, + { + "name": "right", + "desc": "The ruby text content is aligned with the end edge of the base.", + "browsers": "E,IE5" + }, + { + "name": "start", + "desc": "The ruby text content is aligned with the start edge of the base.", + "browsers": "FF10" + }, + { + "name": "space-between", + "desc": "The ruby content expands as defined for normal text justification (as defined by 'text-justify'),", + "browsers": "FF10" + }, + { + "name": "space-around", + "desc": "As for 'space-between' except that there exists an extra justification opportunities whose space is distributed half before and half after the ruby content.", + "browsers": "FF10" + } + ] + }, + { + "name": "ruby-overhang", + "desc": "Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base.", + "browsers": "FF10,IE5", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The ruby text can overhang text adjacent to the base on either side. This is the initial value." + }, + { + "name": "end", + "desc": "The ruby text can overhang the text that follows it." + }, + { + "name": "none", + "desc": "The ruby text cannot overhang any text adjacent to its base, only its own base." + }, + { + "name": "start", + "desc": "The ruby text can overhang the text that precedes it." + } + ] + }, + { + "name": "ruby-position", + "desc": "Used by the parent of elements with display: ruby-text to control the position of the ruby text with respect to its base.", + "browsers": "FF10,IE5", + "restriction": "enum", + "values": [ + { + "name": "after" + }, + { + "name": "before" + }, + { + "name": "inline" + }, + { + "name": "right", + "desc": "The ruby text appears on the right of the base. Unlike 'before' and 'after', this value is not relative to the text flow direction." + } + ] + }, + { + "name": "ruby-span", + "desc": "Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base.", + "browsers": "FF10", + "restriction": "enum", + "values": [ + { + "name": "attr(x)" + }, + { + "name": "none", + "desc": "No spanning. The computed value is '1'." + } + ] + }, + { + "name": "scrollbar-3dlight-color", + "desc": "Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.", + "browsers": "IE6", + "restriction": "color" + }, + { + "name": "scrollbar-arrow-color", + "desc": "Determines the color of the arrow elements of a scroll arrow.", + "browsers": "IE6", + "restriction": "color" + }, + { + "name": "scrollbar-base-color", + "desc": "Determines the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.", + "browsers": "IE6", + "restriction": "color" + }, + { + "name": "scrollbar-darkshadow-color", + "desc": "Determines the color of the gutter of a scroll bar.", + "browsers": "IE6", + "restriction": "color" + }, + { + "name": "scrollbar-face-color", + "desc": "Determines the color of the scroll box and scroll arrows of a scroll bar.", + "browsers": "IE6", + "restriction": "color" + }, + { + "name": "scrollbar-highlight-color", + "desc": "Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.", + "browsers": "IE6", + "restriction": "color" + }, + { + "name": "scrollbar-shadow-color", + "desc": "Determines the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.", + "browsers": "IE6", + "restriction": "color" + }, + { + "name": "scrollbar-track-color", + "desc": "Determines the color of the track element of a scroll bar.", + "browsers": "IE6", + "restriction": "color" + }, + { + "name": "scroll-behavior", + "desc": "Specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs.", + "browsers": "FF36", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Scrolls in an instant fashion." + }, + { + "name": "smooth" + } + ] + }, + { + "name": "scroll-snap-coordinate", + "desc": "Defines the x and y coordinate within the element which will align with the nearest ancestor scroll container’s snap-destination for the respective axis.", + "browsers": "FF39", + "restriction": "position, length, percentage, enum", + "values": [ + { + "name": "none", + "desc": "Specifies that this element does not contribute a snap point." + } + ] + }, + { + "name": "scroll-snap-destination", + "desc": "Define the x and y coordinate within the scroll container’s visual viewport which element snap points will align with.", + "browsers": "FF39", + "restriction": "position, length, percentage" + }, + { + "name": "scroll-snap-points-x", + "desc": "Defines the positioning of snap points along the x axis of the scroll container it is applied to.", + "browsers": "FF39", + "restriction": "enum", + "values": [ + { + "name": "none", + "desc": "No snap points are defined by this scroll container." + }, + { + "name": "repeat()" + } + ] + }, + { + "name": "scroll-snap-points-y", + "desc": "Defines the positioning of snap points alobg the y axis of the scroll container it is applied to.", + "browsers": "FF39", + "restriction": "enum", + "values": [ + { + "name": "none", + "desc": "No snap points are defined by this scroll container." + }, + { + "name": "repeat()" + } + ] + }, + { + "name": "scroll-snap-type", + "desc": "Defines how strictly snap points are enforced on the scroll container.", + "browsers": "FF39", + "restriction": "enum", + "values": [ + { + "name": "none", + "desc": "The visual viewport of this scroll container must ignore snap points, if any, when scrolled." + }, + { + "name": "mandatory", + "desc": "The visual viewport of this scroll container is guaranteed to rest on a snap point when there are no active scrolling operations." + }, + { + "name": "proximity", + "desc": "The visual viewport of this scroll container may come to rest on a snap point at the termination of a scroll at the discretion of the UA given the parameters of the scroll." + } + ] + }, + { + "name": "shape-image-threshold", + "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.", + "browsers": "C37,O24", + "restriction": "number" + }, + { + "name": "shape-margin", + "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.", + "browsers": "C37,O24", + "restriction": "url, length, percentage" + }, + { + "name": "shape-outside", + "desc": "Specifies an orthogonal rotation to be applied to an image before it is laid out.", + "browsers": "C37,O24", + "restriction": "image, box, shape, enum", + "values": [ + { + "name": "margin-box" + }, + { + "name": "none", + "desc": "The float area is unaffected." + } + ] + }, + { + "name": "size", + "browsers": "C,O8", + "restriction": "length" + }, + { + "name": "src", + "desc": "@font-face descriptor. Specifies the resource containing font data. It is required, whether the font is downloadable or locally installed.", + "restriction": "enum, url, identifier", + "values": [ + { + "name": "url()", + "desc": "Reference font by URL" + }, + { + "name": "format()" + }, + { + "name": "local()" + } + ] + }, + { + "name": "stop-color", + "desc": "Indicates what color to use at that gradient stop.", + "restriction": "color" + }, + { + "name": "stop-opacity", + "desc": "Defines the opacity of a given gradient stop.", + "restriction": "number(0-1)" + }, + { + "name": "stroke", + "desc": "Paints along the outline of the given graphical element.", + "restriction": "color, enum, url", + "values": [ + { + "name": "url()", + "desc": "A URL reference to a paint server element, which is an element that defines a paint server: ‘hatch’, ‘linearGradient’, ‘mesh’, ‘pattern’, ‘radialGradient’ and ‘solidcolor’." + } + ] + }, + { + "name": "stroke-dasharray", + "desc": "Controls the pattern of dashes and gaps used to stroke paths.", + "restriction": "length, percentage, number, enum", + "values": [ + { + "name": "none", + "desc": "Indicates that no dashing is used." + } + ] + }, + { + "name": "stroke-dashoffset", + "desc": "Specifies the distance into the dash pattern to start the dash.", + "restriction": "percentage, length" + }, + { + "name": "stroke-linecap", + "desc": "Specifies the shape to be used at the end of open subpaths when they are stroked.", + "restriction": "enum", + "values": [ + { + "name": "butt" + }, + { + "name": "round", + "desc": "Indicates that at each end of each subpath, the shape representing the stroke will be extended by a half circle with a radius equal to the stroke width." + }, + { + "name": "square", + "desc": "Indicates that at the end of each subpath, the shape representing the stroke will be extended by a rectangle with the same width as the stroke width and whose length is half of the stroke width." + } + ] + }, + { + "name": "stroke-linejoin", + "desc": "Specifies the shape to be used at the corners of paths or basic shapes when they are stroked.", + "restriction": "enum", + "values": [ + { + "name": "bevel" + }, + { + "name": "miter" + }, + { + "name": "round", + "desc": "Indicates that a round corner is to be used to join path segments." + } + ] + }, + { + "name": "stroke-miterlimit", + "desc": "When two line segments meet at a sharp angle and miter joins have been specified for 'stroke-linejoin', it is possible for the miter to extend far beyond the thickness of the line stroking the path.", + "restriction": "number" + }, + { + "name": "stroke-opacity", + "desc": "Specifies the opacity of the painting operation used to stroke the current object.", + "restriction": "number(0-1)" + }, + { + "name": "stroke-width", + "desc": "Specifies the width of the stroke on the current object.", + "restriction": "percentage, length" + }, + { + "name": "suffix", + "desc": "@counter-style descriptor. Specifies a that is appended to the marker representation.", + "browsers": "FF33", + "restriction": "image, string, identifier" + }, + { + "name": "system", + "desc": "@counter-style descriptor. Specifies which algorithm will be used to construct the counter’s representation based on the counter value.", + "browsers": "FF33", + "restriction": "enum, integer", + "values": [ + { + "name": "additive" + }, + { + "name": "alphabetic", + "desc": "Interprets the list of counter symbols as digits to an alphabetic numbering system, similar to the default lower-alpha counter style, which wraps from \"a\", \"b\", \"c\", to \"aa\", \"ab\", \"ac\"." + }, + { + "name": "cyclic" + }, + { + "name": "extends" + }, + { + "name": "fixed", + "desc": "Runs through its list of counter symbols once, then falls back." + }, + { + "name": "numeric" + }, + { + "name": "symbolic" + } + ] + }, + { + "name": "symbols", + "desc": "@counter-style descriptor. Specifies the symbols used by the marker-construction algorithm specified by the system descriptor.", + "browsers": "FF33", + "restriction": "image, string, identifier" + }, + { + "name": "table-layout", + "desc": "Controls the algorithm used to lay out the table cells, rows, and columns.", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Use any automatic table layout algorithm." + }, + { + "name": "fixed", + "desc": "Use the fixed table layout algorithm." + } + ] + }, + { + "name": "tab-size", + "desc": "Determines the width of the tab character (U+0009), in space characters (U+0020), when rendered.", + "browsers": "C21,O15,S6.1", + "restriction": "integer, length" + }, + { + "name": "text-align", + "desc": "Describes how inline contents of a block are horizontally aligned if the contents do not completely fill the line box.", + "restriction": "string", + "values": [ + { + "name": "center", + "desc": "The inline contents are centered within the line box." + }, + { + "name": "end", + "desc": "The inline contents are aligned to the end edge of the line box.", + "browsers": "C,FF3.6,O15,S3.1" + }, + { + "name": "justify", + "desc": "The text is justified according to the method specified by the 'text-justify' property." + }, + { + "name": "left", + "desc": "The inline contents are aligned to the left edge of the line box. In vertical text, 'left' aligns to the edge of the line box that would be the start edge for left-to-right text." + }, + { + "name": "right", + "desc": "The inline contents are aligned to the right edge of the line box. In vertical text, 'right' aligns to the edge of the line box that would be the end edge for left-to-right text." + }, + { + "name": "start", + "desc": "The inline contents are aligned to the start edge of the line box.", + "browsers": "C,FF1,O15,S3.1" + } + ] + }, + { + "name": "text-align-last", + "desc": "Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'.", + "browsers": "E,FF12,IE5", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Content on the affected line is aligned per 'text-align' unless 'text-align' is set to 'justify', in which case it is 'start-aligned'." + }, + { + "name": "center", + "desc": "The inline contents are centered within the line box." + }, + { + "name": "justify", + "desc": "The text is justified according to the method specified by the 'text-justify' property." + }, + { + "name": "left", + "desc": "The inline contents are aligned to the left edge of the line box. In vertical text, 'left' aligns to the edge of the line box that would be the start edge for left-to-right text." + }, + { + "name": "right", + "desc": "The inline contents are aligned to the right edge of the line box. In vertical text, 'right' aligns to the edge of the line box that would be the end edge for left-to-right text." + } + ] + }, + { + "name": "text-anchor", + "desc": "Used to align (start-, middle- or end-alignment) a string of text relative to a given point.", + "restriction": "enum", + "values": [ + { + "name": "end", + "desc": "The rendered characters are aligned such that the end of the resulting rendered text is at the initial current text position." + }, + { + "name": "middle", + "desc": "The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position." + }, + { + "name": "start", + "desc": "The rendered characters are aligned such that the start of the resulting rendered text is at the initial current text position." + } + ] + }, + { + "name": "text-decoration", + "desc": "Decorations applied to font used for an element's text.", + "restriction": "enum, color", + "values": [ + { + "name": "dashed" + }, + { + "name": "dotted" + }, + { + "name": "double" + }, + { + "name": "line-through" + }, + { + "name": "overline" + }, + { + "name": "solid" + }, + { + "name": "underline" + }, + { + "name": "wavy" + } + ] + }, + { + "name": "text-decoration-line", + "desc": "Specifies what line decorations, if any, are added to the element.", + "browsers": "FF36", + "restriction": "enum", + "values": [ + { + "name": "line-through" + }, + { + "name": "none", + "desc": "Neither produces nor inhibits text decoration." + }, + { + "name": "overline" + }, + { + "name": "underline" + } + ] + }, + { + "name": "text-decoration-style", + "desc": "Specifies the line style for underline, line-through and overline text decoration.", + "browsers": "FF36", + "restriction": "enum", + "values": [ + { + "name": "dashed" + }, + { + "name": "dotted" + }, + { + "name": "double" + }, + { + "name": "none", + "desc": "Produces no line." + }, + { + "name": "solid" + }, + { + "name": "wavy" + } + ] + }, + { + "name": "text-indent", + "desc": "Specifies the indentation applied to lines of inline content in a block. The indentation only affects the first line of inline content in the block unless the 'hanging' keyword is specified, in which case it affects all lines except the first.", + "restriction": "percentage, length", + "values": [] + }, + { + "name": "text-justify", + "desc": "Selects the justification algorithm used when 'text-align' is set to 'justify'. The property applies to block containers, but the UA may (but is not required to) also support it on inline elements.", + "browsers": "E,IE5.5", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The UA determines the justification algorithm to follow, based on a balance between performance and adequate presentation quality." + }, + { + "name": "distribute", + "desc": "Justification primarily changes spacing both at word separators and at grapheme cluster boundaries in all scripts except those in the connected and cursive groups. This value is sometimes used in e.g. Japanese, often with the 'text-align-last' property." + }, + { + "name": "distribute-all-lines" + }, + { + "name": "inter-cluster" + }, + { + "name": "inter-ideograph" + }, + { + "name": "inter-word" + }, + { + "name": "kashida" + }, + { + "name": "newspaper" + } + ] + }, + { + "name": "text-orientation", + "desc": "Specifies the orientation of text within a line.", + "browsers": "C,O15,S5.1", + "restriction": "enum", + "values": [ + { + "name": "sideways", + "browsers": "C25,O15,S6.1" + }, + { + "name": "sideways-right", + "browsers": "C25,O15,S6.1" + }, + { + "name": "upright" + } + ] + }, + { + "name": "text-overflow", + "desc": "Text can overflow for example when it is prevented from wrapping.", + "browsers": "E,C,FF9,IE5.5,O11.6,S2", + "restriction": "enum, string", + "values": [ + { + "name": "clip" + }, + { + "name": "ellipsis" + } + ] + }, + { + "name": "text-rendering", + "desc": "The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders text. The ‘text-rendering’ property provides these hints.", + "browsers": "C,FF3,O9,S5", + "restriction": "enum", + "values": [ + { + "name": "auto" + }, + { + "name": "geometricPrecision" + }, + { + "name": "optimizeLegibility" + }, + { + "name": "optimizeSpeed", + "desc": "Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision." + } + ] + }, + { + "name": "text-shadow", + "desc": "Enables shadow effects to be applied to the text of the element.", + "browsers": "E,C,FF3.6,IE10,O9.5,S1.1", + "restriction": "length, color", + "values": [] + }, + { + "name": "text-transform", + "desc": "Controls capitalization effects of an element’s text.", + "restriction": "enum", + "values": [ + { + "name": "capitalize" + }, + { + "name": "lowercase" + }, + { + "name": "none", + "desc": "No effects." + }, + { + "name": "uppercase" + } + ] + }, + { + "name": "text-underline-position", + "desc": "Sets the position of an underline specified on the same element: it does not affect underlines specified by ancestor elements. This property is typically used in vertical writing contexts such as in Japanese documents where it often desired to have the underline appear 'over' (to the right of) the affected run of text", + "browsers": "E,IE10", + "restriction": "enum", + "values": [ + { + "name": "above" + }, + { + "name": "auto", + "desc": "The user agent may use any algorithm to determine the underline’s position. In horizontal line layout, the underline should be aligned as for alphabetic. In vertical line layout, if the language is set to Japanese or Korean, the underline should be aligned as for over." + }, + { + "name": "below", + "desc": "The underline is aligned with the under edge of the element’s content box." + } + ] + }, + { + "name": "top", + "desc": "Specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's 'containing block'.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well" + } + ] + }, + { + "name": "touch-action", + "desc": "Determines whether touch input may trigger default behavior supplied by user agent.", + "browsers": "E,C36,IE11,O23", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "The user agent may determine any permitted touch behaviors for touches that begin on the element." + }, + { + "name": "cross-slide-x", + "browsers": "E,IE11" + }, + { + "name": "cross-slide-y", + "browsers": "E,IE11" + }, + { + "name": "double-tap-zoom", + "browsers": "E,IE11" + }, + { + "name": "manipulation", + "desc": "The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming." + }, + { + "name": "none", + "desc": "Touches that begin on the element must not trigger default touch behaviors." + }, + { + "name": "pan-x", + "desc": "The user agent may consider touches that begin on the element only for the purposes of horizontally scrolling the element’s nearest ancestor with horizontally scrollable content." + }, + { + "name": "pan-y", + "desc": "The user agent may consider touches that begin on the element only for the purposes of vertically scrolling the element’s nearest ancestor with vertically scrollable content." + }, + { + "name": "pinch-zoom", + "browsers": "E,IE11" + } + ] + }, + { + "name": "transform", + "desc": "A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.", + "browsers": "E,C36,FF16,IE10,O12.1,S9", + "restriction": "enum", + "values": [ + { + "name": "matrix()" + }, + { + "name": "matrix3d()" + }, + { + "name": "none" + }, + { + "name": "perspective()" + }, + { + "name": "rotate()" + }, + { + "name": "rotate3d()" + }, + { + "name": "rotateX('angle')" + }, + { + "name": "rotateY('angle')" + }, + { + "name": "rotateZ('angle')" + }, + { + "name": "scale()" + }, + { + "name": "scale3d()" + }, + { + "name": "scaleX()" + }, + { + "name": "scaleY()" + }, + { + "name": "scaleZ()" + }, + { + "name": "skew()" + }, + { + "name": "skewX()" + }, + { + "name": "skewY()" + }, + { + "name": "translate()" + }, + { + "name": "translate3d()" + }, + { + "name": "translateX()" + }, + { + "name": "translateY()" + }, + { + "name": "translateZ()" + } + ] + }, + { + "name": "transform-origin", + "desc": "Establishes the origin of transformation for an element.", + "browsers": "E,C36,FF16,IE10,O12.1,S9", + "restriction": "position, length, percentage" + }, + { + "name": "transform-style", + "desc": "Defines how nested elements are rendered in 3D space.", + "browsers": "E,C36,FF16,IE10,O23,S9", + "restriction": "enum", + "values": [ + { + "name": "flat" + }, + { + "name": "preserve-3d", + "browsers": "E,C36,FF16,O23,S9" + } + ] + }, + { + "name": "transition", + "desc": "Shorthand property combines four of the transition properties into a single property.", + "browsers": "E,FF16,IE10,O12.5", + "restriction": "time, property, timing-function, enum", + "values": [ + { + "name": "all", + "desc": "Every property that is able to undergo a transition will do so." + }, + { + "name": "none", + "desc": "No property will transition." + } + ] + }, + { + "name": "transition-delay", + "desc": "Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied.", + "browsers": "E,FF16,IE10,O12.5", + "restriction": "time" + }, + { + "name": "transition-duration", + "desc": "Specifies how long the transition from the old value to the new value should take.", + "browsers": "E,FF16,IE10,O12.5", + "restriction": "time" + }, + { + "name": "transition-property", + "desc": "Specifies the name of the CSS property to which the transition is applied.", + "browsers": "E,FF16,IE10,O12.5", + "restriction": "property", + "values": [ + { + "name": "all", + "desc": "Every property that is able to undergo a transition will do so." + }, + { + "name": "none", + "desc": "No property will transition." + } + ] + }, + { + "name": "transition-timing-function", + "desc": "Describes how the intermediate values used during a transition will be calculated.", + "browsers": "E,FF16,IE10,O12.5", + "restriction": "timing-function" + }, + { + "name": "unicode-bidi", + "desc": "The level of embedding with respect to the bidirectional algorithm.", + "restriction": "enum", + "values": [ + { + "name": "bidi-override" + }, + { + "name": "embed" + }, + { + "name": "isolate", + "desc": "The contents of the element are considered to be inside a separate, independent paragraph.", + "browsers": "C,FF10,O15,S5.1" + }, + { + "name": "isolate-override", + "browsers": "C,FF17,O15,S6.1" + }, + { + "name": "normal", + "desc": "The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline-level elements, implicit reordering works across element boundaries." + }, + { + "name": "plaintext", + "browsers": "C,FF10,O15,S6" + } + ] + }, + { + "name": "unicode-range", + "desc": "@font-face descriptor. Defines the set of Unicode codepoints that may be supported by the font face for which it is declared.", + "restriction": "unicode-range", + "values": [ + { + "name": "U+26" + }, + { + "name": "U+20-24F, U+2B0-2FF, U+370-4FF, U+1E00-1EFF, U+2000-20CF, U+2100-23FF, U+2500-26FF, U+E000-F8FF, U+FB00–FB4F" + }, + { + "name": "U+20-17F, U+2B0-2FF, U+2000-206F, U+20A0-20CF, U+2100-21FF, U+2600-26FF" + }, + { + "name": "U+20-2FF, U+370-4FF, U+1E00-20CF, U+2100-23FF, U+2500-26FF, U+FB00-FB4F, U+FFF0-FFFD" + }, + { + "name": "U+20-4FF, U+530-58F, U+10D0-10FF, U+1E00-23FF, U+2440-245F, U+2500-26FF, U+FB00-FB4F, U+FE20-FE2F, U+FFF0-FFFD" + }, + { + "name": "U+00-7F" + }, + { + "name": "U+80-FF" + }, + { + "name": "U+100-17F" + }, + { + "name": "U+180-24F" + }, + { + "name": "U+1E00-1EFF" + }, + { + "name": "U+250-2AF" + }, + { + "name": "U+370-3FF" + }, + { + "name": "U+1F00-1FFF" + }, + { + "name": "U+400-4FF" + }, + { + "name": "U+500-52F" + }, + { + "name": "U+00-52F, U+1E00-1FFF, U+2200–22FF" + }, + { + "name": "U+530–58F" + }, + { + "name": "U+590–5FF" + }, + { + "name": "U+600–6FF" + }, + { + "name": "U+750–77F" + }, + { + "name": "U+8A0–8FF" + }, + { + "name": "U+700–74F" + }, + { + "name": "U+900–97F" + }, + { + "name": "U+980–9FF" + }, + { + "name": "U+A00–A7F" + }, + { + "name": "U+A80–AFF" + }, + { + "name": "U+B00–B7F" + }, + { + "name": "U+B80–BFF" + }, + { + "name": "U+C00–C7F" + }, + { + "name": "U+C80–CFF" + }, + { + "name": "U+D00–D7F" + }, + { + "name": "U+D80–DFF" + }, + { + "name": "U+118A0–118FF" + }, + { + "name": "U+E00–E7F" + }, + { + "name": "U+1A20–1AAF" + }, + { + "name": "U+AA80–AADF" + }, + { + "name": "U+E80–EFF" + }, + { + "name": "U+F00–FFF" + }, + { + "name": "U+1000–109F" + }, + { + "name": "U+10A0–10FF" + }, + { + "name": "U+1200–137F" + }, + { + "name": "U+1380–139F" + }, + { + "name": "U+2D80–2DDF" + }, + { + "name": "U+AB00–AB2F" + }, + { + "name": "U+1780–17FF" + }, + { + "name": "U+1800–18AF" + }, + { + "name": "U+1B80–1BBF" + }, + { + "name": "U+1CC0–1CCF" + }, + { + "name": "U+4E00–9FD5" + }, + { + "name": "U+3400–4DB5" + }, + { + "name": "U+2F00–2FDF" + }, + { + "name": "U+2E80–2EFF" + }, + { + "name": "U+1100–11FF" + }, + { + "name": "U+AC00–D7AF" + }, + { + "name": "U+3040–309F" + }, + { + "name": "U+30A0–30FF" + }, + { + "name": "U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F" + }, + { + "name": "U+A4D0–A4FF" + }, + { + "name": "U+A000–A48F" + }, + { + "name": "U+A490–A4CF" + }, + { + "name": "U+2000-206F" + }, + { + "name": "U+3000–303F" + }, + { + "name": "U+2070–209F" + }, + { + "name": "U+20A0–20CF" + }, + { + "name": "U+2100–214F" + }, + { + "name": "U+2150–218F" + }, + { + "name": "U+2190–21FF" + }, + { + "name": "U+2200–22FF" + }, + { + "name": "U+2300–23FF" + }, + { + "name": "U+E000-F8FF" + }, + { + "name": "U+FB00–FB4F" + }, + { + "name": "U+FB50–FDFF" + }, + { + "name": "U+1F600–1F64F" + }, + { + "name": "U+2600–26FF" + }, + { + "name": "U+1F300–1F5FF" + }, + { + "name": "U+1F900–1F9FF" + }, + { + "name": "U+1F680–1F6FF" + } + ] + }, + { + "name": "vertical-align", + "desc": "Affects the vertical positioning of the inline boxes generated by an inline-level element inside a line box.", + "restriction": "percentage, length", + "values": [ + { + "name": "auto", + "desc": "Align the dominant baseline of the parent box with the equivalent, or heuristically reconstructed, baseline of the element inline box." + }, + { + "name": "baseline", + "desc": "Align the 'alphabetic' baseline of the element with the 'alphabetic' baseline of the parent element." + }, + { + "name": "bottom", + "desc": "Align the after edge of the extended inline box with the after-edge of the line box." + }, + { + "name": "middle", + "desc": "Align the 'middle' baseline of the inline element with the middle baseline of the parent." + }, + { + "name": "sub", + "desc": "Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)" + }, + { + "name": "super", + "desc": "Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)" + }, + { + "name": "text-bottom" + }, + { + "name": "text-top" + }, + { + "name": "top", + "desc": "Align the before edge of the extended inline box with the before-edge of the line box." + }, + { + "name": "-webkit-baseline-middle", + "browsers": "C,S1" + } + ] + }, + { + "name": "visibility", + "desc": "Specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the ‘display’ property to ‘none’ to suppress box generation altogether).", + "restriction": "enum", + "values": [ + { + "name": "collapse", + "desc": "Table-specific. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'." + }, + { + "name": "hidden", + "desc": "The generated box is invisible (fully transparent, nothing is drawn), but still affects layout." + }, + { + "name": "visible", + "desc": "The generated box is visible." + } + ] + }, + { + "name": "-webkit-animation", + "desc": "Shorthand property combines six of the animation properties into a single property.", + "browsers": "C,S5", + "restriction": "time, enum, timing-function, identifier, number", + "values": [ + { + "name": "alternate" + }, + { + "name": "alternate-reverse" + }, + { + "name": "backwards" + }, + { + "name": "both", + "desc": "Both forwards and backwards fill modes are applied." + }, + { + "name": "forwards" + }, + { + "name": "infinite", + "desc": "Causes the animation to repeat forever." + }, + { + "name": "none", + "desc": "No animation is performed" + }, + { + "name": "normal", + "desc": "Normal playback." + }, + { + "name": "reverse", + "desc": "All iterations of the animation are played in the reverse direction from the way they were specified." + } + ] + }, + { + "name": "-webkit-animation-delay", + "desc": "Defines when the animation will start.", + "browsers": "C,S5", + "restriction": "time" + }, + { + "name": "-webkit-animation-direction", + "desc": "Defines whether or not the animation should play in reverse on alternate cycles.", + "browsers": "C,S5", + "restriction": "enum", + "values": [ + { + "name": "alternate" + }, + { + "name": "alternate-reverse" + }, + { + "name": "normal", + "desc": "Normal playback." + }, + { + "name": "reverse", + "desc": "All iterations of the animation are played in the reverse direction from the way they were specified." + } + ] + }, + { + "name": "-webkit-animation-duration", + "desc": "Defines the length of time that an animation takes to complete one cycle.", + "browsers": "C,S5", + "restriction": "time" + }, + { + "name": "-webkit-animation-fill-mode", + "desc": "Defines what values are applied by the animation outside the time it is executing.", + "browsers": "C,S5", + "restriction": "enum", + "values": [ + { + "name": "backwards" + }, + { + "name": "both", + "desc": "Both forwards and backwards fill modes are applied." + }, + { + "name": "forwards" + }, + { + "name": "none", + "desc": "There is no change to the property value between the time the animation is applied and the time the animation begins playing or after the animation completes." + } + ] + }, + { + "name": "-webkit-animation-iteration-count", + "desc": "Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.", + "browsers": "C,S5", + "restriction": "number, enum", + "values": [ + { + "name": "infinite", + "desc": "Causes the animation to repeat forever." + } + ] + }, + { + "name": "-webkit-animation-name", + "desc": "Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation.", + "browsers": "C,S5", + "restriction": "identifier, enum", + "values": [ + { + "name": "none", + "desc": "No animation is performed" + } + ] + }, + { + "name": "-webkit-animation-play-state", + "desc": "Defines whether the animation is running or paused.", + "browsers": "C,S5", + "restriction": "enum", + "values": [ + { + "name": "paused" + }, + { + "name": "running" + } + ] + }, + { + "name": "-webkit-animation-timing-function", + "desc": "Describes how the animation will progress over one cycle of its duration. See the 'transition-timing-function'.", + "browsers": "C,S5", + "restriction": "timing-function" + }, + { + "name": "-webkit-appearance", + "desc": "Changes the appearance of buttons and other controls to resemble native controls.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "button" + }, + { + "name": "button-bevel" + }, + { + "name": "caps-lock-indicator" + }, + { + "name": "caret" + }, + { + "name": "checkbox" + }, + { + "name": "default-button" + }, + { + "name": "listbox" + }, + { + "name": "listitem" + }, + { + "name": "media-fullscreen-button" + }, + { + "name": "media-mute-button" + }, + { + "name": "media-play-button" + }, + { + "name": "media-seek-back-button" + }, + { + "name": "media-seek-forward-button" + }, + { + "name": "media-slider" + }, + { + "name": "media-sliderthumb" + }, + { + "name": "menulist" + }, + { + "name": "menulist-button" + }, + { + "name": "menulist-text" + }, + { + "name": "menulist-textfield" + }, + { + "name": "none" + }, + { + "name": "push-button" + }, + { + "name": "radio" + }, + { + "name": "scrollbarbutton-down" + }, + { + "name": "scrollbarbutton-left" + }, + { + "name": "scrollbarbutton-right" + }, + { + "name": "scrollbarbutton-up" + }, + { + "name": "scrollbargripper-horizontal" + }, + { + "name": "scrollbargripper-vertical" + }, + { + "name": "scrollbarthumb-horizontal" + }, + { + "name": "scrollbarthumb-vertical" + }, + { + "name": "scrollbartrack-horizontal" + }, + { + "name": "scrollbartrack-vertical" + }, + { + "name": "searchfield" + }, + { + "name": "searchfield-cancel-button" + }, + { + "name": "searchfield-decoration" + }, + { + "name": "searchfield-results-button" + }, + { + "name": "searchfield-results-decoration" + }, + { + "name": "slider-horizontal" + }, + { + "name": "sliderthumb-horizontal" + }, + { + "name": "sliderthumb-vertical" + }, + { + "name": "slider-vertical" + }, + { + "name": "square-button" + }, + { + "name": "textarea" + }, + { + "name": "textfield" + } + ] + }, + { + "name": "-webkit-backdrop-filter", + "desc": "Applies a filter effect where the first filter in the list takes the element's background image as the input image.", + "browsers": "S9", + "restriction": "enum, url", + "values": [ + { + "name": "none", + "desc": "No filter effects are applied." + }, + { + "name": "blur()" + }, + { + "name": "brightness()" + }, + { + "name": "contrast()" + }, + { + "name": "drop-shadow()" + }, + { + "name": "grayscale()" + }, + { + "name": "hue-rotate()" + }, + { + "name": "invert()" + }, + { + "name": "opacity()" + }, + { + "name": "saturate()" + }, + { + "name": "sepia()" + }, + { + "name": "url()", + "desc": "A filter reference to a element." + } + ] + }, + { + "name": "-webkit-backface-visibility", + "desc": "Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer.", + "browsers": "C,S5", + "restriction": "enum", + "values": [ + { + "name": "hidden" + }, + { + "name": "visible" + } + ] + }, + { + "name": "-webkit-background-clip", + "desc": "Determines the background painting area.", + "browsers": "C,S3", + "restriction": "box" + }, + { + "name": "-webkit-background-composite", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "border" + }, + { + "name": "padding" + } + ] + }, + { + "name": "-webkit-background-origin", + "desc": "For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s).", + "browsers": "C,S3", + "restriction": "box" + }, + { + "name": "-webkit-border-image", + "desc": "Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values.", + "browsers": "C,S5", + "restriction": "length, percentage, number, url, enum", + "values": [ + { + "name": "auto", + "desc": "If 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead." + }, + { + "name": "fill", + "desc": "Causes the middle part of the border-image to be preserved." + }, + { + "name": "none" + }, + { + "name": "repeat" + }, + { + "name": "round", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does." + }, + { + "name": "space", + "desc": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles." + }, + { + "name": "stretch", + "desc": "The image is stretched to fill the area." + }, + { + "name": "url()" + } + ] + }, + { + "name": "-webkit-box-align", + "desc": "Specifies the alignment of nested elements within an outer flexible box element.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "baseline", + "desc": "If this box orientation is inline-axis or horizontal, all children are placed with their baselines aligned, and extra space placed before or after as necessary. For block flows, the baseline of the first non-empty line box located within the element is used. For tables, the baseline of the first cell is used." + }, + { + "name": "center", + "desc": "Any extra space is divided evenly, with half placed above the child and the other half placed after the child." + }, + { + "name": "end", + "desc": "For normal direction boxes, the bottom edge of each child is placed along the bottom of the box. Extra space is placed above the element. For reverse direction boxes, the top edge of each child is placed along the top of the box. Extra space is placed below the element." + }, + { + "name": "start", + "desc": "For normal direction boxes, the top edge of each child is placed along the top of the box. Extra space is placed below the element. For reverse direction boxes, the bottom edge of each child is placed along the bottom of the box. Extra space is placed above the element." + }, + { + "name": "stretch", + "desc": "The height of each child is adjusted to that of the containing block." + } + ] + }, + { + "name": "-webkit-box-direction", + "desc": "In webkit applications, -webkit-box-direction specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "normal", + "desc": "A box with a computed value of horizontal for box-orient displays its children from left to right. A box with a computed value of vertical displays its children from top to bottom." + }, + { + "name": "reverse", + "desc": "A box with a computed value of horizontal for box-orient displays its children from right to left. A box with a computed value of vertical displays its children from bottom to top." + } + ] + }, + { + "name": "-webkit-box-flex", + "desc": "Specifies an element's flexibility.", + "browsers": "C,S3", + "restriction": "number" + }, + { + "name": "-webkit-box-flex-group", + "desc": "Flexible elements can be assigned to flex groups using the 'box-flex-group' property.", + "browsers": "C,S3", + "restriction": "integer" + }, + { + "name": "-webkit-box-ordinal-group", + "desc": "Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group.", + "browsers": "C,S3", + "restriction": "integer" + }, + { + "name": "-webkit-box-orient", + "desc": "In webkit applications, -webkit-box-orient specifies whether a box lays out its contents horizontally or vertically.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "block-axis" + }, + { + "name": "horizontal", + "desc": "The box displays its children from left to right in a horizontal line." + }, + { + "name": "inline-axis" + }, + { + "name": "vertical", + "desc": "The box displays its children from stacked from top to bottom vertically." + } + ] + }, + { + "name": "-webkit-box-pack", + "desc": "Specifies alignment of child elements within the current element in the direction of orientation.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "center", + "desc": "The extra space is divided evenly, with half placed before the first child and the other half placed after the last child." + }, + { + "name": "end", + "desc": "For normal direction boxes, the right edge of the last child is placed at the right side, with all extra space placed before the first child. For reverse direction boxes, the left edge of the first child is placed at the left side, with all extra space placed after the last child." + }, + { + "name": "justify", + "desc": "The space is divided evenly in-between each child, with none of the extra space placed before the first child or after the last child. If there is only one child, treat the pack value as if it were start." + }, + { + "name": "start", + "desc": "For normal direction boxes, the left edge of the first child is placed at the left side, with all extra space placed after the last child. For reverse direction boxes, the right edge of the last child is placed at the right side, with all extra space placed before the first child." + } + ] + }, + { + "name": "-webkit-box-reflect", + "desc": "Defines a reflection of a border box.", + "browsers": "C,S4", + "values": [ + { + "name": "above", + "desc": "The reflection appears above the border box." + }, + { + "name": "below", + "desc": "The reflection appears below the border box." + }, + { + "name": "left", + "desc": "The reflection appears to the left of the border box." + }, + { + "name": "right", + "desc": "The reflection appears to the right of the border box." + } + ] + }, + { + "name": "-webkit-box-sizing", + "desc": "Box Model addition in CSS3.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "border-box" + }, + { + "name": "content-box" + } + ] + }, + { + "name": "-webkit-break-after", + "desc": "Describes the page/column break behavior before the generated box.", + "browsers": "S7", + "restriction": "enum", + "values": [ + { + "name": "always", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "auto", + "desc": "Neither force nor forbid a page/column break before/after the generated box." + }, + { + "name": "avoid", + "desc": "Avoid a page/column break before/after the generated box." + }, + { + "name": "avoid-column", + "desc": "Avoid a column break before/after the generated box." + }, + { + "name": "avoid-page", + "desc": "Avoid a page break before/after the generated box." + }, + { + "name": "avoid-region" + }, + { + "name": "column", + "desc": "Always force a column break before/after the generated box." + }, + { + "name": "left", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a left page." + }, + { + "name": "page", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "region" + }, + { + "name": "right", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a right page." + } + ] + }, + { + "name": "-webkit-break-before", + "desc": "Describes the page/column break behavior before the generated box.", + "browsers": "S7", + "restriction": "enum", + "values": [ + { + "name": "always", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "auto", + "desc": "Neither force nor forbid a page/column break before/after the generated box." + }, + { + "name": "avoid", + "desc": "Avoid a page/column break before/after the generated box." + }, + { + "name": "avoid-column", + "desc": "Avoid a column break before/after the generated box." + }, + { + "name": "avoid-page", + "desc": "Avoid a page break before/after the generated box." + }, + { + "name": "avoid-region" + }, + { + "name": "column", + "desc": "Always force a column break before/after the generated box." + }, + { + "name": "left", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a left page." + }, + { + "name": "page", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "region" + }, + { + "name": "right", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a right page." + } + ] + }, + { + "name": "-webkit-break-inside", + "desc": "Describes the page/column break behavior inside the generated box.", + "browsers": "S7", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Neither force nor forbid a page/column break inside the generated box." + }, + { + "name": "avoid", + "desc": "Avoid a page/column break inside the generated box." + }, + { + "name": "avoid-column", + "desc": "Avoid a column break inside the generated box." + }, + { + "name": "avoid-page", + "desc": "Avoid a page break inside the generated box." + }, + { + "name": "avoid-region" + } + ] + }, + { + "name": "-webkit-column-break-after", + "desc": "Describes the page/column break behavior before the generated box.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "always", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "auto", + "desc": "Neither force nor forbid a page/column break before/after the generated box." + }, + { + "name": "avoid", + "desc": "Avoid a page/column break before/after the generated box." + }, + { + "name": "avoid-column", + "desc": "Avoid a column break before/after the generated box." + }, + { + "name": "avoid-page", + "desc": "Avoid a page break before/after the generated box." + }, + { + "name": "avoid-region" + }, + { + "name": "column", + "desc": "Always force a column break before/after the generated box." + }, + { + "name": "left", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a left page." + }, + { + "name": "page", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "region" + }, + { + "name": "right", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a right page." + } + ] + }, + { + "name": "-webkit-column-break-before", + "desc": "Describes the page/column break behavior before the generated box.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "always", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "auto", + "desc": "Neither force nor forbid a page/column break before/after the generated box." + }, + { + "name": "avoid", + "desc": "Avoid a page/column break before/after the generated box." + }, + { + "name": "avoid-column", + "desc": "Avoid a column break before/after the generated box." + }, + { + "name": "avoid-page", + "desc": "Avoid a page break before/after the generated box." + }, + { + "name": "avoid-region" + }, + { + "name": "column", + "desc": "Always force a column break before/after the generated box." + }, + { + "name": "left", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a left page." + }, + { + "name": "page", + "desc": "Always force a page break before/after the generated box." + }, + { + "name": "region" + }, + { + "name": "right", + "desc": "Force one or two page breaks before/after the generated box so that the next page is formatted as a right page." + } + ] + }, + { + "name": "-webkit-column-break-inside", + "desc": "Describes the page/column break behavior inside the generated box.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Neither force nor forbid a page/column break inside the generated box." + }, + { + "name": "avoid", + "desc": "Avoid a page/column break inside the generated box." + }, + { + "name": "avoid-column", + "desc": "Avoid a column break inside the generated box." + }, + { + "name": "avoid-page", + "desc": "Avoid a page break inside the generated box." + }, + { + "name": "avoid-region" + } + ] + }, + { + "name": "-webkit-column-count", + "desc": "Describes the optimal number of columns into which the content of the element will be flowed.", + "browsers": "C,S3", + "restriction": "integer", + "values": [ + { + "name": "auto", + "desc": "Determines the number of columns by the 'column-width' property and the element width." + } + ] + }, + { + "name": "-webkit-column-gap", + "desc": "Sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap.", + "browsers": "C,S3", + "restriction": "length", + "values": [ + { + "name": "normal", + "desc": "User agent specific and typically equivalent to 1em." + } + ] + }, + { + "name": "-webkit-column-rule", + "desc": "This property is a shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values.", + "browsers": "C,S3", + "restriction": "length, line-width, line-style, color" + }, + { + "name": "-webkit-column-rule-color", + "desc": "Sets the color of the column rule", + "browsers": "C,S3", + "restriction": "color" + }, + { + "name": "-webkit-column-rule-style", + "desc": "Sets the style of the rule between columns of an element.", + "browsers": "C,S3", + "restriction": "line-style" + }, + { + "name": "-webkit-column-rule-width", + "desc": "Sets the width of the rule between columns. Negative values are not allowed.", + "browsers": "C,S3", + "restriction": "length, line-width" + }, + { + "name": "-webkit-columns", + "desc": "A shorthand property which sets both 'column-width' and 'column-count'.", + "browsers": "C,S3", + "restriction": "length, integer", + "values": [ + { + "name": "auto", + "desc": "The width depends on the values of other properties." + } + ] + }, + { + "name": "-webkit-column-span", + "desc": "Describes the page/column break behavior after the generated box.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "all", + "desc": "The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appear." + }, + { + "name": "none", + "desc": "The element does not span multiple columns." + } + ] + }, + { + "name": "-webkit-column-width", + "desc": "This property describes the width of columns in multicol elements.", + "browsers": "C,S3", + "restriction": "length", + "values": [ + { + "name": "auto", + "desc": "The width depends on the values of other properties." + } + ] + }, + { + "name": "-webkit-filter", + "desc": "Processes an element’s rendering before it is displayed in the document, by applying one or more filter effects.", + "browsers": "C18,O15,S6", + "restriction": "enum, url", + "values": [ + { + "name": "none", + "desc": "No filter effects are applied." + }, + { + "name": "blur()" + }, + { + "name": "brightness()" + }, + { + "name": "contrast()" + }, + { + "name": "drop-shadow()" + }, + { + "name": "grayscale()" + }, + { + "name": "hue-rotate()" + }, + { + "name": "invert()" + }, + { + "name": "opacity()" + }, + { + "name": "saturate()" + }, + { + "name": "sepia()" + }, + { + "name": "url()", + "desc": "A filter reference to a element." + } + ] + }, + { + "name": "-webkit-flow-from", + "desc": "Makes a block container a region and associates it with a named flow.", + "browsers": "S6.1", + "restriction": "identifier", + "values": [ + { + "name": "none", + "desc": "The block container is not a CSS Region." + } + ] + }, + { + "name": "-webkit-flow-into", + "desc": "Places an element or its contents into a named flow.", + "browsers": "S6.1", + "restriction": "identifier", + "values": [ + { + "name": "none", + "desc": "The element is not moved to a named flow and normal CSS processing takes place." + } + ] + }, + { + "name": "-webkit-font-feature-settings", + "desc": "This property provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case.", + "browsers": "C16", + "restriction": "string, integer", + "values": [ + { + "name": "\"c2cs\"" + }, + { + "name": "\"dlig\"" + }, + { + "name": "\"kern\"" + }, + { + "name": "\"liga\"" + }, + { + "name": "\"lnum\"" + }, + { + "name": "\"onum\"" + }, + { + "name": "\"smcp\"" + }, + { + "name": "\"swsh\"" + }, + { + "name": "\"tnum\"" + }, + { + "name": "normal", + "desc": "No change in glyph substitution or positioning occurs." + }, + { + "name": "off" + }, + { + "name": "on" + } + ] + }, + { + "name": "-webkit-hyphens", + "desc": "Controls whether hyphenation is allowed to create more break opportunities within a line of text.", + "browsers": "S5.1", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word." + }, + { + "name": "manual" + }, + { + "name": "none", + "desc": "Words are not broken at line breaks, even if characters inside the word suggest line break points." + } + ] + }, + { + "name": "-webkit-line-break", + "desc": "Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text.", + "browsers": "C,S3", + "values": [ + { + "name": "after-white-space" + }, + { + "name": "normal" + } + ] + }, + { + "name": "-webkit-margin-bottom-collapse", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "collapse" + }, + { + "name": "discard" + }, + { + "name": "separate" + } + ] + }, + { + "name": "-webkit-margin-collapse", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "collapse" + }, + { + "name": "discard" + }, + { + "name": "separate" + } + ] + }, + { + "name": "-webkit-margin-start", + "browsers": "C,S3", + "restriction": "percentage, length", + "values": [ + { + "name": "auto" + } + ] + }, + { + "name": "-webkit-margin-top-collapse", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "collapse" + }, + { + "name": "discard" + }, + { + "name": "separate" + } + ] + }, + { + "name": "-webkit-mask-clip", + "desc": "Determines the mask painting area, which determines the area that is affected by the mask.", + "browsers": "C,O15,S4", + "restriction": "box" + }, + { + "name": "-webkit-mask-image", + "desc": "Sets the mask layer image of an element.", + "browsers": "C,O15,S4", + "restriction": "url, image, enum", + "values": [ + { + "name": "none", + "desc": "Counts as a transparent black image layer." + }, + { + "name": "url()", + "desc": "Reference to a ) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.", + "browsers": "C,S4", + "restriction": "length", + "values": [ + { + "name": "none", + "desc": "No perspective transform is applied." + } + ] + }, + { + "name": "-webkit-perspective-origin", + "desc": "Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.", + "browsers": "C,S4", + "restriction": "position, percentage, length" + }, + { + "name": "-webkit-region-fragment", + "desc": "The 'region-fragment' property controls the behavior of the last region associated with a named flow.", + "browsers": "S7", + "restriction": "enum", + "values": [ + { + "name": "auto", + "desc": "Content flows as it would in a regular content box." + }, + { + "name": "break" + } + ] + }, + { + "name": "-webkit-tap-highlight-color", + "browsers": "E,C,S3.1", + "restriction": "color" + }, + { + "name": "-webkit-text-fill-color", + "browsers": "E,C,S3", + "restriction": "color" + }, + { + "name": "-webkit-text-size-adjust", + "desc": "Specifies a size adjustment for displaying text content in mobile browsers.", + "browsers": "E,C,S3", + "restriction": "percentage", + "values": [ + { + "name": "auto", + "desc": "Renderers must use the default size adjustment when displaying on a small device." + }, + { + "name": "none", + "desc": "Renderers must not do size adjustment when displaying on a small device." + } + ] + }, + { + "name": "-webkit-text-stroke", + "browsers": "S3", + "restriction": "length, line-width, color, percentage" + }, + { + "name": "-webkit-text-stroke-color", + "browsers": "S3", + "restriction": "color" + }, + { + "name": "-webkit-text-stroke-width", + "browsers": "S3", + "restriction": "length, line-width, percentage" + }, + { + "name": "-webkit-touch-callout", + "browsers": "S3", + "restriction": "enum", + "values": [ + { + "name": "none" + } + ] + }, + { + "name": "-webkit-transform", + "desc": "A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.", + "browsers": "C,O12,S3.1", + "restriction": "enum", + "values": [ + { + "name": "matrix()" + }, + { + "name": "matrix3d()" + }, + { + "name": "none" + }, + { + "name": "perspective()" + }, + { + "name": "rotate()" + }, + { + "name": "rotate3d()" + }, + { + "name": "rotateX('angle')" + }, + { + "name": "rotateY('angle')" + }, + { + "name": "rotateZ('angle')" + }, + { + "name": "scale()" + }, + { + "name": "scale3d()" + }, + { + "name": "scaleX()" + }, + { + "name": "scaleY()" + }, + { + "name": "scaleZ()" + }, + { + "name": "skew()" + }, + { + "name": "skewX()" + }, + { + "name": "skewY()" + }, + { + "name": "translate()" + }, + { + "name": "translate3d()" + }, + { + "name": "translateX()" + }, + { + "name": "translateY()" + }, + { + "name": "translateZ()" + } + ] + }, + { + "name": "-webkit-transform-origin", + "desc": "Establishes the origin of transformation for an element.", + "browsers": "C,O15,S3.1", + "restriction": "position, length, percentage" + }, + { + "name": "-webkit-transform-origin-x", + "desc": "The x coordinate of the origin for transforms applied to an element with respect to its border box.", + "browsers": "C,S3.1", + "restriction": "length, percentage" + }, + { + "name": "-webkit-transform-origin-y", + "desc": "The y coordinate of the origin for transforms applied to an element with respect to its border box.", + "browsers": "C,S3.1", + "restriction": "length, percentage" + }, + { + "name": "-webkit-transform-origin-z", + "desc": "The z coordinate of the origin for transforms applied to an element with respect to its border box.", + "browsers": "C,S4", + "restriction": "length, percentage" + }, + { + "name": "-webkit-transform-style", + "desc": "Defines how nested elements are rendered in 3D space.", + "browsers": "C,S4", + "restriction": "enum", + "values": [ + { + "name": "flat" + } + ] + }, + { + "name": "-webkit-transition", + "desc": "Shorthand property combines four of the transition properties into a single property.", + "browsers": "C,O12,S5", + "restriction": "time, property, timing-function, enum", + "values": [ + { + "name": "all", + "desc": "Every property that is able to undergo a transition will do so." + }, + { + "name": "none", + "desc": "No property will transition." + } + ] + }, + { + "name": "-webkit-transition-delay", + "desc": "Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied.", + "browsers": "C,O12,S5", + "restriction": "time" + }, + { + "name": "-webkit-transition-duration", + "desc": "Specifies how long the transition from the old value to the new value should take.", + "browsers": "C,O12,S5", + "restriction": "time" + }, + { + "name": "-webkit-transition-property", + "desc": "Specifies the name of the CSS property to which the transition is applied.", + "browsers": "C,O12,S5", + "restriction": "property", + "values": [ + { + "name": "all", + "desc": "Every property that is able to undergo a transition will do so." + }, + { + "name": "none", + "desc": "No property will transition." + } + ] + }, + { + "name": "-webkit-transition-timing-function", + "desc": "Describes how the intermediate values used during a transition will be calculated.", + "browsers": "C,O12,S5", + "restriction": "timing-function" + }, + { + "name": "-webkit-user-drag", + "browsers": "S3", + "restriction": "enum", + "values": [ + { + "name": "auto" + }, + { + "name": "element" + }, + { + "name": "none" + } + ] + }, + { + "name": "-webkit-user-modify", + "desc": "Determines whether a user can edit the content of an element.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "read-only" + }, + { + "name": "read-write" + }, + { + "name": "read-write-plaintext-only" + } + ] + }, + { + "name": "-webkit-user-select", + "desc": "Controls the appearance of selection.", + "browsers": "C,S3", + "restriction": "enum", + "values": [ + { + "name": "auto" + }, + { + "name": "none" + }, + { + "name": "text" + } + ] + }, + { + "name": "white-space", + "desc": "Shorthand property for the 'white-space-collapsing' and 'text-wrap' properties.", + "restriction": "enum", + "values": [ + { + "name": "normal", + "desc": "Sets 'white-space-collapsing' to 'collapse' and 'text-wrap' to 'normal'." + }, + { + "name": "nowrap", + "desc": "Sets 'white-space-collapsing' to 'collapse' and 'text-wrap' to 'none'." + }, + { + "name": "pre" + }, + { + "name": "pre-line" + }, + { + "name": "pre-wrap" + } + ] + }, + { + "name": "widows", + "desc": "Specifies the minimum number of line boxes of a block container that must be left in a fragment after a break.", + "browsers": "C,IE8,O9.5,S1", + "restriction": "integer" + }, + { + "name": "width", + "desc": "Specifies the width of the content area, padding area or border area (depending on 'box-sizing') of certain boxes.", + "restriction": "length, percentage", + "values": [ + { + "name": "auto", + "desc": "The width depends on the values of other properties." + }, + { + "name": "fit-content", + "browsers": "C46,O33" + }, + { + "name": "max-content", + "browsers": "C46,O33" + }, + { + "name": "min-content", + "browsers": "C46,O33" + } + ] + }, + { + "name": "will-change", + "desc": "Provides a rendering hint to the user agent, stating what kinds of changes the author expects to perform on the element.", + "browsers": "C36,FF36,O24", + "restriction": "enum, identifier", + "values": [ + { + "name": "auto", + "desc": "Expresses no particular intent." + }, + { + "name": "contents" + }, + { + "name": "scroll-position" + } + ] + }, + { + "name": "word-break", + "desc": "Specifies line break opportunities for non-CJK scripts.", + "browsers": "E,C,FF15,IE5,S3", + "restriction": "enum", + "values": [ + { + "name": "break-all" + }, + { + "name": "keep-all", + "desc": "Block characters can no longer create implied break points." + }, + { + "name": "normal", + "desc": "Breaks non-CJK scripts according to their own rules." + } + ] + }, + { + "name": "word-spacing", + "desc": "Specifies additional spacing between “words”.", + "restriction": "length, percentage", + "values": [ + { + "name": "normal", + "desc": "No additional spacing is applied. Computes to zero." + } + ] + }, + { + "name": "word-wrap", + "desc": "Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit.", + "restriction": "enum", + "values": [ + { + "name": "break-word", + "desc": "An otherwise unbreakable sequence of characters may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line." + }, + { + "name": "normal", + "desc": "Lines may break only at allowed break points." + } + ] + }, + { + "name": "writing-mode", + "desc": "This is a shorthand property for both 'direction' and 'block-progression'.", + "browsers": "E,FF41", + "restriction": "enum", + "values": [ + { + "name": "horizontal-tb" + }, + { + "name": "sideways-lr", + "browsers": "FF43" + }, + { + "name": "sideways-rl", + "browsers": "FF43" + }, + { + "name": "vertical-lr" + }, + { + "name": "vertical-rl" + } + ] + }, + { + "name": "z-index", + "desc": "For a positioned box, the 'z-index' property specifies the stack level of the box in the current stacking context and whether the box establishes a local stacking context.", + "restriction": "integer", + "values": [ + { + "name": "auto", + "desc": "The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element." + } + ] + }, + { + "name": "zoom", + "desc": "Non-standard. Specifies the magnification scale of the object. See 'transform: scale()' for a standards-based alternative.", + "browsers": "E,C,IE6,O15,S4", + "restriction": "enum, integer, number, percentage", + "values": [ + { + "name": "normal" + } + ] + } + ] + } +}; + exports.descriptions = { + "100": "Thin", + "200": "Extra Light (Ultra Light)", + "300": "Light", + "400": "Normal", + "500": "Medium", + "600": "Semi Bold (Demi Bold)", + "700": "Bold", + "800": "Extra Bold (Ultra Bold)", + "900": "Black (Heavy)", + "alternate": "The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.", + "alternate-reverse": "The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.", + "backwards": "The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'.", + "forwards": "The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes.", + "paused": "A running animation will be paused.", + "running": "Resume playback of a paused animation.", + "multiply": "The source color is multiplied by the destination color and replaces the destination.", + "screen": "Multiplies the complements of the backdrop and source color values, then complements the result.", + "overlay": "Multiplies or screens the colors, depending on the backdrop color value.", + "darken": "Selects the darker of the backdrop and source colors.", + "lighten": "Selects the lighter of the backdrop and source colors.", + "color-dodge": "Brightens the backdrop color to reflect the source color.", + "color-burn": "Darkens the backdrop color to reflect the source color.", + "hard-light": "Multiplies or screens the colors, depending on the source color value.", + "soft-light": "Darkens or lightens the colors, depending on the source color value.", + "difference": "Subtracts the darker of the two constituent colors from the lighter color..", + "exclusion": "Produces an effect similar to that of the Difference mode but lower in contrast.", + "hue": "Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color.", + "saturation": "Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color.", + "color": "Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color.", + "luminosity": "Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color.", + "repeat": "The image is tiled (repeated) to fill the area.", + "clone": "Each box is independently wrapped with the border and padding.", + "slice": "The effect is as though the element were rendered with no breaks present, and then sliced by the breaks afterward.", + "inset": "Changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).", + "border-box": "The specified width and height (and respective min/max properties) on this element determine the border box of the element.", + "content-box": "Behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element.", + "rect()": "Specifies offsets from the edges of the border box.", + "evenodd": "Determines the ‘insideness’ of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses.", + "nonzero": "Determines the ‘insideness’ of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray.", + "linearRGB": "Color operations should occur in the linearized RGB color space.", + "sRGB": "Color operations should occur in the sRGB color space.", + "balance": "Balance content equally between columns, if possible.", + "attr()": "The attr(n) function returns as a string the value of attribute n for the subject of the selector.", + "counter(name)": "Counters are denoted by identifiers (see the 'counter-increment' and 'counter-reset' properties).", + "alias": "Indicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it.", + "all-scroll": "Indicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle.", + "cell": "Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.", + "col-resize": "Indicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.", + "context-menu": "A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.", + "copy": "Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it.", + "crosshair": "A simple crosshair (e.g., short line segments resembling a '+' sign). Often used to indicate a two dimensional bitmap selection mode.", + "e-resize": "Indicates that east edge is to be moved.", + "ew-resize": "Indicates a bidirectional east-west resize cursor.", + "grab": "Indicates that something can be grabbed.", + "grabbing": "Indicates that something is being grabbed.", + "help": "Help is available for the object under the cursor. Often rendered as a question mark or a balloon.", + "move": "Indicates something is to be moved.", + "-moz-grab": "Indicates that something can be grabbed.", + "-moz-grabbing": "Indicates that something is being grabbed.", + "-moz-zoom-in": "Indicates that something can be zoomed (magnified) in.", + "-moz-zoom-out": "Indicates that something can be zoomed (magnified) out.", + "ne-resize": "Indicates that movement starts from north-east corner.", + "nesw-resize": "Indicates a bidirectional north-east/south-west cursor.", + "no-drop": "Indicates that the dragged item cannot be dropped at the current cursor location. Often rendered as a hand or pointer with a small circle with a line through it.", + "not-allowed": "Indicates that the requested action will not be carried out. Often rendered as a circle with a line through it.", + "n-resize": "Indicates that north edge is to be moved.", + "ns-resize": "Indicates a bidirectional north-south cursor.", + "nw-resize": "Indicates that movement starts from north-west corner.", + "nwse-resize": "Indicates a bidirectional north-west/south-east cursor.", + "pointer": "The cursor is a pointer that indicates a link.", + "progress": "A progress indicator. The program is performing some processing, but is different from 'wait' in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.", + "row-resize": "Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.", + "se-resize": "Indicates that movement starts from south-east corner.", + "s-resize": "Indicates that south edge is to be moved.", + "sw-resize": "Indicates that movement starts from south-west corner.", + "vertical-text": "Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam.", + "wait": "Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.", + "-webkit-grab": "Indicates that something can be grabbed.", + "-webkit-grabbing": "Indicates that something is being grabbed.", + "-webkit-zoom-in": "Indicates that something can be zoomed (magnified) in.", + "-webkit-zoom-out": "Indicates that something can be zoomed (magnified) out.", + "w-resize": "Indicates that west edge is to be moved.", + "zoom-in": "Indicates that something can be zoomed (magnified) in.", + "zoom-out": "Indicates that something can be zoomed (magnified) out.", + "ltr": "Left-to-right direction.", + "rtl": "Right-to-left direction.", + "block": "The element generates a block-level box", + "flex": "The element generates a principal flex container box and establishes a flex formatting context.", + "flexbox": "The element lays out its contents using flow layout (block-and-inline layout). Standardized as 'flex'.", + "inline-block": "A block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the box itself is formatted as an inline box.", + "inline-flex": "Inline-level flex container.", + "inline-flexbox": "Inline-level flex container. Standardized as 'inline-flex'", + "inline-table": "Inline-level table wrapper box containing table box.", + "list-item": "One or more block boxes and one marker box.", + "-moz-box": "The element lays out its contents using flow layout (block-and-inline layout). Standardized as 'flex'.", + "-moz-inline-box": "Inline-level flex container. Standardized as 'inline-flex'", + "-ms-flexbox": "The element lays out its contents using flow layout (block-and-inline layout). Standardized as 'flex'.", + "-ms-grid": "The element generates a principal grid container box, and establishes a grid formatting context.", + "-ms-inline-flexbox": "Inline-level flex container. Standardized as 'inline-flex'", + "-ms-inline-grid": "Inline-level grid container.", + "run-in": "The element generates a run-in box. Run-in elements act like inlines or blocks, depending on the surrounding elements.", + "table": "The element generates a principal table wrapper box containing an additionally-generated table box, and establishes a table formatting context.", + "-webkit-box": "The element lays out its contents using flow layout (block-and-inline layout). Standardized as 'flex'.", + "-webkit-flex": "The element lays out its contents using flow layout (block-and-inline layout).", + "-webkit-inline-box": "Inline-level flex container. Standardized as 'inline-flex'", + "-webkit-inline-flex": "Inline-level flex container.", + "hide": "No borders or backgrounds are drawn around/behind empty cells.", + "show": "Borders and backgrounds are drawn around/behind empty cells (like normal cells).", + "accumulate": "If the ancestor container element has a property of new, then all graphics elements within the current container are rendered both on the parent's background image and onto the target.", + "new": "Create a new background image canvas. All children of the current container element can access the background, and they will be rendered onto both the parent's background image canvas in addition to the target device.", + "blur()": "Applies a Gaussian blur to the input image.", + "brightness()": "Applies a linear multiplier to input image, making it appear more or less bright.", + "contrast()": "Adjusts the contrast of the input.", + "drop-shadow()": "Applies a drop shadow effect to the input image.", + "grayscale()": "Converts the input image to grayscale.", + "hue-rotate()": "Applies a hue rotation on the input image. ", + "invert()": "Inverts the samples in the input image.", + "opacity()": "Applies transparency to the samples in the input image.", + "saturate()": "Saturates the input image.", + "sepia()": "Converts the input image to sepia.", + "content": "Indicates automatic sizing, based on the flex item’s content.", + "column-reverse": "Same as 'column', except the main-start and main-end directions are swapped.", + "row": "The flex container’s main axis has the same orientation as the inline axis of the current writing mode.", + "row-reverse": "Same as 'row', except the main-start and main-end directions are swapped.", + "wrap-reverse": "Same as 'wrap', except the cross-start and cross-end directions are swapped.", + "bold": "Same as 700", + "bolder": "Specifies the weight of the face bolder than the inherited value.", + "caption": "The font used for captioned controls (e.g., buttons, drop-downs, etc.).", + "lighter": "Specifies the weight of the face lighter than the inherited value.", + "menu": "The font used in menus (e.g., dropdown menus and menu lists).", + "message-box": "The font used in dialog boxes.", + "small-caption": "The font used for labeling small controls.", + "status-bar": "The font used in window status bars.", + "\"aalt\"": "Access All Alternates.", + "\"abvf\"": "Above-base Forms. Required in Khmer script.", + "\"abvm\"": "Above-base Mark Positioning. Required in Indic scripts.", + "\"abvs\"": "Above-base Substitutions. Required in Indic scripts.", + "\"afrc\"": "Alternative Fractions.", + "\"akhn\"": "Akhand. Required in most Indic scripts.", + "\"blwf\"": "Below-base Form. Required in a number of Indic scripts.", + "\"blwm\"": "Below-base Mark Positioning. Required in Indic scripts.", + "\"blws\"": "Below-base Substitutions. Required in Indic scripts.", + "\"calt\"": "Contextual Alternates.", + "\"case\"": "Case-Sensitive Forms. Applies only to European scripts; particularly prominent in Spanish-language setting.", + "\"ccmp\"": "Glyph Composition/Decomposition.", + "\"cfar\"": "Conjunct Form After Ro. Required in Khmer scripts.", + "\"cjct\"": "Conjunct Forms. Required in Indic scripts that show similarity to Devanagari.", + "\"clig\"": "Contextual Ligatures.", + "\"cpct\"": "Centered CJK Punctuation. Used primarily in Chinese fonts.", + "\"cpsp\"": "Capital Spacing. Should not be used in connecting scripts (e.g. most Arabic).", + "\"cswh\"": "Contextual Swash.", + "\"curs\"": "Cursive Positioning. Can be used in any cursive script.", + "\"c2pc\"": "Petite Capitals From Capitals. Applies only to bicameral scripts.", + "\"dist\"": "Distances. Required in Indic scripts.", + "\"dnom\"": "Denominators.", + "\"dtls\"": "Dotless Forms. Applied to math formula layout.", + "\"expt\"": "Expert Forms. Applies only to Japanese.", + "\"falt\"": "Final Glyph on Line Alternates. Can be used in any cursive script.", + "\"fin2\"": "Terminal Form #2. Used only with the Syriac script.", + "\"fin3\"": "Terminal Form #3. Used only with the Syriac script.", + "\"fina\"": "Terminal Forms. Can be used in any alphabetic script.", + "\"flac\"": "Flattened ascent forms. Applied to math formula layout.", + "\"frac\"": "Fractions.", + "\"fwid\"": "Full Widths. Applies to any script which can use monospaced forms.", + "\"half\"": "Half Forms. Required in Indic scripts that show similarity to Devanagari.", + "\"haln\"": "Halant Forms. Required in Indic scripts.", + "\"halt\"": "Alternate Half Widths. Used only in CJKV fonts.", + "\"hist\"": "Historical Forms.", + "\"hkna\"": "Horizontal Kana Alternates. Applies only to fonts that support kana (hiragana and katakana).", + "\"hlig\"": "Historical Ligatures.", + "\"hngl\"": "Hangul. Korean only.", + "\"hojo\"": "Hojo Kanji Forms (JIS X 0212-1990 Kanji Forms). Used only with Kanji script.", + "\"hwid\"": "Half Widths. Generally used only in CJKV fonts.", + "\"init\"": "Initial Forms. Can be used in any alphabetic script.", + "\"isol\"": "Isolated Forms. Can be used in any cursive script.", + "\"ital\"": "Italics. Applies mostly to Latin; note that many non-Latin fonts contain Latin as well.", + "\"jalt\"": "Justification Alternates. Can be used in any cursive script.", + "\"jp78\"": "JIS78 Forms. Applies only to Japanese.", + "\"jp83\"": "JIS83 Forms. Applies only to Japanese.", + "\"jp90\"": "JIS90 Forms. Applies only to Japanese.", + "\"jp04\"": "JIS2004 Forms. Applies only to Japanese.", + "\"lfbd\"": "Left Bounds.", + "\"ljmo\"": "Leading Jamo Forms. Required for Hangul script when Ancient Hangul writing system is supported.", + "\"locl\"": "Localized Forms.", + "\"ltra\"": "Left-to-right glyph alternates.", + "\"ltrm\"": "Left-to-right mirrored forms.", + "\"mark\"": "Mark Positioning.", + "\"med2\"": "Medial Form #2. Used only with the Syriac script.", + "\"medi\"": "Medial Forms.", + "\"mgrk\"": "Mathematical Greek.", + "\"mkmk\"": "Mark to Mark Positioning.", + "\"nalt\"": "Alternate Annotation Forms.", + "\"nlck\"": "NLC Kanji Forms. Used only with Kanji script.", + "\"nukt\"": "Nukta Forms. Required in Indic scripts..", + "\"numr\"": "Numerators.", + "\"opbd\"": "Optical Bounds.", + "\"ordn\"": "Ordinals. Applies mostly to Latin script.", + "\"ornm\"": "Ornaments.", + "\"palt\"": "Proportional Alternate Widths. Used mostly in CJKV fonts.", + "\"pcap\"": "Petite Capitals.", + "\"pkna\"": "Proportional Kana. Generally used only in Japanese fonts.", + "\"pnum\"": "Proportional Figures.", + "\"pref\"": "Pre-base Forms. Required in Khmer and Myanmar (Burmese) scripts and southern Indic scripts that may display a pre-base form of Ra.", + "\"pres\"": "Pre-base Substitutions. Required in Indic scripts.", + "\"pstf\"": "Post-base Forms. Required in scripts of south and southeast Asia that have post-base forms for consonants eg: Gurmukhi, Malayalam, Khmer.", + "\"psts\"": "Post-base Substitutions.", + "\"pwid\"": "Proportional Widths.", + "\"qwid\"": "Quarter Widths. Generally used only in CJKV fonts.", + "\"rand\"": "Randomize.", + "\"rclt\"": "Required Contextual Alternates. May apply to any script, but is especially important for many styles of Arabic.", + "\"rlig\"": "Required Ligatures. Applies to Arabic and Syriac. May apply to some other scripts.", + "\"rkrf\"": "Rakar Forms. Required in Devanagari and Gujarati scripts.", + "\"rphf\"": "Reph Form. Required in Indic scripts. E.g. Devanagari, Kannada.", + "\"rtbd\"": "Right Bounds.", + "\"rtla\"": "Right-to-left alternates.", + "\"rtlm\"": "Right-to-left mirrored forms.", + "\"ruby\"": "Ruby Notation Forms. Applies only to Japanese.", + "\"salt\"": "Stylistic Alternates.", + "\"sinf\"": "Scientific Inferiors.", + "\"size\"": "Optical size.", + "\"smpl\"": "Simplified Forms. Applies only to Chinese and Japanese.", + "\"ssty\"": "Math script style alternates.", + "\"stch\"": "Stretching Glyph Decomposition.", + "\"subs\"": "Subscript.", + "\"sups\"": "Superscript.", + "\"titl\"": "Titling.", + "\"tjmo\"": "Trailing Jamo Forms. Required for Hangul script when Ancient Hangul writing system is supported.", + "\"tnam\"": "Traditional Name Forms. Applies only to Japanese.", + "\"trad\"": "Traditional Forms. Applies only to Chinese and Japanese.", + "\"twid\"": "Third Widths. Generally used only in CJKV fonts.", + "\"unic\"": "Unicase.", + "\"valt\"": "Alternate Vertical Metrics. Applies only to scripts with vertical writing modes.", + "\"vatu\"": "Vattu Variants. Used for Indic scripts. E.g. Devanagari.", + "\"vert\"": "Vertical Alternates. Applies only to scripts with vertical writing modes.", + "\"vhal\"": "Alternate Vertical Half Metrics. Used only in CJKV fonts.", + "\"vjmo\"": "Vowel Jamo Forms. Required for Hangul script when Ancient Hangul writing system is supported.", + "\"vkna\"": "Vertical Kana Alternates. Applies only to fonts that support kana (hiragana and katakana).", + "\"vkrn\"": "Vertical Kerning.", + "\"vpal\"": "Proportional Alternate Vertical Metrics. Used mostly in CJKV fonts.", + "\"vrt2\"": "Vertical Alternates and Rotation. Applies only to scripts with vertical writing modes.", + "\"zero\"": "Slashed Zero.", + "narrower": "Indicates a narrower value relative to the width of the parent element.", + "wider": "Indicates a wider value relative to the width of the parent element.", + "style": "Allow synthetic italic faces.", + "weight": "Allow synthetic bold faces.", + "annotation()": "Enables display of alternate annotation forms.", + "character-variant()": "Enables display of specific character variants.", + "historical-forms": "Enables display of historical forms.", + "ornaments()": "Enables replacement of default glyphs with ornaments, if provided in the font.", + "styleset()": "Enables display with stylistic sets.", + "stylistic()": "Enables display of stylistic alternates.", + "swash()": "Enables display of swash glyphs.", + "all-petite-caps": "Enables display of petite capitals for both upper and lowercase letters.", + "all-small-caps": "Enables display of small capitals for both upper and lowercase letters.", + "petite-caps": "Enables display of petite capitals.", + "titling-caps": "Enables display of titling capitals.", + "unicase": "Enables display of mixture of small capitals for uppercase letters with normal lowercase letters.", + "full-width": "Enables rendering of full-width variants.", + "jis04": "Enables rendering of JIS04 forms.", + "jis78": "Enables rendering of JIS78 forms.", + "jis83": "Enables rendering of JIS83 forms.", + "jis90": "Enables rendering of JIS90 forms.", + "proportional-width": "Enables rendering of proportionally-spaced variants.", + "simplified": "Enables rendering of simplified forms.", + "traditional": "Enables rendering of traditional forms.", + "additional-ligatures": "Enables display of additional ligatures.", + "common-ligatures": "Enables display of common ligatures.", + "contextual": "Enables display of contextual alternates.", + "discretionary-ligatures": "Enables display of discretionary ligatures.", + "historical-ligatures": "Enables display of historical ligatures.", + "no-additional-ligatures": "Disables display of additional ligatures.", + "no-common-ligatures": "Disables display of common ligatures.", + "no-contextual": "Disables display of contextual alternates.", + "no-discretionary-ligatures": "Disables display of discretionary ligatures.", + "no-historical-ligatures": "Disables display of historical ligatures.", + "diagonal-fractions": "Enables display of lining diagonal fractions.", + "lining-nums": "Enables display of lining numerals.", + "oldstyle-nums": "Enables display of old-style numerals.", + "ordinal": "Enables display of letter forms used with ordinal numbers.", + "proportional-nums": "Enables display of proportional numerals.", + "slashed-zero": "Enables display of slashed zeros.", + "stacked-fractions": "Enables display of lining stacked fractions.", + "tabular-nums": "Enables display of tabular numerals.", + "fit-content": "Use the fit-content inline size or fit-content block size, as appropriate to the writing mode.", + "max-content": "Use the max-content inline size or max-content block size, as appropriate to the writing mode.", + "min-content": "Use the min-content inline size or min-content block size, as appropriate to the writing mode.", + "flip": "After rotating by the precededing angle, the image is flipped horizontally. Defaults to 0deg if the angle is ommitted.", + "from-image": "If the image has an orientation specified in its metadata, such as EXIF, this value computes to the angle that the metadata specifies is necessary to correctly orient the image.", + "crisp-edges": "The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process.", + "optimizeQuality": "Deprecated.", + "pixelated": "When scaling the image up, the 'nearest neighbor' or similar algorithm must be used, so that the image appears to be simply composed of very large pixels.", + "active": "The input method editor is initially active; text entry is performed using it unless the user specifically dismisses it.", + "disabled": "The input method editor is disabled and may not be activated by the user.", + "inactive": "The input method editor is initially inactive, but the user may activate it if they wish.", + "circle": "A hollow circle.", + "disc": "A filled circle.", + "inside": "The marker box is outside the principal block box, as described in the section on the ::marker pseudo-element below.", + "outside": "The ::marker pseudo-element is an inline element placed immediately before all ::before pseudo-elements in the principal block box, after which the element's content flows.", + "symbols()": "Allows a counter style to be defined inline.", + "alpha": "Indicates that the alpha values of the mask should be used.", + "luminance": "Indicates that the luminance values of the mask should be used.", + "path()": "Defines an SVG path as a string, with optional 'fill-rule' as the first argument.", + "block-axis": "Elements are oriented along the box's axis.", + "inline-axis": "Elements are oriented vertically.", + "padding-box": "The specified width and height (and respective min/max properties) on this element determine the padding box of the element.", + "manual": "Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities", + "line-through": "Each line of text has a line through the middle.", + "overline": "Each line of text has a line above it.", + "underline": "Each line of text is underlined.", + "dashed": "Produces a dashed line style.", + "dotted": "Produces a dotted line.", + "double": "Produces a double line.", + "solid": "Produces a solid line.", + "wavy": "Produces a wavy line.", + "matrix()": "Specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f]", + "matrix3d()": "Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.", + "perspective": "Specifies a perspective projection matrix.", + "rotate()": "Specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.", + "rotate3d()": "Specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters.", + "rotateX('angle')": "Specifies a clockwise rotation by the given angle about the X axis.", + "rotateY('angle')": "Specifies a clockwise rotation by the given angle about the Y axis.", + "rotateZ('angle')": "Specifies a clockwise rotation by the given angle about the Z axis.", + "scale()": "Specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.", + "scale3d()": "Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.", + "scaleX()": "Specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter.", + "scaleY()": "Specifies a scale operation using the [sy,1] scaling vector, where sy is given as the parameter.", + "scaleZ()": "Specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.", + "skew()": "Specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie: no skew on the Y axis).", + "skewX()": "Specifies a skew transformation along the X axis by the given angle.", + "skewY()": "Specifies a skew transformation along the Y axis by the given angle.", + "translate()": "Specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter.", + "translate3d()": "Specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.", + "translateX()": "Specifies a translation by the given amount in the X direction.", + "translateY()": "Specifies a translation by the given amount in the Y direction.", + "translateZ()": "Specifies a translation by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0.", + "false": "The element does not contain an accelerator key sequence.", + "true": "The element contains an accelerator key sequence.", + "bt": "Bottom-to-top block flow. Layout is horizontal.", + "lr": "Left-to-right direction. The flow orientation is vertical.", + "rl": "Right-to-left direction. The flow orientation is vertical.", + "tb": "Top-to-bottom direction. The flow orientation is horizontal.", + "zoom": "The element is zoomable.", + "no-limit": "There is no limit.", + "mode": "Any of the range of mode values available to the -ms-layout-grid-mode property.", + "type": "Any of the range of type values available to the -ms-layout-grid-type property.", + "loose": "Default. Grid used for Japanese and Korean characters.", + "-ms-autohiding-scrollbar": "Indicates the element displays auto-hiding scrollbars during mouse interactions and panning indicators during touch and keyboard interactions.", + "scrollbar": "Scrollbars are typically narrow strips inserted on one or two edges of an element and which often have arrows to click on and a \"thumb\" to drag up and down (or left and right) to move the contents of the element.", + "ideograph-alpha": "Creates 1/4em extra spacing between runs of ideographic letters and non-ideographic letters, such as Latin-based, Cyrillic, Greek, Arabic or Hebrew.", + "ideograph-numeric": "Creates 1/4em extra spacing between runs of ideographic letters and numeric glyphs.", + "ideograph-parenthesis": "Creates extra spacing between normal (non wide) parenthesis and ideographs.", + "ideograph-space": "Extends the width of the space character while surrounded by ideographs.", + "punctuation": "Creates extra non-breaking spacing around punctuation as required by language-specific typographic conventions.", + "digits": "Attempt to typeset horizontally each maximal sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer such that it takes up the space of a single character within the vertical line box.", + "inter-cluster": "Justification primarily changes spacing at word separators and at grapheme cluster boundaries in clustered scripts. This value is typically used for Southeast Asian scripts such as Thai.", + "inter-ideograph": "Justification primarily changes spacing at word separators and at inter-graphemic boundaries in scripts that use no word spaces. This value is typically used for CJK languages.", + "inter-word": "Justification primarily changes spacing at word separators. This value is typically used for languages that separate words using spaces, like English or (sometimes) Korean.", + "kashida": "Justification primarily stretches Arabic and related scripts through the use of kashida or other calligraphic elongation.", + "clip": "Clip inline content that overflows. Characters may be only partially rendered.", + "ellipsis": "Render an ellipsis character (U+2026) to represent clipped inline content.", + "over": "The underline is aligned with the 'top' (right in vertical writing) edge of the element's em-box. In this mode, an overline also switches sides.", + "under": "The underline is aligned with the 'bottom' (left in vertical writing) edge of the element's em-box. In this case the underline usually does not cross the descenders. This is sometimes called 'accounting' underline.", + "grippers": "Grippers are always on.", + "break-all": "Lines may break between any two grapheme clusters for non-CJK scripts.", + "clear": "Inline flow content can only wrap on top and bottom of the exclusion and must leave the areas to the start and end edges of the exclusion box empty.", + "maximum": "Inline flow content can wrap on the side of the exclusion with the largest available space for the given line, and must leave the other side of the exclusion empty.", + "minimum": "Inline flow content can flow around the edge of the exclusion with the smallest available space within the flow content’s containing block, and must leave the other edge of the exclusion empty.", + "current": "Indicates that the user agent should target the frame that the element is in.", + "root": "Indicates that the user agent should target the full window.", + "scale-down": "Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size.", + "invert": "Performs a color inversion on the pixels on the screen.", + "-moz-hidden-unscrollable": "Same as the standardized 'clip', except doesn’t establish a block formatting context.", + "painted": "The given element can be the target element for pointer events when the pointer is over a \"painted\" area. ", + "visibleFill": "The given element can be the target element for pointer events when the ‘visibility’ property is set to visible and when the pointer is over the interior of the element.", + "visiblePainted": "The given element can be the target element for pointer events when the ‘visibility’ property is set to visible and when the pointer is over a ‘painted’ area.", + "visibleStroke": "The given element can be the target element for pointer events when the ‘visibility’ property is set to visible and when the pointer is over the perimeter of the element.", + "absolute": "The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's 'containing block'.", + "-ms-page": "The box's position is calculated according to the 'absolute' model.", + "relative": "The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position.", + "static": "The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.", + "sticky": "The box's position is calculated according to the normal flow. Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes.", + "-webkit-sticky": "The box's position is calculated according to the normal flow. Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes.", + "distribute-letter": "If the width of the ruby text is smaller than that of the base, then the ruby text contents are evenly distributed across the width of the base, with the first and last ruby text glyphs lining up with the corresponding first and last base glyphs. If the width of the ruby text is at least the width of the base, then the letters of the base are evenly distributed across the width of the ruby text.", + "distribute-space": "If the width of the ruby text is smaller than that of the base, then the ruby text contents are evenly distributed across the width of the base, with a certain amount of white space preceding the first and following the last character in the ruby text. That amount of white space is normally equal to half the amount of inter-character space of the ruby text.", + "line-edge": "If the ruby text is not adjacent to a line edge, it is aligned as in 'auto'. If it is adjacent to a line edge, then it is still aligned as in auto, but the side of the ruby text that touches the end of the line is lined up with the corresponding edge of the base.", + "after": "The ruby text appears after the base. This is a relatively rare setting used in ideographic East Asian writing systems, most easily found in educational text.", + "before": "The ruby text appears before the base. This is the most common setting used in ideographic East Asian writing systems.", + "attr(x)": "The value of attribute 'x' is a string value. The string value is evaluated as a to determine the number of ruby base elements to be spanned by the annotation element.", + "smooth": "Scrolls in a smooth fashion using a user-agent-defined timing function and time period.", + "repeat()": "Defines an interval at which snap points are defined, starting from the container’s relevant start edge.", + "margin-box": "The background is painted within (clipped to) the margin box.", + "format()": "Optional hint describing the format of the font resource.", + "local()": "Format-specific string that identifies a locally available copy of a given font.", + "butt": "Indicates that the stroke for each subpath does not extend beyond its two endpoints.", + "bevel": "Indicates that a bevelled corner is to be used to join path segments.", + "miter": "Indicates that a sharp corner is to be used to join path segments.", + "additive": "Represents “sign-value” numbering systems, which, rather than using reusing digits in different positions to change their value, define additional digits with much larger values, so that the value of the number can be obtained by adding all the digits together.", + "cyclic": "Cycles repeatedly through its provided symbols, looping back to the beginning when it reaches the end of the list.", + "extends": "Use the algorithm of another counter style, but alter other aspects.", + "numeric": "interprets the list of counter symbols as digits to a \"place-value\" numbering system, similar to the default 'decimal' counter style.", + "symbolic": "Cycles repeatedly through its provided symbols, doubling, tripling, etc. the symbols on each successive pass through the list.", + "sideways": "This value is equivalent to 'sideways-right' in 'vertical-rl' writing mode and equivalent to 'sideways-left' in 'vertical-lr' writing mode.", + "sideways-right": "In vertical writing modes, this causes text to be set as if in a horizontal layout, but rotated 90° clockwise.", + "upright": "In vertical writing modes, characters from horizontal-only scripts are rendered upright, i.e. in their standard horizontal orientation.", + "geometricPrecision": "Indicates that the user agent shall emphasize geometric precision over legibility and rendering speed.", + "optimizeLegibility": "Indicates that the user agent shall emphasize legibility over rendering speed and geometric precision.", + "capitalize": "Puts the first typographic letter unit of each word in titlecase.", + "lowercase": "Puts all letters in lowercase.", + "uppercase": "Puts all letters in uppercase.", + "perspective()": "Specifies a perspective projection matrix.", + "flat": "All children of this element are rendered flattened into the 2D plane of the element.", + "preserve-3d": "Flattening is not performed, so children maintain their position in 3D space.", + "bidi-override": "Inside the element, reordering is strictly in sequence according to the 'direction' property; the implicit part of the bidirectional algorithm is ignored.", + "embed": "If the element is inline-level, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the 'direction' property.", + "isolate-override": "This combines the isolation behavior of 'isolate' with the directional override behavior of 'bidi-override'", + "plaintext": "For the purposes of the Unicode bidirectional algorithm, the base directionality of each bidi paragraph for which the element forms the containing block is determined not by the element's computed 'direction'.", + "U+26": "Ampersand.", + "U+20-24F, U+2B0-2FF, U+370-4FF, U+1E00-1EFF, U+2000-20CF, U+2100-23FF, U+2500-26FF, U+E000-F8FF, U+FB00–FB4F": "WGL4 character set (Pan-European).", + "U+20-17F, U+2B0-2FF, U+2000-206F, U+20A0-20CF, U+2100-21FF, U+2600-26FF": "The Multilingual European Subset No. 1. Latin. Covers ~44 languages.", + "U+20-2FF, U+370-4FF, U+1E00-20CF, U+2100-23FF, U+2500-26FF, U+FB00-FB4F, U+FFF0-FFFD": "The Multilingual European Subset No. 2. Latin, Greek, and Cyrillic. Covers ~128 language.", + "U+20-4FF, U+530-58F, U+10D0-10FF, U+1E00-23FF, U+2440-245F, U+2500-26FF, U+FB00-FB4F, U+FE20-FE2F, U+FFF0-FFFD": "The Multilingual European Subset No. 3. Covers all characters belonging to European scripts.", + "U+00-7F": "Basic Latin (ASCII).", + "U+80-FF": "Latin-1 Supplement. Accented characters for Western European languages, common punctuation characters, multiplication and division signs.", + "U+100-17F": "Latin Extended-A. Accented characters for for Czech, Dutch, Polish, and Turkish.", + "U+180-24F": "Latin Extended-B. Croatian, Slovenian, Romanian, Non-European and historic latin, Khoisan, Pinyin, Livonian, Sinology.", + "U+1E00-1EFF": "Latin Extended Additional. Vietnamese, German captial sharp s, Medievalist, Latin general use.", + "U+250-2AF": "International Phonetic Alphabet Extensions.", + "U+370-3FF": "Greek and Coptic.", + "U+1F00-1FFF": "Greek Extended. Accented characters for polytonic Greek.", + "U+400-4FF": "Cyrillic.", + "U+500-52F": "Cyrillic Supplement. Extra letters for Komi, Khanty, Chukchi, Mordvin, Kurdish, Aleut, Chuvash, Abkhaz, Azerbaijani, and Orok.", + "U+00-52F, U+1E00-1FFF, U+2200–22FF": "Latin, Greek, Cyrillic, some punctuation and symbols.", + "U+530–58F": "Armenian.", + "U+590–5FF": "Hebrew.", + "U+600–6FF": "Arabic.", + "U+750–77F": "Arabic Supplement. Additional letters for African languages, Khowar, Torwali, Burushaski, and early Persian.", + "U+8A0–8FF": "Arabic Extended-A. Additional letters for African languages, European and Central Asian languages, Rohingya, Berber, Arwi, and Koranic annotation signs.", + "U+700–74F": "Syriac.", + "U+900–97F": "Devanagari.", + "U+980–9FF": "Bengali.", + "U+A00–A7F": "Gurmukhi.", + "U+A80–AFF": "Gujarati.", + "U+B00–B7F": "Oriya.", + "U+B80–BFF": "Tamil.", + "U+C00–C7F": "Telugu.", + "U+C80–CFF": "Kannada.", + "U+D00–D7F": "Malayalam.", + "U+D80–DFF": "Sinhala.", + "U+118A0–118FF": "Warang Citi.", + "U+E00–E7F": "Thai.", + "U+1A20–1AAF": "Tai Tham.", + "U+AA80–AADF": "Tai Viet.", + "U+E80–EFF": "Lao.", + "U+F00–FFF": "Tibetan.", + "U+1000–109F": "Myanmar (Burmese).", + "U+10A0–10FF": "Georgian.", + "U+1200–137F": "Ethiopic.", + "U+1380–139F": "Ethiopic Supplement. Extra Syllables for Sebatbeit, and Tonal marks", + "U+2D80–2DDF": "Ethiopic Extended. Extra Syllables for Me'en, Blin, and Sebatbeit.", + "U+AB00–AB2F": "Ethiopic Extended-A. Extra characters for Gamo-Gofa-Dawro, Basketo, and Gumuz.", + "U+1780–17FF": "Khmer.", + "U+1800–18AF": "Mongolian.", + "U+1B80–1BBF": "Sundanese.", + "U+1CC0–1CCF": "Sundanese Supplement. Punctuation.", + "U+4E00–9FD5": "CJK (Chinese, Japanese, Korean) Unified Ideographs. Most common ideographs for modern Chinese and Japanese.", + "U+3400–4DB5": "CJK Unified Ideographs Extension A. Rare ideographs.", + "U+2F00–2FDF": "Kangxi Radicals.", + "U+2E80–2EFF": "CJK Radicals Supplement. Alternative forms of Kangxi Radicals.", + "U+1100–11FF": "Hangul Jamo.", + "U+AC00–D7AF": "Hangul Syllables.", + "U+3040–309F": "Hiragana.", + "U+30A0–30FF": "Katakana.", + "U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F": "Japanese Kanji, Hiragana and Katakana characters plus Yen/Yuan symbol.", + "U+A4D0–A4FF": "Lisu.", + "U+A000–A48F": "Yi Syllables.", + "U+A490–A4CF": "Yi Radicals.", + "U+2000-206F": "General Punctuation.", + "U+3000–303F": "CJK Symbols and Punctuation.", + "U+2070–209F": "Superscripts and Subscripts.", + "U+20A0–20CF": "Currency Symbols.", + "U+2100–214F": "Letterlike Symbols.", + "U+2150–218F": "Number Forms.", + "U+2190–21FF": "Arrows.", + "U+2200–22FF": "Mathematical Operators.", + "U+2300–23FF": "Miscellaneous Technical.", + "U+E000-F8FF": "Private Use Area.", + "U+FB00–FB4F": "Alphabetic Presentation Forms. Ligatures for latin, Armenian, and Hebrew.", + "U+FB50–FDFF": "Arabic Presentation Forms-A. Contextual forms / ligatures for Persian, Urdu, Sindhi, Central Asian languages, etc, Arabic pedagogical symbols, word ligatures.", + "U+1F600–1F64F": "Emoji: Emoticons.", + "U+2600–26FF": "Emoji: Miscellaneous Symbols.", + "U+1F300–1F5FF": "Emoji: Miscellaneous Symbols and Pictographs.", + "U+1F900–1F9FF": "Emoji: Supplemental Symbols and Pictographs.", + "U+1F680–1F6FF": "Emoji: Transport and Map Symbols.", + "text-bottom": "Align the bottom of the box with the after-edge of the parent element's font.", + "text-top": "Align the top of the box with the before-edge of the parent element's font.", + "break": "If the content fits within the CSS Region, then this property has no effect.", + "pre": "Sets 'white-space-collapsing' to 'preserve' and 'text-wrap' to 'none'.", + "pre-line": "Sets 'white-space-collapsing' to 'preserve-breaks' and 'text-wrap' to 'normal'.", + "pre-wrap": "Sets 'white-space-collapsing' to 'preserve' and 'text-wrap' to 'normal'.", + "contents": "Indicates that the author expects to animate or change something about the element’s contents in the near future.", + "scroll-position": "Indicates that the author expects to animate or change the scroll position of the element in the near future.", + "horizontal-tb": "Top-to-bottom block flow direction. The writing mode is horizontal.", + "sideways-lr": "Left-to-right block flow direction. The writing mode is vertical, while the typographic mode is horizontal.", + "sideways-rl": "Right-to-left block flow direction. The writing mode is vertical, while the typographic mode is horizontal.", + "vertical-lr": "Left-to-right block flow direction. The writing mode is vertical.", + "vertical-rl": "Right-to-left block flow direction. The writing mode is vertical." +}; +}); \ No newline at end of file diff --git a/extensions/css/server/src/data/buildscripts/css-schema.xml b/extensions/css/server/src/data/buildscripts/css-schema.xml new file mode 100644 index 0000000000000000000000000000000000000000..12432a95f218410534dd6b1174d85690396e3b0f --- /dev/null +++ b/extensions/css/server/src/data/buildscripts/css-schema.xml @@ -0,0 +1,9770 @@ + + + + + A variable-width box within the area defined by the bottom margin, centered on the page area, and between the bottom-left and bottom-right margin boxes. + + + A variable-width box within the area defined by the bottom margin and adjoining the bottom-left-corner margin box. + + + A box filling the area defined by the intersection of the bottom and left margins of the page box. + + + A variable-width box within the area defined by the bottom margin and adjoining the bottom-right corner margin box. + + + A box filling the area defined by the intersection of the bottom and right margins of the page box. + + + Defines character set of the document. + + + Defines a custom counter style. + + + Defines a custom media feature that can then be used in a media feature. + + + Allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of 'web-safe' fonts, allowing for consistent rendering independent of the fonts available in a given user's environment. + + + Defines named values for the indices used to select alternate glyphs for a given font family. + + + Includes content of another file. + + + Defines set of animation key frames. + + + A variable-height box within the area defined by the left margin and adjacent to the top of the bottom-left-corner. + + + A variable-height box in the area defined by the left margin, centered on the page area, and between the left-top and left-bottom margin boxes. + + + A variable-height box within the area defined by the left margin and adjacent to the bottom of the top-left-corner. + + + Defines a stylesheet for a particular media type. + + + Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document. + + + Defines set of animation key frames. + + + Specifies the size, zoom factor, and orientation of the viewport. + + + Declares a prefix and associates it with a namespace name. + + + Defines set of animation key frames. + + + Specifies the size, zoom factor, and orientation of the viewport. + + + Directive defines various page parameters. + + + A variable-height box within the area defined by the right margin and adjacent to the top of the bottom-right-corner. + + + A variable-height box in the area defined by the right margin, centered on the page area, and between the right-top and right-bottom margin boxes. + + + A variable-height box within the area defined by the right margin and adjacent to the bottom of the top-right-corner. + + + Creates scoped style rules using CSS syntax. + + + A conditional group rule whose condition tests whether the user agent supports CSS property:value pairs. + + + A variable-width box within the area defined by the top margin, centered on the page area, and between the top-left and top-right margin boxes. + + + A variable-width box within the area defined by the top margin and adjoining the top-left-corner margin box. + + + A fixed-size box filling the area defined by the intersection of the top and left margins of the page box. + + + A variable-width box within the area defined by the top margin and adjoining the top-right-corner margin box. + + + A box filling the area defined by the intersection of the top and right margins of the page box. + + + Specifies the size, zoom factor, and orientation of the viewport. + + + Defines set of animation key frames. + + + + + Applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. + + + Represents an element that acts as the source anchor of a hyperlink. Applies to both visited and unvisited links. + + + The same as :empty, except that it additionally matches elements that only contain code points affected by whitespace processing. + + + Radio and checkbox elements can be toggled by the user. Some menu items are 'checked' when the user selects them. When such elements are toggled 'on' the :checked pseudo-class applies. + + + Non-standard. Indicates whether or not a scrollbar corner is present. + + + Represents the element, or an ancestor of the element, that is currently being displayed. + + + Takes a list of compound selectors as its argument: it represents the :current element that matches the argument or, if that does not match, the innermost ancestor of the :current element that does. + + + Non-standard. Applies to buttons and track pieces. Indicates whether or not the button or track piece will decrement the view’s position when used. + + + Applies to the one or more UI elements that are the default among a set of similar elements. Typically applies to context menu items, buttons, and select lists/menus. + + + Represents an element based on its directionality as determined by the document language. + + + Represents user interface elements that are in a disabled state; such elements have a corresponding enabled state. + + + Non-standard. Applies to buttons and track pieces. Applies when both buttons are displayed together at the same end of the scrollbar. + + + Represents an element that has no children at all. + + + Represents user interface elements that are in an enabled state; such elements have a corresponding disabled state. + + + Non-standard. Applies to buttons and track pieces. Indicates whether the object is placed after the thumb. + + + When printing double-sided documents, the page boxes on left and right pages may be different. This can be expressed through CSS pseudo-classes defined in the page context. + + + Same as :nth-child(1). Represents an element that is the first child of some other element. + + + Same as :nth-of-type(1). Represents an element that is the first sibling of its type in the list of children of its parent element. + + + Applies while an element has the focus (accepts keyboard or mouse events, or other forms of input). + + + Matches any element that has its fullscreen flag set. + + + Represents any element that is defined to occur entirely after a :current element. + + + Non-standard. Applies to any scrollbar pieces that have a horizontal orientation. + + + When evaluated in the context of a shadow tree, matches the shadow tree’s host element. + + + When evaluated in the context of a shadow tree, it matches the shadow tree’s host element if the host element, in its normal context, matches the selector argument. + + + Tests whether there is an ancestor, outside the shadow tree, which matches a particular selector. + + + Applies while the user designates an element with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. + + + Non-standard. Applies to buttons and track pieces. Indicates whether or not the button or track piece will increment the view’s position when used. + + + Applies to UI elements whose value is in an indeterminate state. + + + Used in conjunction with the min and max attributes, whether on a range input, a number field, or any other types that accept those attributes. + + + An element is :valid or :invalid when it is, respectively, valid or invalid with respect to data validity semantics defined by a different specification. + + + Represents an element that is in language specified. + + + Same as :nth-last-child(1). Represents an element that is the last child of some other element. + + + Same as :nth-last-of-type(1). Represents an element that is the last sibling of its type in the list of children of its parent element. + + + When printing double-sided documents, the page boxes on left and right pages may be different. This can be expressed through CSS pseudo-classes defined in the page context. + + + Applies to links that have not yet been visited. + + + Allows authors to style hyperlinks based on the users current location within a site and to differentiate site-internal versus site-external links. + + + Accepts a non-negative integer as its sole argument, which, if the document's URL belongs to a hierarchical scheme, indicates the number of path levels to match. Use :local-link(0) to match links that target the same domain. + + + Takes a selector list as its argument. It represents an element that is represented by its argument. + + + Represents an element that is represented by the selector list passed as its argument. Standardized as :matches(). + + + Represents an element that acts as the source anchor of a hyperlink. Applies to both visited and unvisited links. + + + Non-standard. Matches elements representing broken images. + + + Non-standard. Matches elements when a drag-over event applies to it. + + + Non-standard. Represents an element that is the first child node of some other element. + + + Non-standard. Matches an element that has focus and focus ring drawing is enabled in the browser. + + + Matches any element that has its fullscreen flag set. Standardized as :fullscreen. + + + Non-standard. Represents an element that is the last child node of some other element. + + + Non-standard. Matches elements, such as images, that haven’t started loading yet. + + + The same as :empty, except that it additionally matches elements that only contain code points affected by whitespace processing. Standardized as :blank. + + + Deprecated. Represents placeholder text in an input field. Use ::-moz-placeholder for Firefox 19+. + + + Non-standard. Represents any submit button when the contents of the associated form are not valid. + + + Non-standard. Matches elements representing images that have been blocked from loading. + + + Non-standard. Represents any validated form element whose value isn't valid + + + Non-standard. Represents any validated form element whose value is valid + + + Non-standard. Matches elements representing images that have been disabled due to the user’s preferences. + + + Non-standard. Matches elements in an inactive window. + + + Matches any element that has its fullscreen flag set. + + + Represents placeholder text in an input field. Note: for Edge use the pseudo-element ::-ms-input-placeholder. Standardized as ::placeholder. + + + Windows Store apps only. Applies one or more styles to an element when it has focus and the user presses the space bar. + + + Represents an element that is in the language specified. Accepts a comma seperated list of language tokens. + + + Non-standard. Applies to track pieces. Applies when there is no button at that end of the track. + + + The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument. + + + Represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element. + + + Represents a cell element belonging to a column that has An+B-1 columns before it, for any positive integer or zero value of n. + + + Represents an element that has an+b-1 siblings after it in the document tree, for any positive integer or zero value of n, and has a parent element. + + + Represents a cell element belonging to a column that has An+B-1 columns after it, for any positive integer or zero value of n. + + + Represents an element that has An+B-1 siblings that match the given selector list after it in the document tree. + + + Represents an element that has an+b-1 siblings with the same expanded element name after it in the document tree, for any zero or positive integer value of n, and has a parent element. + + + Represents an element that has An+B-1 siblings that match the given selector list before it in the document tree. + + + Represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element. + + + Represents an element that has a parent element and whose parent element has no other element children. Same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity. + + + Matches every element that is the only child of its type, of its parent. Same as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1), but with a lower specificity. + + + A form element is :required or :optional if a value for it is, respectively, required or optional before the form it belongs to is submitted. Elements that are not form elements are neither required nor optional. + + + Used in conjunction with the min and max attributes, whether on a range input, a number field, or any other types that accept those attributes. + + + Represents any element that is defined to occur entirely prior to a :current element. + + + Matches an input element that is showing placeholder text. + + + An element whose contents are not user-alterable is :read-only. However, elements whose contents are user-alterable (such as text input fields) are considered to be in a :read-write state. In typical documents, most elements are :read-only. + + + An element whose contents are not user-alterable is :read-only. However, elements whose contents are user-alterable (such as text input fields) are considered to be in a :read-write state. In typical documents, most elements are :read-only. + + + A form element is :required or :optional if a value for it is, respectively, required or optional before the form it belongs to is submitted. Elements that are not form elements are neither required nor optional. + + + Equivalent to ':right' in left-to-right page progressions and ':left' in right-to-left page progressions. + + + When printing double-sided documents, the page boxes on left and right pages may be different. This can be expressed through CSS pseudo-classes defined in the page context. + + + Represents an element that is the root of the document. In HTML 4, this is always the HTML element. + + + Represents any element that is in the contextual reference element set. + + + Non-standard. Applies to buttons and track pieces. Applies when both buttons are displayed separately at either end of the scrollbar. + + + Non-standard. Applies to buttons and track pieces. Indicates whether the object is placed before the thumb. + + + Some URIs refer to a location within a resource. This kind of URI ends with a 'number sign' (#) followed by an anchor identifier (called the fragment identifier). + + + Represents an input element with incorrect input, but only after the user has significantly interacted with it. + + + An element is :valid or :invalid when it is, respectively, valid or invalid with respect to data validity semantics defined by a different specification. + + + Equivalent to ':left' in left-to-right page progressions and ':right' in right-to-left page progressions. + + + Non-standard. Applies to any scrollbar pieces that have a vertical orientation. + + + Applies once the link has been visited by the user. + + + Represents an element that is represented by the selector list passed as its argument. Standardized as :matches(). + + + Matches any element that has its fullscreen flag set. Standardized as :fullscreen. + + + Non-standard. Applies to all scrollbar pieces. Indicates whether or not the window containing the scrollbar is currently active. + + + + + Represents a styleable child pseudo-element immediately after the originating element’s actual content. + + + Used to create a backdrop that hides the underlying document for an element in a top layer (such as an element that is displayed fullscreen). + + + Represents a styleable child pseudo-element immediately before the originating element’s actual content. + + + Deprecated. Matches the distribution list itself, on elements that have one. Use ::slotted for forward compatibility. + + + + + + + Represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line. + + + Describes the contents of the first formatted line of its originating element. + + + Represents a portion of text that has been flagged by the user agent as misspelled. + + + Generated by list items to represent the item’s marker. + + + + + Used to style the bullet of a list element. Similar to the standardized ::marker. + + + Used to style the numbers of a list element. Similar to the standardized ::marker. + + + Represents placeholder text in an input field + + + Represents the bar portion of a progress bar. + + + Represents the portion of a document that has been highlighted by the user. + + + Used to create a backdrop that hides the underlying document for an element in a top layer (such as an element that is displayed fullscreen). + + + Represents the browse button of an input type=file control. + + + Represents the check of a checkbox or radio button input control. + + + Represents the clear button of a text input control + + + Represents the drop-down button of a select control. + + + Represents the bar portion of a progress bar. + + + Represents the portion of the slider track from its smallest value up to the value currently selected by the thumb. In a left-to-right layout, this is the portion of the slider track to the left of the thumb. + + + Represents the portion of the slider track from the value currently selected by the thumb up to the slider's largest value. In a left-to-right layout, this is the portion of the slider track to the right of the thumb. + + + Represents the password reveal button of an input type=password control. + + + Represents the portion of range input control (also known as a slider control) that the user drags. + + + Represents the tick marks of a slider that begin just after the thumb and continue up to the slider's largest value. In a left-to-right layout, these are the ticks to the right of the thumb. + + + Represents the tick marks of a slider that represent its smallest values up to the value currently selected by the thumb. In a left-to-right layout, these are the ticks to the left of the thumb. + + + Represents the tooltip of a slider (input type=range). + + + Represents the track of a slider. + + + Represents the content of a text or password input control, or a select control. + + + Represents placeholder text in an input field + + + Represents the portion of a document that has been highlighted by the user. + + + Represents a relationship between a selector that matches a CSS Region, and a relative selector that matches some named flow content. + + + Matches the shadow root if an element has a shadow tree. + + + Matches the distribution list itself, on elements that have one. + + + Represents a portion of text that has been flagged by the user agent as misspelled. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @counter-style descriptor. Specifies the symbols used by the marker-construction algorithm specified by the system descriptor. Needs to be specified if the counter system is 'additive'. + + + Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how 'justify-content' aligns individual items within the main-axis. + + + Lines are packed toward the center of the flex container. + + + Lines are packed toward the end of the flex container. + + + Lines are packed toward the start of the flex container. + + + Lines are evenly distributed in the flex container, with half-size spaces on either end. + + + Lines are evenly distributed in the flex container. + + + Lines stretch to take up the remaining space. + + + + + Aligns flex items along the cross axis of the current line of the flex container. + + + If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment. + + + The flex item’s margin box is centered in the cross axis within the line. + + + The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. + + + The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. + + + If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. + + + + + Specifies what point of an inline-level box is aligned to what point in the parent. + + + Match the box’s alphabetic baseline to that of its parent. + + + Use the dominant baseline choice of the parent. Match the box’s corresponding baseline to that of its parent. + + + Align the bottom of the aligned subtree with the bottom of the line box. + + + Align the center of the aligned subtree with the center of the line box. + + + Match the box’s central baseline to the central baseline of its parent. + + + Match the box’s mathematical baseline to that of its parent. + + + Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. + + + Match the bottom of the box to the bottom of the parent’s content area. + + + Match the top of the box to the top of the parent’s content area. + + + Align the top of the aligned subtree with the top of the line box. + + + + + Allows the default alignment along the cross axis to be overridden for individual flex items. + + + Computes to the value of 'align-items' on the element’s parent, or 'stretch' if the element has no parent. On absolutely positioned elements, it computes to itself. + + + If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment. + + + The flex item’s margin box is centered in the cross axis within the line. + + + The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. + + + The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. + + + If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. + + + + + Shorthand that resets all properties except 'direction' and 'unicode-bidi'. + + + Behavior depends on the origin to which the declaration belongs. + + + + + Provides alternative text for assistive technology to replace the genenerated content of a ::before or ::after element. + + + No alternative text. + + + + + Shorthand property combines six of the animation properties into a single property. + + + The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. + + + The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. + + + The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'. + + + Both forwards and backwards fill modes are applied. + + + The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. + + + Causes the animation to repeat forever. + + + No animation is performed + + + Normal playback. + + + All iterations of the animation are played in the reverse direction from the way they were specified. + + + + + Defines the composite operation used when multiple animations affect the same property simultaneously. + + + The effect value is accumulated onto the underlying value. + + + The effect value is added to the underlying value. + + + The result of compositing the effect value with the underlying value is simply the effect value. + + + + + Defines when the animation will start. + + + Defines whether or not the animation should play in reverse on alternate cycles. + + + The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. + + + The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. + + + Normal playback. + + + All iterations of the animation are played in the reverse direction from the way they were specified. + + + + + Defines the length of time that an animation takes to complete one cycle. + + + Defines what values are applied by the animation outside the time it is executing. + + + The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'. + + + Both forwards and backwards fill modes are applied. + + + The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. + + + There is no change to the property value between the time the animation is applied and the time the animation begins playing or after the animation completes. + + + + + Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once. + + + Causes the animation to repeat forever. + + + + + Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. + + + No animation is performed + + + + + Defines whether the animation is running or paused. + + + A running animation will be paused. + + + Resume playback of a paused animation. + + + + + Describes how the animation will progress over one cycle of its duration. + + + Applies a filter effect where the first filter in the list takes the element's background image as the input image. + + + No filter effects are applied. + + + Applies a Gaussian blur to the input image. + + + Applies a linear multiplier to input image, making it appear more or less bright. + + + Adjusts the contrast of the input. + + + Applies a drop shadow effect to the input image. + + + Converts the input image to grayscale. + + + Applies a hue rotation on the input image. + + + Inverts the samples in the input image. + + + Applies transparency to the samples in the input image. + + + Saturates the input image. + + + Converts the input image to sepia. + + + A filter reference to a <filter> element. + + + + + Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer. + + + Back side is hidden. + + + Back side is visible. + + + + + Shorthand property for setting most background properties at the same place in the style sheet. + + + The background is fixed with regard to the viewport. In paged media where there is no viewport, a 'fixed' background is fixed with respect to the page box and therefore replicated on every page. + + + 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. + + + A value of 'none' counts as an image layer but draws nothing. + + + The background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.) + + + + + Specifies whether the background images are fixed with regard to the viewport ('fixed') or scroll along with the element ('scroll') or its contents ('local'). + + + The background is fixed with regard to the viewport. In paged media where there is no viewport, a 'fixed' background is fixed with respect to the page box and therefore replicated on every page. + + + 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. + + + The background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element’s border.) + + + + + Defines the blending mode of each background layer. + + + Default attribute which specifies no blending + + + The source color is multiplied by the destination color and replaces the destination. + + + Multiplies the complements of the backdrop and source color values, then complements the result. + + + Multiplies or screens the colors, depending on the backdrop color value. + + + Selects the darker of the backdrop and source colors. + + + Selects the lighter of the backdrop and source colors. + + + Brightens the backdrop color to reflect the source color. + + + Darkens the backdrop color to reflect the source color. + + + Multiplies or screens the colors, depending on the source color value. + + + Darkens or lightens the colors, depending on the source color value. + + + Subtracts the darker of the two constituent colors from the lighter color.. + + + Produces an effect similar to that of the Difference mode but lower in contrast. + + + Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. + + + Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. + + + Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. + + + Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. + + + + + Determines the background painting area. + + + Sets the background color of an element. + + + Sets the background image(s) of an element. + + + Counts as an image layer but draws nothing. + + + + + Defines whether background images are transformed to match to the value of 'writing-mode' property, and whether 'background-size' widths and heights are logical or physical. + + + The values for the 'background-size' property are logical. The background images are transformed to match to the logical axis. + + + The values for the 'background-size' property are physical. The background images remain unchanged. + + + Similar to logical, except that the inline direction is ignored. + + + + + For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s). + + + Specifies the initial position of the background image(s) (after any resizing) within their corresponding background positioning area. + + + If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area. + + + Equivalent to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is. + + + 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. + + + 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. + + + + + + + If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area. + + + Equivalent to '100%' for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset. + + + Equivalent to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is. + + + 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. + + + + + + + Specifies how background images are tiled after they have been sized and positioned. + + + Double values are considered logical. + + + + + Specifies the size of the background images. + + + Resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%. + + + Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. + + + Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. + + + + + Specifies by how much the box is shifted up from its alignment point. + + + Lower by the offset appropriate for subscripts of the parent’s box. + + + Raise by the offset appropriate for superscripts of the parent’s box. + + + + + IE only. Used to extend behaviors of the browser. + + + Logical 'width'. Mapping depends on the element’s 'writing-mode'. + + + Depends on the values of other properties. + + + + + Shorthand property for setting border width, style, and color. + + + Logical 'border-bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-bottom-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-top-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-bottom-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-top-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-bottom-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-top-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Shorthand property for setting border width, style and color. + + + Sets the color of the bottom border. + + + Defines the radii of the bottom left outer border edge. + + + Defines the radii of the bottom right outer border edge. + + + Sets the style of the bottom border. + + + Sets the thickness of the bottom border. + + + Selects a table's border model. + + + Selects the collapsing borders model. + + + Selects the separated borders border model. + + + + + The color of the border around all four edges of an element. + + + Indicates that the values map to the logical properties instead of the physical ones. + + + + + Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values. + + + If 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead. + + + Causes the middle part of the border-image to be preserved. + + + Use the border styles. + + + The image is tiled (repeated) to fill the area. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles. + + + The image is stretched to fill the area. + + + + + + The values specify the amount by which the border image area extends beyond the border box on the top, right, bottom, and left sides respectively. If the fourth value is absent, it is the same as the second. If the third one is also absent, it is the same as the first. If the second one is also absent, it is the same as the first. Numbers represent multiples of the corresponding border-width. + + + Specifies how the images for the sides and the middle part of the border image are scaled and tiled. If the second keyword is absent, it is assumed to be the same as the first. + + + The image is tiled (repeated) to fill the area. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles. + + + The image is stretched to fill the area. + + + + + Specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle. + + + Causes the middle part of the border-image to be preserved. + + + + + Specifies an image to use instead of the border styles given by the 'border-style' properties and as an additional background layer for the element. If the value is 'none' or if the image cannot be displayed, the border styles will be used. + + + Use the border styles. + + + + + Defines whether border images are transformed to match to the value of 'writing-mode' property. + + + The values for the 'border-image' properties are logical. The border images are transformed to match to the logical axis. + + + The values for the 'border-image' properties are physical. The border images remain unchanged. + + + Similar to 'logical', except that the inline direction is ignored. + + + + + The four values of 'border-image-width' specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the top, right, bottom, and left sides of the area, respectively. + + + The border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead. + + + + + Logical 'border-right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-right-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-left-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-right-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-left-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-right-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'border-left-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Shorthand property for setting border width, style and color + + + Sets the color of the left border. + + + Sets the style of the left border. + + + Sets the thickness of the left border. + + + Defines the radii of the outer border edge. + + + Shorthand property for setting border width, style and color + + + Sets the color of the right border. + + + Sets the style of the right border. + + + Sets the thickness of the right border. + + + The lengths specify the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative. + + + The style of the border around edges of an element. + + + Indicates that the values map to the logical properties instead of the physical ones. + + + + + Shorthand property for setting border width, style and color + + + Sets the color of the top border. + + + Defines the radii of the top left outer border edge. + + + Defines the radii of the top right outer border edge. + + + Sets the style of the top border. + + + Sets the thickness of the top border. + + + Shorthand that sets the four 'border-*-width' properties. If it has four values, they set top, right, bottom and left in that order. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top. + + + Indicates that the values map to the logical properties instead of the physical ones. + + + + + Specifies how far an absolutely positioned box's bottom margin edge is offset above the bottom edge of the box's 'containing block'. + + + For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well + + + + + Specifies whether individual boxes are treated as broken pieces of one continuous box, or whether each box is individually wrapped with the border and padding. + + + Each box is independently wrapped with the border and padding. + + + The effect is as though the element were rendered with no breaks present, and then sliced by the breaks afterward. + + + + + Attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional 'inset' keyword. Omitted lengths are 0; omitted colors are a user agent chosen color. + + + Changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it). + + + No shadow. + + + + + Specifies the behavior of the 'width' and 'height' properties. + + + The specified width and height (and respective min/max properties) on this element determine the border box of the element. + + + Behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. + + + + + Specifies how the block is snapped to the baseline grid. + + + The block is not snapped to any grid. + + + The block-start edge is snapped to the nearest grid line. + + + The block-end edge is snapped to the nearest grid line. + + + The block is centered centered between one of the baseline grid’s text-over baselines and a subsequent (but not necessarily consecutive) text-under baseline. + + + The first line box’s dominant baseline is snapped to the nearest grid line. + + + The last line box’s dominant baseline is snapped to the nearest grid line. + + + + + Toggles whether or not an element appears in the formatting tree without affecting its display type when it is displayed. + + + The element generates boxes as normal, per its 'display-*' properties. + + + The element generates no boxes at all. + + + The element generates boxes as normal, but those boxes do not participate in layout in any way. + + + + + Describes the page/column/region break behavior after the generated box. + + + Always force a page break before/after the generated box. + + + Neither force nor forbid a page/column break before/after the principal box. + + + Avoid a break before/after the principal box. + + + Avoid a column break before/after the principal box. + + + Avoid a page break before/after the principal box. + + + Avoid a region break before/after the principal box. + + + Always force a column break before/after the principal box. + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a left page. + + + Always force a page break before/after the principal box. + + + Always force a region break before/after the principal box. + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a right page. + + + Forces a page break so that the next page is formatted as the right page in ltr langages or the left page for rtl. + + + Forces a page break so that the next page is formatted as the left page in ltr langages or the right page for rtl. + + + + + Describes the page/column/region break behavior before the generated box. + + + Always force a page break before/after the generated box. + + + Neither force nor forbid a page/column break before/after the principal box. + + + Avoid a break before/after the principal box. + + + Avoid a column break before/after the principal box. + + + Avoid a page break before/after the principal box. + + + Avoid a region break before/after the principal box. + + + Always force a column break before/after the principal box. + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a left page. + + + Always force a page break before/after the principal box. + + + Always force a region break before/after the principal box. + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a right page. + + + Forces a page break so that the next page is formatted as the right page in ltr langages or the left page for rtl. + + + Forces a page break so that the next page is formatted as the left page in ltr langages or the right page for rtl. + + + + + Describes the page/column/region break behavior inside the principal box. + + + Impose no additional breaking constraints within the box. + + + Avoid breaks within the box. + + + Avoid a column break within the box. + + + Avoid a page break within the box. + + + Avoid a region break within the box. + + + + + Specifies the position of the caption box with respect to the table box. + + + Logical 'bottom' + + + Logical 'top' + + + Positions the caption box below the table box. + + + Logical 'right' + + + Logical 'left' + + + Positions the caption box above the table box. + + + + + Controls the color of the text insertion indicator. + + + currentColor. User agents may automatically adjust the color of caret to ensure good visibility and contrast with the surrounding content. + + + + + Indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts. + + + The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document. + + + Logical 'right' + + + Logical 'left' + + + The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document. + + + No constraint on the box's position with respect to floats. + + + The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document. + + + + + Deprecated. Use the 'clip-path' property when support allows. Defines the visible portion of an element’s box. + + + The element does not clip. + + + Specifies offsets from the edges of the border box. + + + + + Specifies a clipping path where everything inside the path is visable and everything outside is clipped out. + + + No clipping path gets created. + + + References a <clipPath> element to create a clipping path. + + + + + Indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape. + + + Determines the ‘insideness’ of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. + + + Determines the ‘insideness’ of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. + + + + + Color of an element's text + + + Provides a hint to the user-agent about how it should treat color and style choices that might be expensive or generally unwise on a given device. + + + The user agent should make adjustments to the page’s styling as it deems necessary and prudent for the output device. + + + Indicates that the page is using color and styling on the specified element in a way which is important and significant, and which should not be tweaked or changed except at the user’s request. + + + + + Specifies the color space for gradient interpolations, color animations and alpha compositing. + + + Color operations are not required to occur in a particular color space. + + + Color operations should occur in the linearized RGB color space. + + + Color operations should occur in the sRGB color space. + + + + + Specifies the color space for imaging operations performed via filter effects. + + + Color operations are not required to occur in a particular color space. + + + Color operations should occur in the linearized RGB color space. + + + Color operations should occur in the sRGB color space. + + + + + Provides a hint about how to optimize its color interpolation and compositing operations. + + + + Indicates that the user agent shall emphasize quality over rendering speed. + + + Indicates that the user agent shall emphasize rendering speed over quality. + + + + + Describes the optimal number of columns into which the content of the element will be flowed. + + + Determines the number of columns by the 'column-width' property and the element width. + + + + + In continuous media, this property will only be consulted if the length of columns has been constrained. Otherwise, columns will automatically be balanced. + + + Fills columns sequentially. + + + Balance content equally between columns, if possible. + + + + + Sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap. + + + User agent specific and typically equivalent to 1em. + + + + + Shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values. + + + Sets the color of the column rule + + + Sets the style of the rule between columns of an element. + + + Sets the width of the rule between columns. Negative values are not allowed. + + + A shorthand property which sets both 'column-width' and 'column-count'. + + + The width depends on the values of other properties. + + + + + Describes the page/column break behavior after the generated box. + + + The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appear. + + + The element does not span multiple columns. + + + + + Describes the width of columns in multicol elements. + + + The width depends on the values of other properties. + + + Specifies the optimal column width as the fill-available inline size of the multi-column element. + + + Specifies the optimal column width as min(max-content inline size, max(min-content inline size, fill-available inline size)). + + + Specifies the optimal column width as the max-content inline size of the multi-column element’s contents. + + + Specifies the optimal column width as the min-content inline size of the multi-column element’s contents. + + + + + Indicates that an element and its contents are, as much as possible, independent of the rest of the document tree. + + + Indicates that the property has no effect. + + + Turns on all forms of containment for the element. + + + Turns on layout containment for the element. + + + Turns on style containment for the element. + + + Turns on paint containment for the element. + + + + + Determines which page-based occurrence of a given element is applied to a counter or string value. + + + The attr(n) function returns as a string the value of attribute n for the subject of the selector. + + + A hollow square. + + + A check mark. + + + A hollow circle. + + + Value is replaced by the appropriate string from the 'quotes' property. + + + Displays the element's descendents. + + + Counters are denoted by identifiers (see the 'counter-increment' and 'counter-reset' properties). + + + Counters are denoted by identifiers (see the 'counter-increment' and 'counter-reset' properties). + + + Counters are denoted by identifiers (see the 'counter-increment' and 'counter-reset' properties). + + + Counters are denoted by identifiers (see the 'counter-increment' and 'counter-reset' properties). + + + Current date and/or time, formatted according to the specified formatting string. Format is based on POSIX date formatting strings. + + + A filled diamond. On some platforms, this is similar to 'disc'. + + + A filled circle. + + + Shorthand for 'counter(endnote, normal)'. This is intended to be used on the in-flow part of a endnote. + + + Shorthand for 'counter(footnote, normal)'. This is intended to be used on the in-flow part of a footnote. + + + A hyphen bullet. + + + The (pseudo-)element is replaced in its entirety by the resource referenced by its 'icon' property, and treated as a replaced element. + + + On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty. On pseudo-elements, this inhibits the creation of the pseudo-element, as if 'display' computed to 'none'. + + + Shorthand for 'counter(list-item, normal)'. Note that this is not equivalent to 'normal' when set on a '::marker' pseudo-element that has a superior with 'display' set to 'list-item', as it ignores the 'list-style' properties. + + + Inserts nothing (as in 'none'), but increments (decrements) the level of nesting for quotes. + + + On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty. On pseudo-elements it causes the pseudo-element to have no content. + + + Inserts nothing (as in 'none'), but increments (decrements) the level of nesting for quotes. + + + See http://www.w3.org/TR/css3-content/#content for computation rules. + + + Value is replaced by the appropriate string from the 'quotes' property. + + + This causes all elements and pseudo-elements whose 'move-to' property computes to the specified identifier to be inserted as children of the current element (or pseudo-element). + + + Shorthand for 'counter(section-note, normal)'. This is intended to be used on the in-flow part of a section-note. + + + A filled square. + + + Specifies a string value + + + + + + Manipulate the value of existing counters. + + + This element does not alter the value of any counters. + + + + + Property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. + + + The counter is not modified. + + + + + Allows a replaced element to be just a rectangular area of an object, instead of the whole object. + + + The element's computed intrinsic width and height are the same as its actual intrinsic width and height. + + + Each of the four arguments can be a <length> or a <percentage>. All percentage values are computed relative to the intrinsic dimensions of the element, if there is one. Values are offsets relative to the respective edges of the element. + + + Each of the four arguments can be a <length> or a <percentage>. All percentage values are computed relative to the intrinsic dimensions of the element, if there is one. Values are offsets relative to the top left of the element. + + + + + Shorthand for setting 'cue-before' and 'cue-after'. If two values are given the first value is 'cue-before' and the second is 'cue-after'. If only one value is given, it applies to both properties. + + + No auditory icon is specified. + + + Designates an auditory icon resource. + + + + + Specifies an auditory icon (i.e. pre-recorded / pre-generated sound clips) to be played after the selected element within the aural box model. + + + No auditory icon is specified. + + + Designates an auditory icon resource. + + + + + Specifies an auditory icon (i.e. pre-recorded / pre-generated sound clips) to be played before the selected element within the aural box model. + + + No auditory icon is specified. + + + Designates an auditory icon resource. + + + + + Allows control over cursor appearance in an element + + + Indicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it. + + + Indicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle. + + + The UA determines the cursor to display based on the current context. + + + Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle. + + + Indicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them. + + + A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it. + + + Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it. + + + A simple crosshair (e.g., short line segments resembling a '+' sign). Often used to indicate a two dimensional bitmap selection mode. + + + The platform-dependent default cursor. Often rendered as an arrow. + + + Indicates that east edge is to be moved. + + + Indicates a bidirectional east-west resize cursor. + + + Indicates that something can be grabbed. + + + Indicates that something is being grabbed. + + + Help is available for the object under the cursor. Often rendered as a question mark or a balloon. + + + Indicates something is to be moved. + + + Indicates that something can be grabbed. + + + Indicates that something is being grabbed. + + + Indicates that something can be zoomed (magnified) in. + + + Indicates that something can be zoomed (magnified) out. + + + Indicates that movement starts from north-east corner. + + + Indicates a bidirectional north-east/south-west cursor. + + + Indicates that the dragged item cannot be dropped at the current cursor location. Often rendered as a hand or pointer with a small circle with a line through it. + + + No cursor is rendered for the element. + + + Indicates that the requested action will not be carried out. Often rendered as a circle with a line through it. + + + Indicates that north edge is to be moved. + + + Indicates a bidirectional north-south cursor. + + + Indicates that movement starts from north-west corner. + + + Indicates a bidirectional north-west/south-east cursor. + + + The cursor is a pointer that indicates a link. + + + A progress indicator. The program is performing some processing, but is different from 'wait' in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass. + + + Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them. + + + Indicates that movement starts from south-east corner. + + + Indicates that south edge is to be moved. + + + Indicates that movement starts from south-west corner. + + + Indicates text that may be selected. Often rendered as a vertical I-beam. + + + Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam. + + + Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass. + + + Indicates that something can be grabbed. + + + Indicates that something is being grabbed. + + + Indicates that something can be zoomed (magnified) in. + + + Indicates that something can be zoomed (magnified) out. + + + Indicates that west edge is to be moved. + + + Indicates that something can be zoomed (magnified) in. + + + Indicates that something can be zoomed (magnified) out. + + + + + Describes the horizontal center coordinate of the position of the element. + + + Describes the vertical center coordinate of the position of the element. + + + Specifies the inline base direction or directionality of any bidi paragraph, embedding, isolate, or override established by the box. Note: for HTML content use the 'dir' attribute and 'bdo' element rather than this property. + + + Left-to-right direction. + + + Right-to-left direction. + + + + + In combination with 'float' and 'position', determines the type of box or boxes that are generated for an element. + + + The element generates a block-level box + + + The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. + + + The element generates a principal flex container box and establishes a flex formatting context. + + + The element lays out its contents using flow layout (block-and-inline layout). Standardized as 'flex'. + + + The element lays out its contents using flow layout (block-and-inline layout). + + + The element generates a block container box, and lays out its contents using flow layout. + + + The element generates a principal grid container box, and establishes a grid formatting context. + + + The element generates an inline-level box. + + + A block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the box itself is formatted as an inline box. + + + Inline-level flex container. + + + Inline-level flex container. Standardized as 'inline-flex' + + + Inline-level grid container. + + + Inline-level table wrapper box containing table box. + + + One or more block boxes and one marker box. + + + The element lays out its contents using flow layout (block-and-inline layout). Standardized as 'flex'. + + + + + + + + Inline-level flex container. Standardized as 'inline-flex' + + + + + + + + The element lays out its contents using flow layout (block-and-inline layout). Standardized as 'flex'. + + + The element generates a principal grid container box, and establishes a grid formatting context. + + + Inline-level flex container. Standardized as 'inline-flex' + + + Inline-level grid container. + + + The element and its descendants generates no boxes. + + + The element generates a principal ruby container box, and establishes a ruby formatting context. + + + + + + + + + The element generates a run-in box. Run-in elements act like inlines or blocks, depending on the surrounding elements. + + + The element generates a principal table wrapper box containing an additionally-generated table box, and establishes a table formatting context. + + + + + + + + + + + The element lays out its contents using flow layout (block-and-inline layout). Standardized as 'flex'. + + + The element lays out its contents using flow layout (block-and-inline layout). + + + Inline-level flex container. Standardized as 'inline-flex' + + + Inline-level flex container. + + + + + Specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents. + + + Equivalent to 'alphabetic' in horizontal writing modes and in vertical writing modes when 'text-orientation' is 'sideways', 'sideways-right', or 'sideways-left'. equivalent to 'central' in vertical writing modes when 'text-orientation' is 'mixed' or 'upright'. + + + Use the bottom of the em box as the baseline. + + + Use the alphabetic baseline. + + + Use the central baseline (halfway between the ascent and descent). + + + Use the mathematical baseline. + + + Use the hanging baseline. + + + Use the top of the em box as the baseline. + + + + + In the separated borders model, this property controls the rendering of borders and backgrounds around cells that have no visible content. + + + No borders or backgrounds are drawn around/behind empty cells. + + + + Borders and backgrounds are drawn around/behind empty cells (like normal cells). + + + + + Deprecated. Use 'isolation' property instead when support allows. Specifies how the accumulation of the background image is managed. + + + If the ancestor container element has a property of new, then all graphics elements within the current container are rendered both on the parent's background image and onto the target. + + + Create a new background image canvas. All children of the current container element can access the background, and they will be rendered onto both the parent's background image canvas in addition to the target device. + + + + + @counter-style descriptor. Specifies a fallback counter style to be used when the current counter style can’t create a representation for a given counter value. + + + Paints the interior of the given graphical element. + + + A reference to the last child paint server element of the element being painted. + + + A reference to the nth child paint server element of the element being painted. + + + The computed value of the ‘fill’ property of the context element of the element being painted. + + + The computed value of the ‘stroke’ property of the context element of the element being painted. + + + A URL reference to a paint server element, which is an element that defines a paint server: ‘hatch’, ‘linearGradient’, ‘mesh’, ‘pattern’, ‘radialGradient’ and ‘solidcolor’. + + + No paint is applied in this layer. + + + + + Specifies the opacity of the painting operation used to paint the interior the current object. + + + Indicates the algorithm (or winding rule) which is to be used to determine what parts of the canvas are included inside the shape. + + + Determines the ‘insideness’ of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. + + + Determines the ‘insideness’ of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. + + + + + Processes an element’s rendering before it is displayed in the document, by applying one or more filter effects. + + + No filter effects are applied. + + + Applies a Gaussian blur to the input image. + + + Applies a linear multiplier to input image, making it appear more or less bright. + + + Adjusts the contrast of the input. + + + Applies a drop shadow effect to the input image. + + + Converts the input image to grayscale. + + + Applies a hue rotation on the input image. + + + Inverts the samples in the input image. + + + Applies transparency to the samples in the input image. + + + Saturates the input image. + + + Converts the input image to sepia. + + + A filter reference to a <filter> element. + + + + + Specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis. + + + Retrieves the value of the main size property as the used 'flex-basis'. + + + Indicates automatic sizing, based on the flex item’s content. + + + Expands to '0 0 auto'. + + + + + Sets the flex basis. + + + Retrieves the value of the main size property as the used 'flex-basis'. + + + Indicates automatic sizing, based on the flex item’s content. + + + + + Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. + + + The flex container’s main axis has the same orientation as the block axis of the current writing mode. + + + Same as 'column', except the main-start and main-end directions are swapped. + + + The flex container’s main axis has the same orientation as the inline axis of the current writing mode. + + + Same as 'row', except the main-start and main-end directions are swapped. + + + + + Specifies how flexbox items are placed in the flexbox. + + + The flex container’s main axis has the same orientation as the block axis of the current writing mode. + + + Same as 'column', except the main-start and main-end directions are swapped. + + + The flex container is single-line. + + + The flex container’s main axis has the same orientation as the inline axis of the current writing mode. + + + Same as 'row', except the main-start and main-end directions are swapped. + + + The flexbox is multi-line. + + + Same as 'wrap', except the cross-start and cross-end directions are swapped. + + + + + Sets the flex grow factor. Negative numbers are invalid. + + + Sets the flex shrink factor. Negative numbers are invalid. + + + Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in. + + + The flex container is single-line. + + + The flexbox is multi-line. + + + Same as 'wrap', except the cross-start and cross-end directions are swapped. + + + + + Specifies how a box should be floated. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. + + + Logical 'right' + + + Logical 'left' + + + The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). + + + The box is not floated. + + + Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top. + + + + + Indicates what color to use to flood the current filter primitive subregion. + + + Indicates what opacity to use to flood the current filter primitive subregion. + + + Makes a block container a region and associates it with a named flow. + + + The block container is not a CSS Region. + + + + + Places an element or its contents into a named flow. + + + The element is not moved to a named flow and normal CSS processing takes place. + + + + + Shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family', at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts. + + + Thin + + + Extra Light (Ultra Light) + + + Light + + + Normal + + + Medium + + + Semi Bold (Demi Bold) + + + Bold + + + Extra Bold (Ultra Bold) + + + Black (Heavy) + + + Same as 700 + + + Specifies the weight of the face bolder than the inherited value. + + + The font used for captioned controls (e.g., buttons, drop-downs, etc.). + + + The font used to label icons. + + + Selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'. + + + + + Specifies the weight of the face lighter than the inherited value. + + + + The font used in menus (e.g., dropdown menus and menu lists). + + + The font used in dialog boxes. + + + Specifies a face that is not labeled as a small-caps font. + + + Selects a font that is labeled 'oblique'. + + + + Specifies a font that is labeled as a small-caps font. If a genuine small-caps font is not available, user agents should simulate a small-caps font. + + + The font used for labeling small controls. + + + + The font used in window status bars. + + + + + + + + + Specifies a prioritized list of font family names or generic family names. A user agent iterates through the list of family names until it matches an available font that contains a glyph for the character to be rendered. + + + + + + + + + + + + + + + + + + + + + + Provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case. + + + Access All Alternates. + + + Above-base Forms. Required in Khmer script. + + + Above-base Mark Positioning. Required in Indic scripts. + + + Above-base Substitutions. Required in Indic scripts. + + + Alternative Fractions. + + + Akhand. Required in most Indic scripts. + + + Below-base Form. Required in a number of Indic scripts. + + + Below-base Mark Positioning. Required in Indic scripts. + + + Below-base Substitutions. Required in Indic scripts. + + + Contextual Alternates. + + + Case-Sensitive Forms. Applies only to European scripts; particularly prominent in Spanish-language setting. + + + Glyph Composition/Decomposition. + + + Conjunct Form After Ro. Required in Khmer scripts. + + + Conjunct Forms. Required in Indic scripts that show similarity to Devanagari. + + + Contextual Ligatures. + + + Centered CJK Punctuation. Used primarily in Chinese fonts. + + + Capital Spacing. Should not be used in connecting scripts (e.g. most Arabic). + + + Contextual Swash. + + + Cursive Positioning. Can be used in any cursive script. + + + Petite Capitals From Capitals. Applies only to bicameral scripts. + + + Small Capitals From Capitals. Applies only to bicameral scripts. + + + Distances. Required in Indic scripts. + + + Discretionary ligatures. + + + Denominators. + + + Dotless Forms. Applied to math formula layout. + + + Expert Forms. Applies only to Japanese. + + + Final Glyph on Line Alternates. Can be used in any cursive script. + + + Terminal Form #2. Used only with the Syriac script. + + + Terminal Form #3. Used only with the Syriac script. + + + Terminal Forms. Can be used in any alphabetic script. + + + Flattened ascent forms. Applied to math formula layout. + + + Fractions. + + + Full Widths. Applies to any script which can use monospaced forms. + + + Half Forms. Required in Indic scripts that show similarity to Devanagari. + + + Halant Forms. Required in Indic scripts. + + + Alternate Half Widths. Used only in CJKV fonts. + + + Historical Forms. + + + Horizontal Kana Alternates. Applies only to fonts that support kana (hiragana and katakana). + + + Historical Ligatures. + + + Hangul. Korean only. + + + Hojo Kanji Forms (JIS X 0212-1990 Kanji Forms). Used only with Kanji script. + + + Half Widths. Generally used only in CJKV fonts. + + + Initial Forms. Can be used in any alphabetic script. + + + Isolated Forms. Can be used in any cursive script. + + + Italics. Applies mostly to Latin; note that many non-Latin fonts contain Latin as well. + + + Justification Alternates. Can be used in any cursive script. + + + JIS78 Forms. Applies only to Japanese. + + + JIS83 Forms. Applies only to Japanese. + + + JIS90 Forms. Applies only to Japanese. + + + JIS2004 Forms. Applies only to Japanese. + + + Kerning. + + + Left Bounds. + + + Standard Ligatures. + + + Leading Jamo Forms. Required for Hangul script when Ancient Hangul writing system is supported. + + + Lining Figures. + + + Localized Forms. + + + Left-to-right glyph alternates. + + + Left-to-right mirrored forms. + + + Mark Positioning. + + + Medial Form #2. Used only with the Syriac script. + + + Medial Forms. + + + Mathematical Greek. + + + Mark to Mark Positioning. + + + Alternate Annotation Forms. + + + NLC Kanji Forms. Used only with Kanji script. + + + Nukta Forms. Required in Indic scripts.. + + + Numerators. + + + Oldstyle Figures. + + + Optical Bounds. + + + Ordinals. Applies mostly to Latin script. + + + Ornaments. + + + Proportional Alternate Widths. Used mostly in CJKV fonts. + + + Petite Capitals. + + + Proportional Kana. Generally used only in Japanese fonts. + + + Proportional Figures. + + + Pre-base Forms. Required in Khmer and Myanmar (Burmese) scripts and southern Indic scripts that may display a pre-base form of Ra. + + + Pre-base Substitutions. Required in Indic scripts. + + + Post-base Forms. Required in scripts of south and southeast Asia that have post-base forms for consonants eg: Gurmukhi, Malayalam, Khmer. + + + Post-base Substitutions. + + + Proportional Widths. + + + Quarter Widths. Generally used only in CJKV fonts. + + + Randomize. + + + Required Contextual Alternates. May apply to any script, but is especially important for many styles of Arabic. + + + Required Ligatures. Applies to Arabic and Syriac. May apply to some other scripts. + + + Rakar Forms. Required in Devanagari and Gujarati scripts. + + + Reph Form. Required in Indic scripts. E.g. Devanagari, Kannada. + + + Right Bounds. + + + Right-to-left alternates. + + + Right-to-left mirrored forms. + + + Ruby Notation Forms. Applies only to Japanese. + + + Stylistic Alternates. + + + Scientific Inferiors. + + + Optical size. + + + Small Capitals. Applies only to bicameral scripts. + + + Simplified Forms. Applies only to Chinese and Japanese. + + + Math script style alternates. + + + Stretching Glyph Decomposition. + + + Subscript. + + + Superscript. + + + Swash. Does not apply to ideographic scripts. + + + Titling. + + + Trailing Jamo Forms. Required for Hangul script when Ancient Hangul writing system is supported. + + + Traditional Name Forms. Applies only to Japanese. + + + Tabular Figures. + + + Traditional Forms. Applies only to Chinese and Japanese. + + + Third Widths. Generally used only in CJKV fonts. + + + Unicase. + + + Alternate Vertical Metrics. Applies only to scripts with vertical writing modes. + + + Vattu Variants. Used for Indic scripts. E.g. Devanagari. + + + Vertical Alternates. Applies only to scripts with vertical writing modes. + + + Alternate Vertical Half Metrics. Used only in CJKV fonts. + + + Vowel Jamo Forms. Required for Hangul script when Ancient Hangul writing system is supported. + + + Vertical Kana Alternates. Applies only to fonts that support kana (hiragana and katakana). + + + Vertical Kerning. + + + Proportional Alternate Vertical Metrics. Used mostly in CJKV fonts. + + + Vertical Alternates and Rotation. Applies only to scripts with vertical writing modes. + + + Slashed Zero. + + + No change in glyph substitution or positioning occurs. + + + Disable feature. + + + Enable feature. + + + + + Kerning is the contextual adjustment of inter-glyph spacing. This property controls metric kerning, kerning that utilizes adjustment data contained in the font. + + + Specifies that kerning is applied at the discretion of the user agent. + + + Specifies that kerning is not applied. + + + Specifies that kerning is applied. + + + + + The value of 'normal' implies that when rendering with OpenType fonts the language of the document is used to infer the OpenType language system, used to select language specific features when rendering. + + + Implies that when rendering with OpenType fonts the language of the document is used to infer the OpenType language system, used to select language specific features when rendering. + + + + + Indicates the desired height of glyphs from the font. For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values. + + + + + + + + + + + + + + Preserves the readability of text when font fallback occurs by adjusting the font-size so that the x-height is the same irregardless of the font used. + + + Do not preserve the font’s x-height. + + + + + Selects a normal, condensed, or expanded face from a font family. + + + + + + + Indicates a narrower value relative to the width of the parent element. + + + + + + + + Indicates a wider value relative to the width of the parent element. + + + + + Allows italic or oblique faces to be selected. Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face. + + + Selects a font that is labeled as an 'italic' face, or an 'oblique' face if one is not + + + Selects a face that is classified as 'normal'. + + + Selects a font that is labeled as an 'oblique' face, or an 'italic' face if one is not. + + + + + Controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces. + + + Disallow all synthetic faces. + + + Allow synthetic italic faces. + + + Allow synthetic bold faces. + + + + + Specifies variant representations of the font + + + Specifies a face that is not labeled as a small-caps font. + + + Specifies a font that is labeled as a small-caps font. If a genuine small-caps font is not available, user agents should simulate a small-caps font. + + + + + For any given character, fonts can provide a variety of alternate glyphs in addition to the default glyph for that character. This property provides control over the selection of these alternate glyphs. + + + Enables display of alternate annotation forms. + + + Enables display of specific character variants. + + + Enables display of historical forms. + + + None of the features are enabled. + + + Enables replacement of default glyphs with ornaments, if provided in the font. + + + Enables display with stylistic sets. + + + Enables display of stylistic alternates. + + + Enables display of swash glyphs. + + + + + Specifies control over capitalized forms. + + + Enables display of petite capitals for both upper and lowercase letters. + + + Enables display of small capitals for both upper and lowercase letters. + + + None of the features are enabled. + + + Enables display of petite capitals. + + + Enables display of small capitals. Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters. + + + Enables display of titling capitals. + + + Enables display of mixture of small capitals for uppercase letters with normal lowercase letters. + + + + + Allows control of glyph substitute and positioning in East Asian text. + + + Enables rendering of full-width variants. + + + Enables rendering of JIS04 forms. + + + Enables rendering of JIS78 forms. + + + Enables rendering of JIS83 forms. + + + Enables rendering of JIS90 forms. + + + None of the features are enabled. + + + Enables rendering of proportionally-spaced variants. + + + Enables display of ruby variant glyphs. + + + Enables rendering of simplified forms. + + + Enables rendering of traditional forms. + + + + + Specifies control over which ligatures are enabled or disabled. A value of ‘normal’ implies that the defaults set by the font are used. + + + Enables display of additional ligatures. + + + Enables display of common ligatures. + + + Enables display of contextual alternates. + + + Enables display of discretionary ligatures. + + + Enables display of historical ligatures. + + + Disables display of additional ligatures. + + + Disables display of common ligatures. + + + Disables display of contextual alternates. + + + Disables display of discretionary ligatures. + + + Disables display of historical ligatures. + + + Disables all ligatures. + + + Implies that the defaults set by the font are used. + + + + + Specifies control over numerical forms. + + + Enables display of lining diagonal fractions. + + + Enables display of lining numerals. + + + None of the features are enabled. + + + Enables display of old-style numerals. + + + Enables display of letter forms used with ordinal numbers. + + + Enables display of proportional numerals. + + + Enables display of slashed zeros. + + + Enables display of lining stacked fractions. + + + Enables display of tabular numerals. + + + + + Specifies the vertical position + + + None of the features are enabled. + + + Enables display of subscript variants (OpenType feature: subs). + + + Enables display of superscript variants (OpenType feature: sups). + + + + + Specifies weight of glyphs in the font, their degree of blackness or stroke thickness. + + + Thin + + + Extra Light (Ultra Light) + + + Light + + + Normal + + + Medium + + + Semi Bold (Demi Bold) + + + Bold + + + Extra Bold (Ultra Bold) + + + Black (Heavy) + + + Same as 700 + + + Specifies the weight of the face bolder than the inherited value. + + + Specifies the weight of the face lighter than the inherited value. + + + Same as 400 + + + + + Controls glyph orientation when the inline-progression-direction is horizontal. + + + Controls glyph orientation when the inline-progression-direction is vertical. + + + Sets the orientation based on the fullwidth or non-fullwidth characters and the most common orientation. + + + + + Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement. Shorthand for 'grid-row-start', 'grid-column-start', 'grid-row-end', and 'grid-column-end'. + + + The property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of one. + + + Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is N lines from its opposite edge. + + + + + Specifies the size of implicitly created columns. + + + Represents the largest min-content contribution of the grid items occupying the grid track. + + + Represents the largest max-content contribution of the grid items occupying the grid track. + + + As a maximum, identical to 'max-content'. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. + + + Defines a size range greater than or equal to min and less than or equal to max. + + + + + Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. + + + The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. + + + The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary. + + + If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. + + + + + Specifies the size of implicitly created rows. + + + Represents the largest min-content contribution of the grid items occupying the grid track. + + + Represents the largest max-content contribution of the grid items occupying the grid track. + + + As a maximum, identical to 'max-content'. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. + + + Defines a size range greater than or equal to min and less than or equal to max. + + + + + Shorthand for 'grid-column-start' and 'grid-column-end'. + + + The property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of one. + + + Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is N lines from its opposite edge. + + + + + Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement. + + + The property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of one. + + + Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is N lines from its opposite edge. + + + + + Specifies the gutters between grid columns. + + + Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement. + + + The property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of one. + + + Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is N lines from its opposite edge. + + + + + Shorthand that specifies the gutters between grid columns and grid rows in one declaration. + + + Shorthand for 'grid-row-start' and 'grid-row-end'. + + + The property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of one. + + + Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is N lines from its opposite edge. + + + + + Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement. + + + The property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of one. + + + Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is N lines from its opposite edge. + + + + + Specifies the gutters between grid rows. + + + Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement. + + + The property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of one. + + + Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is N lines from its opposite edge. + + + + + Shorthand for setting grid-template-columns, grid-template-rows, and grid-template-areas in a single declaration. + + + Sets all three properties to their initial values. + + + Represents the largest min-content contribution of the grid items occupying the grid track. + + + Represents the largest max-content contribution of the grid items occupying the grid track. + + + As a maximum, identical to 'max-content'. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. + + + Sets 'grid-template-rows' and 'grid-template-columns' to 'subgrid', and 'grid-template-areas' to its initial value. + + + Defines a size range greater than or equal to min and less than or equal to max. + + + Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. + + + + + Specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties. + + + The grid container doesn’t define any named grid areas. + + + + + specifies, as a space-separated track list, the line names and track sizing functions of the grid. + + + There is no explicit grid; any rows/columns will be implicitly generated. + + + Represents the largest min-content contribution of the grid items occupying the grid track. + + + Represents the largest max-content contribution of the grid items occupying the grid track. + + + As a maximum, identical to 'max-content'. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. + + + Indicates that the grid will align to its parent grid in that axis. + + + Defines a size range greater than or equal to min and less than or equal to max. + + + Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. + + + + + specifies, as a space-separated track list, the line names and track sizing functions of the grid. + + + There is no explicit grid; any rows/columns will be implicitly generated. + + + Represents the largest min-content contribution of the grid items occupying the grid track. + + + Represents the largest max-content contribution of the grid items occupying the grid track. + + + As a maximum, identical to 'max-content'. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. + + + Indicates that the grid will align to its parent grid in that axis. + + + Defines a size range greater than or equal to min and less than or equal to max. + + + Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. + + + + + Determines whether a punctuation mark, if one is present, may be placed outside the content area at the start or at the end of a full line of text. + + + A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification. + + + An opening bracket or quote at the start of the first formatted line of an element hangs. + + + A stop or comma at the end of a line hangs. + + + A closing bracket or quote at the end of the last formatted line of an element hangs. + + + No characters can hang. + + + + + Specifies the height of the content area, padding area or border area (depending on 'box-sizing') of certain boxes. + + + The height depends on the values of other properties. + + + Use the fill-available inline size or fill-available block size, as appropriate to the writing mode. + + + Use the fit-content inline size or fit-content block size, as appropriate to the writing mode. + + + Use the max-content inline size or max-content block size, as appropriate to the writing mode. + + + Use the min-content inline size or min-content block size, as appropriate to the writing mode. + + + + + Specifies strings that are shown between parts of hyphenated words. + + + The user agent should find an appropriate value, preferably from the same source as the hyphenation dictionary. + + + + + Specifies the minimum number of characters in a hyphenated word. + + + The user agent chooses a value that adapts to the current layout. + + + + + Indicates hyphenation behavior at the end of elements, column, pages and spreads. + + + No restrictions imposed. + + + The last full line of the element, or the last line before any column, page, or spread break inside the element should not be hyphenated. + + + The last line before any column, page, or spread break inside the element should not be hyphenated. + + + The last line before page or spread break inside the element should not be hyphenated. + + + The last line before any spread break inside the element should not be hyphenated. + + + + + Indicates the maximum number of successive hyphenated lines in an element. + + + There is no limit. + + + + + Specifies the maximum amount of unfilled space (before justification) that may be left in the line box before hyphenation is triggered to pull part of a word from the next line back up into the current line. + + + Controls whether hyphenation is allowed to create more break opportunities within a line of text. + + + Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word. + + + Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities + + + Words are not broken at line breaks, even if characters inside the word suggest line break points. + + + + + Specifies an orthogonal rotation to be applied to an image before it is laid out. + + + After rotating by the precededing angle, the image is flipped horizontally. Defaults to 0deg if the angle is ommitted. + + + If the image has an orientation specified in its metadata, such as EXIF, this value computes to the angle that the metadata specifies is necessary to correctly orient the image. + + + + + Provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm. + + + The image should be scaled with an algorithm that maximizes the appearance of the image. + + + The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. + + + + Deprecated. + + + Deprecated. + + + When scaling the image up, the 'nearest neighbor' or similar algorithm must be used, so that the image appears to be simply composed of very large pixels. + + + + + Specifies the intrinsic resolution of all raster images used in or on the element. + + + The image's intrinsic resolution is taken as that specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to '1dppx'. + + + If the 'snap' keyword is provided, the computed resolution (if any) is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. + + + + + Controls the state of the input method editor for text fields. + + + The input method editor is initially active; text entry is performed using it unless the user specifically dismisses it. + + + No change is made to the current input method editor state. This is the default. + + + The input method editor is disabled and may not be activated by the user. + + + The input method editor is initially inactive, but the user may activate it if they wish. + + + The IME state should be normal; this value can be used in a user style sheet to override the page setting. + + + + + Specifies styling for dropped, raised, and sunken initial letters. + + + No special initial-letter effect. Text behaves as normal. + + + + + Specifies the alignment points used to size and position an initial letter. + + + Use the alphabetic and cap-height baselines of the surrounding text to align the initial letter. + + + Use the ideographic character face bottom and top edge baselines of the surrounding text to align the initial letter. + + + Use the alphabetic and (as yet theoretical) hebrew hanging baseline of the surrounding text to align the initial letter. + + + Use the alphabetic and hanging baselines of the surrounding text to align the initial letter. + + + Uses the initial letter box’s line-over and line-under border edges as the over and under alignment points, respectively. + + + + + Specifies whether lines impacted by an initial letter are shortened to fit the rectangular shape of the initial letter box or follow the contour of its end-edge glyph outline. + + + No contour-fitting is performed: each impacted line is aligned flush to the end margin edge of the initial letter. + + + Behaves as none if the first typographic character unit after the initial letter belongs to Unicode General Category Zs. Otherwise behaves as for all on the first line of the block containing the initial letter and as none on the rest. + + + For each line of text impacted by the initial letter, the line box adjacent to the intial letter starts at the start-most point that touches the ink of the initial letter, plus the amount of the initial letter’s end-side border+padding+margin. + + + This value is the same as none, except that the exclusion area of the impacted lines is increased as necessary for its end-edge to land on the character grid. + + + + + Logical 'height'. Mapping depends on the element’s 'writing-mode'. + + + Depends on the values of other properties. + + + + + In CSS setting to 'isolate' will turn the element into a stacking context. In SVG, it defines whether an element is isolated or not. + + + Elements are not isolated unless an operation is applied that causes the creation of a stacking context. + + + In CSS will turn the element into a stacking context. + + + + + Aligns flex items along the main axis of the current line of the flex container. + + + Flex items are packed toward the center of the line. + + + Flex items are packed toward the end of the line. + + + Flex items are packed toward the start of the line. + + + Flex items are evenly distributed in the line, with half-size spaces on either end. + + + Flex items are evenly distributed in the line. + + + + + Indicates whether the user agent should adjust inter-glyph spacing based on kerning tables that are included in the relevant font or instead disable auto-kerning and set inter-character spacing to a specific length. + + + Indicates that the user agent should adjust inter-glyph spacing based on kerning tables that are included in the font that will be used. + + + + + Specifies how far an absolutely positioned box's left margin edge is offset to the right of the left edge of the box's 'containing block'. + + + For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well + + + + + Specifies the minimum, maximum, and optimal spacing between grapheme clusters. + + + The spacing is the normal spacing for the current font. It is typically zero-length. + + + + + Defines the color of the light source for filter primitives 'feDiffuseLighting' and 'feSpecularLighting'. + + + Specifies what set of line breaking restrictions are in effect within the element. + + + The UA determines the set of line-breaking restrictions to use for CJK scripts, and it may vary the restrictions based on the length of the line; e.g., use a less restrictive set of line-break rules for short lines. + + + Breaks text using the least restrictive set of line-breaking rules. Typically used for short lines, such as in newspapers. + + + Breaks text using the most common set of line-breaking rules. + + + Breaks CJK scripts using a more restrictive set of line-breaking rules than 'normal'. + + + + + Specifies whether this box creates a new baseline grid for its descendants or uses the same baseline grid as its parent. + + + Box assumes the line grid of its parent if its writing mode is the same as its parent. + + + Box creates a new line grid using its own font and line layout settings. + + + + + Determines the block-progression dimension of the text content area of an inline box. + + + Tells user agents to set the computed value to a 'reasonable' value based on the font size of the element. + + + + + Snaps line boxes contained by the element to the line grid specified by the 'line-grid' property. + + + Line boxes do not snap to the grid; they stack normally. + + + The dominant baseline snaps with the matching baseline on the line grid applying to the element. + + + Two baselines are used to align the line box. + + + + + Shorthand for setting 'list-style-type', 'list-style-position' and 'list-style-image' + + + + A hollow circle. + + + + + A filled circle. + + + + As 'inside', except the marker is instead placed immediately before the first text or significant whitespace in the list item or its children + + + The marker box is outside the principal block box, as described in the section on the ::marker pseudo-element below. + + + + + + + + The ::marker pseudo-element is an inline element placed immediately before all ::before pseudo-elements in the principal block box, after which the element's content flows. + + + A filled square. + + + Allows a counter style to be defined inline. + + + + + + + + + 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. + + + The default contents of the of the list item’s marker are given by 'list-style-type' instead. + + + + + Specifies the position of the '::marker' pseudo-element's box in the list item. + + + The marker box is outside the principal block box, as described in the section on the ::marker pseudo-element below. + + + The ::marker pseudo-element is an inline element placed immediately before all ::before pseudo-elements in the principal block box, after which the element's content flows. + + + + + Used to construct the default contents of a list item’s marker + + + Arabic-indic numbering. + + + Traditional uppercase Armenian numbering. + + + Bengali numbering. + + + Cambodian/Khmer numbering. + + + A hollow circle. + + + Han decimal numbers. + + + Han “Earthly Branch” ordinals. + + + Han “Heavenly Stem” ordinals. + + + Western decimal numbers. + + + Decimal numbers padded by initial zeros. + + + Devanagari numbering. + + + A filled circle. + + + Symbols appropriate for indicating a closed disclosure widget. + + + Symbols appropriate for indicating an open disclosure widget. + + + Traditional Georgian numbering. + + + Gujarati numbering. + + + Gurmukhi numbering. + + + Traditional Hebrew numbering. + + + Dictionary-order hiragana lettering + + + Iroha-order hiragana lettering + + + Kannada numbering. + + + Dictionary-order katakana lettering + + + Iroha-order katakana lettering + + + Cambodian/Khmer numbering. + + + Laotian numbering. + + + Lowercase ASCII letters. + + + Lowercase Armenian numbering. + + + Lowercase classical Greek. + + + Lowercase ASCII letters. + + + Lowercase ASCII Roman numerals. + + + Malayalam numbering. + + + Mongolian numbering. + + + Myanmar (Burmese) numbering. + + + No marker + + + Oriya numbering. + + + Persian numbering. + + + A filled square. + + + Tamil numbering. + + + Telugu numbering. + + + Thai (Siamese) numbering. + + + Tibetan numbering. + + + Allows a counter style to be defined inline. + + + Uppercase ASCII letters. + + + Traditional uppercase Armenian numbering. + + + Uppercase ASCII letters. + + + Uppercase ASCII Roman numerals. + + + + + Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + + Indicates that the values map to the logical properties instead of the physical ones. + + + + + Logical 'margin-bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + + + + Logical 'margin-top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + + + + Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + + + + Logical 'margin-right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + + + + Logical 'margin-left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + + + + Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + + + + Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + + + + Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + + + + Specifies the marker symbol that shall be used for all points on the sets the value for all vertices on the given ‘path’ element or basic shape. + + + Indicates that no marker symbol will be drawn at the given vertex or vertices. + + + Indicates that the last child <marker> element of the element where the property is specified will be used. + + + Indicates that the <marker> element referenced will be used. + + + + + Specifies the marker that will be drawn at the last vertices of the given markable element. + + + Indicates that no marker symbol will be drawn at the given vertex or vertices. + + + Indicates that the last child <marker> element of the element where the property is specified will be used. + + + Indicates that the <marker> element referenced will be used. + + + + + Specifies the marker that will be drawn at all vertices except the first and last. + + + Indicates that no marker symbol will be drawn at the given vertex or vertices. + + + Indicates that the last child <marker> element of the element where the property is specified will be used. + + + Indicates that the <marker> element referenced will be used. + + + + + Specifies if list item markers position themselves relative to the list item or the list container’s directionality. + + + Any markers associated with the list item base their positioning off of the directionality of the list item. + + + The associated markers instead base their positioning off of the directionality of the list item’s parent element. + + + + + Specifies the marker that will be drawn at the first vertices of the given markable element. + + + Indicates that no marker symbol will be drawn at the given vertex or vertices. + + + Indicates that the last child <marker> element of the element where the property is specified will be used. + + + Indicates that the <marker> element referenced will be used. + + + + + The mask shorthand. + + + Counts as a transparent black image layer. + + + Reference to a <mask element or to a CSS image. + + + Alpha values of the mask layer image should be used as the mask values. + + + + Luminance values of the mask layer image should be used as the mask values. + + + Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. + + + Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. + + + The painted content is not restricted (not clipped). + + + The source is placed over the destination. + + + The non-overlapping regions of source and destination are combined. + + + The parts of source that overlap the destination, replace the destination. + + + The source is placed, where it falls outside of the destination. + + + + + Shorthand property for setting 'mask-border-source', 'mask-border-slice', 'mask-border-width', 'mask-border-outset', 'mask-border-repeat', and 'mask-border-mode'. + + + No mask border image. + + + Causes the middle part of the border-image to be preserved. + + + The mask border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead. + + + The image is tiled (repeated) to fill the area. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles. + + + The image is stretched to fill the area. + + + Alpha values of the mask border image should be used as the mask values. + + + Luminance values of the mask border image should be used as the mask values. + + + + + Indicates whether the image value for 'mask-border-source' is treated as luminance mask or alpha mask. + + + Alpha values of the mask border image should be used as the mask values. + + + Luminance values of the mask border image should be used as the mask values. + + + + + Specifies the amount by which the mask border image area extends beyond the border box. + + + Specifies how the images for the sides and the middle part of the mask border image are scaled and tiled. + + + The image is tiled (repeated) to fill the area. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles. + + + The image is stretched to fill the area. + + + + + Specifies inward offsets from the top, right, bottom, and left edges of the mask border image, dividing it into nine regions: four corners, four edges and a middle. + + + Causes the middle part of the border-image to be preserved. + + + + + Specifies an image to be used as mask border image. + + + No mask border image. + + + + + Specifies offsets that are used to divide the mask border image area into nine parts. + + + The mask border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead. + + + + + Determines the mask painting area, which determines the area that is affected by the mask. + + + The painted content is not restricted (not clipped). + + + + + Defines the compositing operation used on the current mask layer with the mask layers below it. + + + The source is placed over the destination. + + + The non-overlapping regions of source and destination are combined. + + + The parts of source that overlap the destination, replace the destination. + + + The source is placed, where it falls outside of the destination. + + + + + Sets the mask layer image of an element. + + + Counts as a transparent black image layer. + + + Reference to a <mask element or to a CSS image. + + + + + Indicates whether the mask layer image is treated as luminance mask or alpha mask. + + + Alpha values of the mask layer image should be used as the mask values. + + + Use alpha values if 'mask-image' is an image, luminance if a <mask> element or a CSS image. + + + Luminance values of the mask layer image should be used as the mask values. + + + + + Specifies the mask positioning area. + + + Specifies how mask layer images are positioned. + + + Specifies how mask layer images are tiled after they have been sized and positioned. + + + Specifies the size of the mask layer images. + + + Resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%. + + + Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. + + + Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. + + + + + Defines whether the content of the <mask> element is treated as as luminance mask or alpha mask. + + + Indicates that the alpha values of the mask should be used. + + + Indicates that the luminance values of the mask should be used. + + + + + Logical 'max-width'. Mapping depends on the element’s 'writing-mode'. + + + No limit on the width of the box. + + + + + Allows authors to constrain content height to a certain range. + + + No limit on the height of the box. + + + Use the fill-available inline size or fill-available block size, as appropriate to the writing mode. + + + Use the fit-content inline size or fit-content block size, as appropriate to the writing mode. + + + Use the max-content inline size or max-content block size, as appropriate to the writing mode. + + + Use the min-content inline size or min-content block size, as appropriate to the writing mode. + + + + + Logical 'max-height'. Mapping depends on the element’s 'writing-mode'. + + + No limit on the height of the box. + + + + + Allows authors to constrain content width to a certain range. + + + No limit on the width of the box. + + + Use the fill-available inline size or fill-available block size, as appropriate to the writing mode. + + + Use the fit-content inline size or fit-content block size, as appropriate to the writing mode. + + + Use the max-content inline size or max-content block size, as appropriate to the writing mode. + + + Use the min-content inline size or min-content block size, as appropriate to the writing mode. + + + + + Forces a fragment to break after the specified number of lines. + + + Breaks occur only as specified elsewhere. + + + + + @viewport descriptor. Specifies the largest allowed zoom factor. + + + The upper limit on zoom factor is UA dependant. + + + + + Logical 'min-width'. Mapping depends on the element’s 'writing-mode'. + + + Allows authors to constrain content height to a certain range. + + + + Use the fill-available inline size or fill-available block size, as appropriate to the writing mode. + + + Use the fit-content inline size or fit-content block size, as appropriate to the writing mode. + + + Use the max-content inline size or max-content block size, as appropriate to the writing mode. + + + Use the min-content inline size or min-content block size, as appropriate to the writing mode. + + + + + Logical 'min-height'. Mapping depends on the element’s 'writing-mode'. + + + Allows authors to constrain content width to a certain range. + + + + Use the fill-available inline size or fill-available block size, as appropriate to the writing mode. + + + Use the fit-content inline size or fit-content block size, as appropriate to the writing mode. + + + Use the max-content inline size or max-content block size, as appropriate to the writing mode. + + + Use the min-content inline size or min-content block size, as appropriate to the writing mode. + + + + + Defines the formula that must be used to mix the colors with the backdrop. + + + Default attribute which specifies no blending + + + The source color is multiplied by the destination color and replaces the destination. + + + Multiplies the complements of the backdrop and source color values, then complements the result. + + + Multiplies or screens the colors, depending on the backdrop color value. + + + Selects the darker of the backdrop and source colors. + + + Selects the lighter of the backdrop and source colors. + + + Brightens the backdrop color to reflect the source color. + + + Darkens the backdrop color to reflect the source color. + + + Multiplies or screens the colors, depending on the source color value. + + + Darkens or lightens the colors, depending on the source color value. + + + Subtracts the darker of the two constituent colors from the lighter color.. + + + Produces an effect similar to that of the Difference mode but lower in contrast. + + + Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. + + + Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. + + + Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. + + + Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. + + + + + @viewport descriptor. Specifies the smallest allowed zoom factor. + + + The lower limit on zoom factor is UA dependant. + + + + + Shorthand property for setting 'motion-path', 'motion-offset' and 'motion-rotation'. + + + No motion path gets created. + + + Defines an SVG path as a string, with optional 'fill-rule' as the first argument. + + + References an SVG shape element and uses its geometry as motion path. + + + Indicates that the object is rotated by the angle of the direction of the motion path. + + + Indicates that the object is rotated by the angle of the direction of the motion path plus 180 degrees. + + + + + A distance that describes the position along the specified motion path. + + + Specifies the motion path the element gets positioned at. + + + No motion path gets created. + + + Defines an SVG path as a string, with optional 'fill-rule' as the first argument. + + + References an SVG shape element and uses its geometry as motion path. + + + + + Defines the direction of the element while positioning along the motion path. + + + Indicates that the object is rotated by the angle of the direction of the motion path. + + + Indicates that the object is rotated by the angle of the direction of the motion path plus 180 degrees. + + + + + Property causes the element or pseudo-element to be removed from the flow and reinserted at a later point in the document. + + + The element or pseudo-element is not moved. This value inhibits the creation of '::alternate' pseudo-elements and any pseudo-elements that have such a pseudo-element as a superior. + + + For '::alternate' pseudo-elements, if the superior parent uses the 'footnote' counter in its 'content' property then the computed value of 'move-to' is 'footnotes'. + + + + + Shorthand property combines six of the animation properties into a single property. + + + The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. + + + The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. + + + The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'. + + + Both forwards and backwards fill modes are applied. + + + The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. + + + Causes the animation to repeat forever. + + + No animation is performed + + + Normal playback. + + + All iterations of the animation are played in the reverse direction from the way they were specified. + + + + + Defines when the animation will start. + + + Defines whether or not the animation should play in reverse on alternate cycles. + + + The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. + + + The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. + + + Normal playback. + + + All iterations of the animation are played in the reverse direction from the way they were specified. + + + + + Defines the length of time that an animation takes to complete one cycle. + + + Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once. + + + Causes the animation to repeat forever. + + + + + Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. + + + No animation is performed + + + + + Defines whether the animation is running or paused. + + + A running animation will be paused. + + + Resume playback of a paused animation. + + + + + Describes how the animation will progress over one cycle of its duration. See the 'transition-timing-function'. + + + Used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer. + + + + + + + Determines the background painting area. + + + + + + In Gecko-based applications like Firefox, the -moz-background-inline-policy CSS property specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines. The choice of position has significant effects on repetition. + + + + + + + + For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s). + + + Sets a list of colors for the bottom border. + + + Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values. + + + If 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead. + + + Causes the middle part of the border-image to be preserved. + + + + The image is tiled (repeated) to fill the area. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles. + + + The image is stretched to fill the area. + + + + + + Sets a list of colors for the bottom border. + + + Sets a list of colors for the bottom border. + + + Ske Firefox, -moz-border-bottom-colors sets a list of colors for the bottom border. + + + Specifies how a XUL box aligns its contents across (perpendicular to) the direction of its layout. The effect of this is only visible if there is extra space in the box. + + + If this box orientation is inline-axis or horizontal, all children are placed with their baselines aligned, and extra space placed before or after as necessary. For block flows, the baseline of the first non-empty line box located within the element is used. For tables, the baseline of the first cell is used. + + + Any extra space is divided evenly, with half placed above the child and the other half placed after the child. + + + For normal direction boxes, the bottom edge of each child is placed along the bottom of the box. Extra space is placed above the element. For reverse direction boxes, the top edge of each child is placed along the top of the box. Extra space is placed below the element. + + + For normal direction boxes, the top edge of each child is placed along the top of the box. Extra space is placed below the element. For reverse direction boxes, the bottom edge of each child is placed along the bottom of the box. Extra space is placed above the element. + + + The height of each child is adjusted to that of the containing block. + + + + + Specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge). + + + A box with a computed value of horizontal for box-orient displays its children from left to right. A box with a computed value of vertical displays its children from top to bottom. + + + A box with a computed value of horizontal for box-orient displays its children from right to left. A box with a computed value of vertical displays its children from bottom to top. + + + + + Specifies how a box grows to fill the box that contains it, in the direction of the containing box's layout. + + + Flexible elements can be assigned to flex groups using the 'box-flex-group' property. + + + Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group. + + + In Mozilla applications, -moz-box-orient specifies whether a box lays out its contents horizontally or vertically. + + + Elements are oriented along the box's axis. + + + The box displays its children from left to right in a horizontal line. + + + Elements are oriented vertically. + + + The box displays its children from stacked from top to bottom vertically. + + + + + Specifies how a box packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box. + + + The extra space is divided evenly, with half placed before the first child and the other half placed after the last child. + + + For normal direction boxes, the right edge of the last child is placed at the right side, with all extra space placed before the first child. For reverse direction boxes, the left edge of the first child is placed at the left side, with all extra space placed after the last child. + + + The space is divided evenly in-between each child, with none of the extra space placed before the first child or after the last child. If there is only one child, treat the pack value as if it were start. + + + For normal direction boxes, the left edge of the first child is placed at the left side, with all extra space placed after the last child. For reverse direction boxes, the right edge of the last child is placed at the right side, with all extra space placed before the first child. + + + + + Box Model addition in CSS3. + + + The specified width and height (and respective min/max properties) on this element determine the border box of the element. + + + Behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. + + + The specified width and height (and respective min/max properties) on this element determine the padding box of the element. + + + + + Describes the optimal number of columns into which the content of the element will be flowed. + + + Determines the number of columns by the 'column-width' property and the element width. + + + + + Sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap. + + + User agent specific and typically equivalent to 1em. + + + + + Shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values. + + + Sets the color of the column rule + + + Sets the style of the rule between columns of an element. + + + Sets the width of the rule between columns. Negative values are not allowed. + + + A shorthand property which sets both 'column-width' and 'column-count'. + + + The width depends on the values of other properties. + + + + + This property describes the width of columns in multicol elements. + + + The width depends on the values of other properties. + + + + + Provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case. + + + + + + + + + + + + No change in glyph substitution or positioning occurs. + + + + + + + Controls whether hyphenation is allowed to create more break opportunities within a line of text. + + + Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word. + + + Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities + + + Words are not broken at line breaks, even if characters inside the word suggest line break points. + + + + + Applies the same transform as the perspective(<number>) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself. + + + No perspective transform is applied. + + + + + Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element. + + + Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'. + + + + The inline contents are centered within the line box. + + + The inline contents are aligned to the end edge of the line box. + + + The text is justified according to the method specified by the 'text-justify' property. + + + The inline contents are aligned to the left edge of the line box. In vertical text, 'left' aligns to the edge of the line box that would be the start edge for left-to-right text. + + + The inline contents are aligned to the right edge of the line box. In vertical text, 'right' aligns to the edge of the line box that would be the end edge for left-to-right text. + + + The inline contents are aligned to the start edge of the line box. + + + + + Specifies the color of text decoration (underlines overlines, and line-throughs) set on the element with text-decoration-line. + + + Specifies what line decorations, if any, are added to the element. + + + Each line of text has a line through the middle. + + + Neither produces nor inhibits text decoration. + + + Each line of text has a line above it. + + + Each line of text is underlined. + + + + + Specifies the line style for underline, line-through and overline text decoration. + + + Produces a dashed line style. + + + Produces a dotted line. + + + Produces a double line. + + + Produces no line. + + + Produces a solid line. + + + Produces a wavy line. + + + + + Specifies a size adjustment for displaying text content in mobile browsers. + + + Renderers must use the default size adjustment when displaying on a small device. + + + Renderers must not do size adjustment when displaying on a small device. + + + + + A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG. + + + Specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f] + + + Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order. + + + + Specifies a perspective projection matrix. + + + Specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. + + + Specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters. + + + Specifies a clockwise rotation by the given angle about the X axis. + + + Specifies a clockwise rotation by the given angle about the Y axis. + + + Specifies a clockwise rotation by the given angle about the Z axis. + + + Specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. + + + Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters. + + + Specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. + + + Specifies a scale operation using the [sy,1] scaling vector, where sy is given as the parameter. + + + Specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter. + + + Specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie: no skew on the Y axis). + + + Specifies a skew transformation along the X axis by the given angle. + + + Specifies a skew transformation along the Y axis by the given angle. + + + Specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. + + + Specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively. + + + Specifies a translation by the given amount in the X direction. + + + Specifies a translation by the given amount in the Y direction. + + + Specifies a translation by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0. + + + + + Establishes the origin of transformation for an element. + + + Shorthand property combines four of the transition properties into a single property. + + + Every property that is able to undergo a transition will do so. + + + No property will transition. + + + + + Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied. + + + Specifies how long the transition from the old value to the new value should take. + + + Specifies the name of the CSS property to which the transition is applied. + + + Every property that is able to undergo a transition will do so. + + + No property will transition. + + + + + Describes how the intermediate values used during a transition will be calculated. + + + Used to indicate whether the element can have focus. + + + + + + + Controls the appearance of selection. + + + + + + + + + + + + + IE only. Has the ability to turn off its system underlines for accelerator keys until the ALT key is pressed + + + The element does not contain an accelerator key sequence. + + + The element contains an accelerator key sequence. + + + + + IE only. Used to extend behaviors of the browser + + + Sets the block-progression value and the flow orientation + + + Bottom-to-top block flow. Layout is horizontal. + + + Left-to-right direction. The flow orientation is vertical. + + + Right-to-left direction. The flow orientation is vertical. + + + Top-to-bottom direction. The flow orientation is horizontal. + + + + + Specifies the zoom behavior that occurs when a user hits the zoom limit during a manipulation. + + + The nearest zoomable parent element begins zooming when the user hits a zoom limit during a manipulation. No bounce effect is shown. + + + A bounce effect is shown when the user hits a zoom limit during a manipulation. + + + + + Specifies whether zooming is enabled. + + + The element is not zoomable. + + + The element is zoomable. + + + + + Shorthand property for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties. + + + Specifies the maximum zoom factor. + + + Specifies the minimum zoom factor. + + + Shorthand property for the -ms-content-zoom-snap-type and -ms-content-zoom-snap-points properties. + + + Indicates that the motion of the content after the contact is picked up is always adjusted so that it lands on a snap-point. + + + Indicates that zooming is unaffected by any defined snap-points. + + + Indicates that the motion of the content after the contact is picked up may be adjusted if the content would normally stop "close enough" to a snap-point. + + + Specifies where the snap-points will be placed. + + + Specifies the position of individual snap-points as a comma-separated list of zoom factors. + + + + + Defines where zoom snap-points are located. + + + Specifies where the snap-points will be placed. + + + Specifies the position of individual snap-points as a comma-separated list of zoom factors. + + + + + Specifies how zooming is affected by defined snap-points. + + + Indicates that the motion of the content after the contact is picked up is always adjusted so that it lands on a snap-point. + + + Indicates that zooming is unaffected by any defined snap-points. + + + Indicates that the motion of the content after the contact is picked up may be adjusted if the content would normally stop "close enough" to a snap-point. + + + + + IE only. Used to produce visual effects. + + + specifies the parameters of a flexible length: the positive and negative flexibility, and the preferred size. + + + Retrieves the value of the main size property as the used 'flex-basis'. + + + Expands to '0 0 auto'. + + + + + Aligns flex items along the cross axis of the current line of the flex container. + + + If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment. + + + The flex item’s margin box is centered in the cross axis within the line. + + + The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. + + + The cross-start margin edge of the flexbox item is placed flush with the cross-start edge of the line. + + + If the cross size property of the flexbox item is anything other than 'auto', this value is identical to 'start'. + + + + + Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. + + + The flex container’s main axis has the same orientation as the block axis of the current writing mode. + + + Same as 'column', except the main-start and main-end directions are swapped. + + + The flex container’s main axis has the same orientation as the inline axis of the current writing mode. + + + Same as 'row', except the main-start and main-end directions are swapped. + + + + + Specifies how flexbox items are placed in the flexbox. + + + The flex container’s main axis has the same orientation as the block axis of the current writing mode. + + + Same as 'column', except the main-start and main-end directions are swapped. + + + The flex container is single-line. + + + The flex container’s main axis has the same orientation as the inline axis of the current writing mode. + + + The flexbox is multi-line. + + + Same as 'wrap', except the cross-start and cross-end directions are swapped. + + + + + Allows the default alignment along the cross axis to be overridden for individual flex items. + + + Computes to the value of 'align-items' on the element’s parent, or 'stretch' if the element has no parent. On absolutely positioned elements, it computes to itself. + + + If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment. + + + The flex item’s margin box is centered in the cross axis within the line. + + + The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. + + + The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. + + + If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. + + + + + Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how 'justify-content' aligns individual items within the main-axis. + + + Lines are packed toward the center of the flex container. + + + Lines are evenly distributed in the flex container, with half-size spaces on either end. + + + Lines are packed toward the end of the flex container. + + + Lines are evenly distributed in the flex container. + + + Lines are packed toward the start of the flex container. + + + Lines stretch to take up the remaining space. + + + + + Controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. + + + Aligns flex items along the main axis of the current line of the flex container. + + + Flex items are packed toward the center of the line. + + + Flex items are evenly distributed in the line, with half-size spaces on either end. + + + Flex items are packed toward the end of the line. + + + Flex items are evenly distributed in the line. + + + Flex items are packed toward the start of the line. + + + + + Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in. + + + The flex container is single-line. + + + The flexbox is multi-line. + + + Same as 'wrap', except the cross-start and cross-end directions are swapped. + + + + + Makes a block container a region and associates it with a named flow. + + + The block container is not a CSS Region. + + + + + Places an element or its contents into a named flow. + + + The element is not moved to a named flow and normal CSS processing takes place. + + + + + Used to place grid items and explicitly defined grid cells in the Grid. + + + + + + + + Aligns the columns in a grid. + + + Places the center of the Grid Item's margin box at the center of the Grid Item's column. + + + Aligns the end edge of the Grid Item's margin box to the end edge of the Grid Item's column. + + + Aligns the starting edge of the Grid Item's margin box to the starting edge of the Grid Item's column. + + + Ensures that the Grid Item's margin box is equal to the size of the Grid Item's column. + + + + + Lays out the columns of the grid. + + + Specifies the number of columns to span. + + + Grid-layer is similar in concept to z-index, but avoids overloading the meaning of the z-index property, which is applicable only to positioned elements. + + + grid-row is used to place grid items and explicitly defined grid cells in the Grid. + + + + + + + + Aligns the rows in a grid. + + + Places the center of the Grid Item's margin box at the center of the Grid Item's row. + + + Aligns the end edge of the Grid Item's margin box to the end edge of the Grid Item's row. + + + Aligns the starting edge of the Grid Item's margin box to the starting edge of the Grid Item's row. + + + Ensures that the Grid Item's margin box is equal to the size of the Grid Item's row. + + + + + Lays out the columns of the grid. + + + Specifies the number of rows to span. + + + Specifies if properties should be adjusted in high contrast mode. + + + Properties will be adjusted as applicable. + + + No adjustments will be applied. + + + + + Specifies the minimum number of characters in a hyphenated word. + + + The user agent chooses a value that adapts to the current layout. + + + + + Indicates the maximum number of successive hyphenated lines in an element. + + + There is no limit. + + + + + Specifies the maximum amount of unfilled space (before justification) that may be left in the line box before hyphenation is triggered to pull part of a word from the next line back up into the current line. + + + Controls whether hyphenation is allowed to create more break opportunities within a line of text. + + + Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word. + + + Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities + + + Words are not broken at line breaks, even if characters inside the word suggest line break points. + + + + + Controls the state of the input method editor for text fields. + + + The input method editor is initially active; text entry is performed using it unless the user specifically dismisses it. + + + No change is made to the current input method editor state. This is the default. + + + The input method editor is disabled and may not be activated by the user. + + + The input method editor is initially inactive, but the user may activate it if they wish. + + + The IME state should be normal; this value can be used in a user style sheet to override the page setting. + + + + + Gets or sets the interpolation (resampling) method used to stretch images. + + + + + + + Sets or retrieves the composite document grid properties that specify the layout of text characters. + + + Any of the range of character values available to the -ms-layout-grid-char property. + + + Any of the range of line values available to the -ms-layout-grid-line property. + + + Any of the range of mode values available to the -ms-layout-grid-mode property. + + + Any of the range of type values available to the -ms-layout-grid-type property. + + + + + Sets or retrieves the size of the character grid used for rendering the text content of an element. + + + Largest character in the font of the element is used to set the character grid. + + + Default. No character grid is set. + + + + + Sets or retrieves the gridline value used for rendering the text content of an element. + + + Largest character in the font of the element is used to set the character grid. + + + Default. No grid line is set. + + + + + Gets or sets whether the text layout grid uses two dimensions. + + + Default. Both the char and line grid modes are enabled. This setting is necessary to fully enable the layout grid on an element. + + + Only a character grid is used. This is recommended for use with block-level elements, such as a blockquote, where the line grid is intended to be disabled. + + + Only a line grid is used. This is recommended for use with inline elements, such as a span, to disable the horizontal grid on runs of text that act as a single entity in the grid layout. + + + No grid is used. + + + + + Sets or retrieves the type of grid used for rendering the text content of an element. + + + Grid used for monospaced layout. All noncursive characters are treated as equal; every character is centered within a single grid space by default. + + + Default. Grid used for Japanese and Korean characters. + + + Grid used for Chinese, as well as Japanese (Genko) and Korean characters. Only the ideographs, kanas, and wide characters are snapped to the grid. + + + + + Specifies what set of line breaking restrictions are in effect within the element. + + + The UA determines the set of line-breaking restrictions to use for CJK scripts, and it may vary the restrictions based on the length of the line; e.g., use a less restrictive set of line-break rules for short lines. + + + Sequences of CJK characters can no longer break on implied break points. This option should only be used where the presence of word separator characters still creates line-breaking opportunities, as in Korean. + + + Breaks CJK scripts using the least restrictive set of line-breaking rules. Typically used for short lines, such as in newspapers. + + + Breaks CJK scripts using a normal set of line-breaking rules. + + + Breaks CJK scripts using a more restrictive set of line-breaking rules than 'normal'. + + + + + Specify whether content is clipped when it overflows the element's content area. + + + No preference, UA should use the first scrolling method in the list that it supports. + + + Indicates the element displays auto-hiding scrollbars during mouse interactions and panning indicators during touch and keyboard interactions. + + + Indicates the element does not display scrollbars or panning indicators, even when its content overflows. + + + Scrollbars are typically narrow strips inserted on one or two edges of an element and which often have arrows to click on and a "thumb" to drag up and down (or left and right) to move the contents of the element. + + + + + Applies the same transform as the perspective(<number>) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself. + + + No perspective transform is applied. + + + + + Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element. + + + Establishes the origin for the perspective property. It effectively sets the X position at which the viewer appears to be looking at the children of the element. + + + Establishes the origin for the perspective property. It effectively sets the Y position at which the viewer appears to be looking at the children of the element. + + + Gets or sets a value that specifies whether a progress control displays as a bar or a ring. + + + + + + + Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. + + + Determines the color of the arrow elements of a scroll arrow. + + + Determines the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows. + + + Determines the color of the gutter of a scroll bar. + + + Determines the color of the scroll box and scroll arrows of a scroll bar. + + + Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. + + + Determines the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. + + + Determines the color of the track element of a scroll bar. + + + Gets or sets a value that indicates the scrolling behavior that occurs when a user hits the content boundary during a manipulation. + + + + + + + Gets or sets a shorthand value that sets values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-max, and -ms-scroll-limit-y-max properties. + + + + + + Gets or sets a value that specifies the maximum value for the scrollLeft property. + + + + + + Gets or sets a value that specifies the minimum value for the scrollLeft property. + + + Gets or sets a value that specifies the maximum value for the scrollTop property. + + + + + + Gets or sets a value that specifies the minimum value for the scrollTop property. + + + Gets or sets a value that indicates whether or not small motions perpendicular to the primary axis of motion will result in either changes to both the scrollTop and scrollLeft properties or a change to the primary axis (for instance, either the scrollTop or scrollLeft properties will change, but not both). + + + + + + + Gets or sets a value that defines where snap-points will be located along the x-axis. + + + + + + + Gets or sets a value that defines where snap-points will be located along the y-axis. + + + + + + + Gets or sets a value that defines what type of snap-point should be used for the current element. There are two type of snap-points, with the primary difference being whether or not the user is guaranteed to always stop on a snap-point. + + + The visual viewport of this scroll container must ignore snap points, if any, when scrolled. + + + The visual viewport of this scroll container is guaranteed to rest on a snap point when there are no active scrolling operations. + + + The visual viewport of this scroll container may come to rest on a snap point at the termination of a scroll at the discretion of the UA given the parameters of the scroll. + + + + + Gets or sets a shorthand value that sets values for the -ms-scroll-snap-type and -ms-scroll-snap-points-x properties. + + + + + + + + + + Gets or sets a shorthand value that sets values for the -ms-scroll-snap-type and -ms-scroll-snap-points-y properties. + + + + + + + + + + Gets or sets a value that specifies whether vertical-to-horizontal scroll wheel translation occurs on the specified element. + + + + + + + Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'. + + + + The inline contents are centered within the line box. + + + The inline contents are aligned to the end edge of the line box. + + + The text is justified according to the method specified by the 'text-justify' property. + + + The inline contents are aligned to the left edge of the line box. In vertical text, 'left' aligns to the edge of the line box that would be the start edge for left-to-right text. + + + The inline contents are aligned to the right edge of the line box. In vertical text, 'right' aligns to the edge of the line box that would be the end edge for left-to-right text. + + + The inline contents are aligned to the start edge of the line box. + + + + + Determines whether or not a full-width punctuation mark character should be trimmed if it appears at the beginning of a line, so that its 'ink' lines up with the first glyph in the line above and below. + + + Creates 1/4em extra spacing between runs of ideographic letters and non-ideographic letters, such as Latin-based, Cyrillic, Greek, Arabic or Hebrew. + + + Creates 1/4em extra spacing between runs of ideographic letters and numeric glyphs. + + + Creates extra spacing between normal (non wide) parenthesis and ideographs. + + + Extends the width of the space character while surrounded by ideographs. + + + No extra space is created. + + + Creates extra non-breaking spacing around punctuation as required by language-specific typographic conventions. + + + + + This property specifies the combination of multiple characters into the space of a single character. + + + Attempt to typeset horizontally all consecutive characters within the box such that they take up the space of a single character within the vertical line box. + + + Attempt to typeset horizontally each maximal sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer such that it takes up the space of a single character within the vertical line box. + + + No special processing. + + + + + Selects the justification algorithm used when 'text-align' is set to 'justify'. The property applies to block containers, but the UA may (but is not required to) also support it on inline elements. + + + The UA determines the justification algorithm to follow, based on a balance between performance and adequate presentation quality. + + + Justification primarily changes spacing both at word separators and at grapheme cluster boundaries in all scripts except those in the connected and cursive groups. This value is sometimes used in e.g. Japanese, often with the 'text-align-last' property. + + + Justification primarily changes spacing at word separators and at grapheme cluster boundaries in clustered scripts. This value is typically used for Southeast Asian scripts such as Thai. + + + Justification primarily changes spacing at word separators and at inter-graphemic boundaries in scripts that use no word spaces. This value is typically used for CJK languages. + + + Justification primarily changes spacing at word separators. This value is typically used for languages that separate words using spaces, like English or (sometimes) Korean. + + + Justification primarily stretches Arabic and related scripts through the use of kashida or other calligraphic elongation. + + + Justification is disabled. + + + Specifies that compression is preferred to expansion and enables the trimming of blank space in glyphs where allowed by typographic tradition. + + + + + Sets or retrieves the ratio of kashida expansion to white space expansion when justifying lines of text in the object. + + + Text can overflow for example when it is prevented from wrapping + + + Clip inline content that overflows. Characters may be only partially rendered. + + + Render an ellipsis character (U+2026) to represent clipped inline content. + + + + + Specifies a size adjustment for displaying text content in mobile browsers. + + + Renderers must use the default size adjustment when displaying on a small device. + + + Renderers must not do size adjustment when displaying on a small device. + + + + + Sets the position of an underline specified on the same element: it does not affect underlines specified by ancestor elements.This property is typically used in vertical writing contexts such as in Japanese documents where it often desired to have the underline appear 'over' (to the right of) the affected run of text + + + The underline is aligned with the alphabetic baseline. In this case the underline is likely to cross some descenders. + + + The user agent may use any algorithm to determine the underline's position. In horizontal line layout, the underline should be aligned as for alphabetic. In vertical line layout, if the language is set to Japanese or Korean, the underline should be aligned as for over. + + + The underline is aligned with the 'top' (right in vertical writing) edge of the element's em-box. In this mode, an overline also switches sides. + + + The underline is aligned with the 'bottom' (left in vertical writing) edge of the element's em-box. In this case the underline usually does not cross the descenders. This is sometimes called 'accounting' underline. + + + + + Gets or sets a value that indicates whether and how a given region can be manipulated by the user. + + + The element is a passive element, with several exceptions. + + + The element will zoom on double-tap. + + + The element is a manipulation-causing element. + + + The element is a manipulation-blocking element. + + + The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content. + + + The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content. + + + The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content. + + + + + Gets or sets a value that toggles the 'gripper' visual elements that enable touch text selection. + + + Grippers are always on. + + + Grippers are always off. + + + + + A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG. + + + Specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f] + + + Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order. + + + + Specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. + + + Specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters. + + + Specifies a clockwise rotation by the given angle about the X axis. + + + Specifies a clockwise rotation by the given angle about the Y axis. + + + Specifies a clockwise rotation by the given angle about the Z axis. + + + Specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. + + + Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters. + + + Specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. + + + Specifies a scale operation using the [sy,1] scaling vector, where sy is given as the parameter. + + + Specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter. + + + Specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie: no skew on the Y axis). + + + Specifies a skew transformation along the X axis by the given angle. + + + Specifies a skew transformation along the Y axis by the given angle. + + + Specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. + + + Specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively. + + + Specifies a translation by the given amount in the X direction. + + + Specifies a translation by the given amount in the Y direction. + + + Specifies a translation by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0. + + + + + Establishes the origin of transformation for an element. + + + The x coordinate of the origin for transforms applied to an element with respect to its border box. + + + The y coordinate of the origin for transforms applied to an element with respect to its border box. + + + The z coordinate of the origin for transforms applied to an element with respect to its border box. + + + Controls the appearance of selection. + + + + + + + + Specifies line break opportunities for non-CJK scripts. + + + Lines may break between any two grapheme clusters for non-CJK scripts. + + + Block characters can no longer create implied break points. + + + Breaks non-CJK scripts according to their own rules. + + + + + Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit. + + + An unbreakable 'word' may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. + + + An unbreakable 'word' may be hyphenated if there are no otherwise-acceptable break points in the line even if hyphenation is turned off. + + + Lines may break only at allowed break points. + + + + + An element becomes an exclusion when its 'wrap-flow' property has a computed value other than 'auto'. + + + For floats an exclusion is created, for all other elements an exclusion is not created. + + + Inline flow content can flow on all sides of the exclusion. + + + Inline flow content can only wrap on top and bottom of the exclusion and must leave the areas to the start and end edges of the exclusion box empty. + + + Inline flow content can wrap on the end side of the exclusion area but must leave the area to the start edge of the exclusion area empty. + + + Inline flow content can wrap on the side of the exclusion with the largest available space for the given line, and must leave the other side of the exclusion empty. + + + Inline flow content can flow around the edge of the exclusion with the smallest available space within the flow content’s containing block, and must leave the other edge of the exclusion empty. + + + Inline flow content can wrap on the start edge of the exclusion area but must leave the area to end edge of the exclusion area empty. + + + + + Gets or sets a value that is used to offset the inner wrap shape from other shapes. + + + Specifies if an element inherits its parent wrapping context. In other words if it is subject to the exclusions defined outside the element. + + + The exclusion element does not inherit its parent node's wrapping context. Its descendants are only subject to exclusion shapes defined inside the element. + + + The exclusion element inherits its parent node's wrapping context. Its descendant inline content wraps around exclusions defined outside the element. + + + + + Shorthand property for both 'direction' and 'block-progression'. + + + + + + + + + + + + + Sets or retrieves the magnification scale of the object. + + + + + + Gets or sets a value that indicates whether an animation is used when zooming. + + + + + + + Provides an way to control directional focus navigation. + + + The user agent automatically determines which element to navigate the focus to in response to directional navigational input. + + + Indicates that the user agent should target the frame that the element is in. + + + Indicates that the user agent should target the full window. + + + + + Provides an input-method-neutral way of specifying the sequential navigation order (also known as 'tabbing order'). + + + The element's sequential navigation order is assigned automatically by the user agent. + + + + + Provides an way to control directional focus navigation. + + + The user agent automatically determines which element to navigate the focus to in response to directional navigational input. + + + Indicates that the user agent should target the frame that the element is in. + + + Indicates that the user agent should target the full window. + + + + + Provides an way to control directional focus navigation. + + + The user agent automatically determines which element to navigate the focus to in response to directional navigational input. + + + Indicates that the user agent should target the frame that the element is in. + + + Indicates that the user agent should target the full window. + + + + + Provides an way to control directional focus navigation. + + + The user agent automatically determines which element to navigate the focus to in response to directional navigational input. + + + Indicates that the user agent should target the frame that the element is in. + + + Indicates that the user agent should target the full window. + + + + + @counter-style descriptor. Defines how to alter the representation when the counter value is negative. + + + Shorthand property combines six of the animation properties into a single property. + + + The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. + + + The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. + + + The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'. + + + Both forwards and backwards fill modes are applied. + + + The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. + + + Causes the animation to repeat forever. + + + No animation is performed + + + Normal playback. + + + All iterations of the animation are played in the reverse direction from the way they were specified. + + + + + Defines when the animation will start. + + + Defines whether or not the animation should play in reverse on alternate cycles. + + + The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. + + + The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. + + + Normal playback. + + + All iterations of the animation are played in the reverse direction from the way they were specified. + + + + + Defines the length of time that an animation takes to complete one cycle. + + + Defines what values are applied by the animation outside the time it is executing. + + + The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'. + + + Both forwards and backwards fill modes are applied. + + + The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. + + + There is no change to the property value between the time the animation is applied and the time the animation begins playing or after the animation completes. + + + + + Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once. + + + Causes the animation to repeat forever. + + + + + Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. + + + No animation is performed + + + + + Defines whether the animation is running or paused. + + + A running animation will be paused. + + + Resume playback of a paused animation. + + + + + Describes how the animation will progress over one cycle of its duration. See the 'transition-timing-function'. + + + Specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width. + + + The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element's used width and height. + + + The replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height. + + + The replaced content is sized to fill the element’s content box: the object's concrete object size is the element's used width and height. + + + The replaced content is not resized to fit inside the element's content box + + + Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size. + + + + + Determines the alignment of the replaced element inside its box. + + + Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values. + + + If 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead. + + + Causes the middle part of the border-image to be preserved. + + + + The image is tiled (repeated) to fill the area. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles. + + + The image is stretched to fill the area. + + + + + Specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width. + + + The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element's used width and height. + + + The replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height. + + + The replaced content is sized to fill the element’s content box: the object's concrete object size is the element's used width and height. + + + The replaced content is not resized to fit inside the element's content box + + + Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size. + + + + + Determines the alignment of the replaced element inside its box. + + + Opacity of an element's text, where 1 is opaque and 0 is entirely transparent. + + + Controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. + + + Specifies the minimum number of line boxes in a block container that must be left in a fragment before a fragmentation break. + + + Determines which row of a inline-table should be used as baseline of inline-table. + + + This property determines the width of the tab character (U+0009), in space characters (U+0020), when rendered. + + + Text can overflow for example when it is prevented from wrapping + + + Clip inline content that overflows. Characters may be only partially rendered. + + + Render an ellipsis character (U+2026) to represent clipped inline content. + + + + + A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG. + + + Specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f] + + + Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order. + + + + Specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. + + + Specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters. + + + Specifies a clockwise rotation by the given angle about the X axis. + + + Specifies a clockwise rotation by the given angle about the Y axis. + + + Specifies a clockwise rotation by the given angle about the Z axis. + + + Specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. + + + Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters. + + + Specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. + + + Specifies a scale operation using the [sy,1] scaling vector, where sy is given as the parameter. + + + Specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter. + + + Specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie: no skew on the Y axis). + + + Specifies a skew transformation along the X axis by the given angle. + + + Specifies a skew transformation along the Y axis by the given angle. + + + Specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. + + + Specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively. + + + Specifies a translation by the given amount in the X direction. + + + Specifies a translation by the given amount in the Y direction. + + + Specifies a translation by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0. + + + + + Establishes the origin of transformation for an element. + + + Shorthand property combines four of the transition properties into a single property. + + + Every property that is able to undergo a transition will do so. + + + No property will transition. + + + + + Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied. + + + Specifies how long the transition from the old value to the new value should take. + + + Specifies the name of the CSS property to which the transition is applied. + + + Every property that is able to undergo a transition will do so. + + + No property will transition. + + + + + Describes how the intermediate values used during a transition will be calculated. + + + Logical 'bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. + + + + + Logical 'top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. + + + + + Logical 'right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. + + + + + Logical 'left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. + + + + + @viewport descriptor. Used to request that a document is displayed in portrait or landscape mode. + + + The UA automatically chooses the orientation based on the device’s normal mode of operation. + + + The document should be locked to landscape presentation. + + + The document should be locked to portrait presentation. + + + + + Shorthand property for 'outline-style', 'outline-width', and 'outline-color'. + + + Permits the user agent to render a custom outline style, typically the default platform style. + + + Performs a color inversion on the pixels on the screen. + + + + + The color of the outline. + + + Performs a color inversion on the pixels on the screen. + + + + + Offset the outline and draw it beyond the border edge. + + + Style of the outline. + + + Permits the user agent to render a custom outline style, typically the default platform style. + + + + + Width of the outline. + + + Shorthand for setting 'overflow-x' and 'overflow-y'. + + + The behavior of the 'auto' value is UA-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes. + + + Behaves as 'hidden' except forbids scrolling entirely, through any mechanism. + + + Content is clipped and no scrolling mechanism should be provided to view the content outside the clipping region. + + + Same as the standardized 'clip', except doesn’t establish a block formatting context. + + + Content is clipped and if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. + + + Content is not clipped, i.e., it may be rendered outside the content box. + + + + + Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box. + + + An otherwise unbreakable sequence of characters may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. + + + Lines may break only at allowed break points. + + + + + Specifies the handling of overflow in the horizontal direction. + + + The behavior of the 'auto' value is UA-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes. + + + Behaves as 'hidden' except forbids scrolling entirely, through any mechanism. + + + Content is clipped and no scrolling mechanism should be provided to view the content outside the clipping region. + + + Content is clipped and if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. + + + Content is not clipped, i.e., it may be rendered outside the content box. + + + + + Specifies the handling of overflow in the vertical direction. + + + The behavior of the 'auto' value is UA-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes. + + + Behaves as 'hidden' except forbids scrolling entirely, through any mechanism. + + + Content is clipped and no scrolling mechanism should be provided to view the content outside the clipping region. + + + Content is clipped and if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. + + + Content is not clipped, i.e., it may be rendered outside the content box. + + + + + @counter-style descriptor. Specifies a “fixed-width” counter style, where representations shorter than the pad value are padded with a particular <symbol> + + + Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + Indicates that the values map to the logical properties instead of the physical ones. + + + + + Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + Logical 'padding-bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'padding-top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'padding-right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Logical 'padding-left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'. + + + Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + Shorthand property to set values the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative. + + + Specifies a particular type of page (called a named page) on which an element must be displayed. + + + Used value is the value specified on its nearest ancestor with a non-auto value. + + + + + Defines rules for page breaks after an element. + + + Always force a page break after the generated box. + + + Neither force nor forbid a page break after generated box. + + + Avoid a page break after the generated box. + + + Force one or two page breaks after the generated box so that the next page is formatted as a left page. + + + Equivalent to right in left-to-right page progressions and left in right-to-left page progressions. + + + Force one or two page breaks after the generated box so that the next page is formatted as a right page. + + + Equivalent to left in left-to-right page progressions and right in right-to-left page progressions. + + + + + Defines rules for page breaks before an element. + + + Always force a page break before the generated box. + + + Neither force nor forbid a page break before the generated box. + + + Avoid a page break before the generated box. + + + Force one or two page breaks before the generated box so that the next page is formatted as a left page. + + + Force one or two page breaks before the generated box so that the next page is formatted as a right page. + + + + + Defines rules for page breaks inside an element. + + + Neither force nor forbid a page break inside the generated box. + + + Avoid a page break inside the generated box. + + + + + Determines which page-based occurrence of a given element is applied to a counter or string value. + + + Takes the value after the first state change in the counter or string during processing of the page. + + + Takes the value following the final state change on the page. + + + Takes the value of the counter or string at the beginning of the page (before applying style to the elements of the page, but after applying it to the @page context itself). + + + + + Controls the order that the three paint operations that shapes and text are rendered with: their fill, their stroke and any markers they might have. + + + + + The element is painted with the standard order of painting operations: the 'fill' is painted first, then its 'stroke' and finally its markers. + + + + + + Shorthand for setting 'pause-before' and 'pause-after'. If two values are given, the first value is 'pause-before' and the second is 'pause-after'. If only one value is given, it applies to both properties. + + + A medium pause in speech output. The exact time is implementation-dependent. + + + Equivalent to 0ms. + + + A strong pause in speech output. The exact time is implementation-dependent. + + + A weak pause in speech output. The exact time is implementation-dependent. + + + An extra strong pause in speech output. The exact time is implementation-dependent. + + + An extra weak pause in speech output. The exact time is implementation-dependent. + + + + + Specifies a pause or prosodic boundary to be observed after an element or, if any 'cue-after' is specified, after these. Values indicate the prosodic strength of the break in speech output. + + + A medium pause in speech output. The exact time is implementation-dependent. + + + Equivalent to 0ms. + + + A strong pause in speech output. The exact time is implementation-dependent. + + + A weak pause in speech output. The exact time is implementation-dependent. + + + An extra strong pause in speech output. The exact time is implementation-dependent. + + + An extra weak pause in speech output. The exact time is implementation-dependent. + + + + + Specifies a pause or prosodic boundary to be observed before an element or, if any 'cue-before' is specified, before these. Values indicate the prosodic strength of the break in speech output. + + + A medium pause in speech output. The exact time is implementation-dependent. + + + Equivalent to 0ms. + + + A strong pause in speech output. The exact time is implementation-dependent. + + + A weak pause in speech output. The exact time is implementation-dependent. + + + An extra strong pause in speech output. The exact time is implementation-dependent. + + + An extra weak pause in speech output. The exact time is implementation-dependent. + + + + + Applies the same transform as the perspective(<number>) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself. + + + No perspective transform is applied. + + + + + Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element. + + + Specifies under what circumstances a given element can be the target element for a pointer event. + + + The given element can be the target element for pointer events whenever the pointer is over either the interior or the perimeter of the element. + + + The given element can be the target element for pointer events whenever the pointer is over the interior of the element. + + + The given element does not receive pointer events. + + + The given element can be the target element for pointer events when the pointer is over a "painted" area. + + + The given element can be the target element for pointer events whenever the pointer is over the perimeter of the element. + + + The given element can be the target element for pointer events when the ‘visibility’ property is set to visible and the pointer is over either the interior or the perimete of the element. + + + The given element can be the target element for pointer events when the ‘visibility’ property is set to visible and when the pointer is over the interior of the element. + + + The given element can be the target element for pointer events when the ‘visibility’ property is set to visible and when the pointer is over a ‘painted’ area. + + + The given element can be the target element for pointer events when the ‘visibility’ property is set to visible and when the pointer is over the perimeter of the element. + + + + + + + The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's 'containing block'. + + + Center positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. + + + The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. + + + The box's position is calculated according to the 'absolute' model. + + + The box's position is calculated according to the 'absolute' model. + + + The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. + + + The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply. + + + The box's position is calculated according to the normal flow. Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. + + + The box's position is calculated according to the normal flow. Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. + + + + + @counter-style descriptor. Specifies a <symbol> that is prepended to the marker representation. + + + Specifies quotation marks for any number of embedded quotations. + + + The 'open-quote' and 'close-quote' values of the 'content' property produce no quotations marks, as if they were 'no-open-quote' and 'no-close-quote' respectively. + + + + + Describes the radius of the ‘circle’ element. + + + @counter-style descriptor. Defines the ranges over which the counter style is defined. + + + The range depends on the counter system. + + + If used as the first value in a range, it represents negative infinity; if used as the second value, it represents positive infinity. + + + + + Controls the behavior of the last region associated with a named flow. + + + Content flows as it would in a regular content box. + + + If the content fits within the CSS Region, then this property has no effect. + + + + + Specifies whether or not an element is resizable by the user, and if so, along which axis/axes. + + + The UA presents a bidirectional resizing mechanism to allow the user to adjust both the height and the width of the element. + + + Logical 'vertical' + + + The UA presents a unidirectional horizontal resizing mechanism to allow the user to adjust only the width of the element. + + + Logical 'horizontal' + + + The UA does not present a resizing mechanism on the element, and the user is given no direct manipulation mechanism to resize the element. + + + The UA presents a unidirectional vertical resizing mechanism to allow the user to adjust only the height of the element. + + + + + Shorthand for setting 'rest-before' and 'rest-after'. If two values are given, the first value is 'rest-before' and the second is 'rest-after'. If only one value is given, it applies to both properties. + + + A medium rest in speech output. The exact time is implementation-dependent. + + + Equivalent to 0ms. + + + A strong rest in speech output. The exact time is implementation-dependent. + + + A weak rest in speech output. The exact time is implementation-dependent. + + + An extra strong rest in speech output. The exact time is implementation-dependent. + + + An extra weak rest in speech output. The exact time is implementation-dependent. + + + + + Specifies a rest or prosodic boundary to be observed after an element’s content. + + + A medium rest in speech output. The exact time is implementation-dependent. + + + Equivalent to 0ms. + + + A strong rest in speech output. The exact time is implementation-dependent. + + + A weak rest in speech output. The exact time is implementation-dependent. + + + An extra strong rest in speech output. The exact time is implementation-dependent. + + + An extra weak rest in speech output. The exact time is implementation-dependent. + + + + + Specifies a rest or prosodic boundary to be observed before an element’s content. + + + A medium rest in speech output. The exact time is implementation-dependent. + + + Equivalent to 0ms. + + + A strong rest in speech output. The exact time is implementation-dependent. + + + A weak rest in speech output. The exact time is implementation-dependent. + + + An extra strong rest in speech output. The exact time is implementation-dependent. + + + An extra weak rest in speech output. The exact time is implementation-dependent. + + + + + Specifies how far an absolutely positioned box's right margin edge is offset to the left of the right edge of the box's 'containing block'. + + + For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well + + + + + Rotates a block-level element counterclockwise around the point given by 'rotation-point'. + + + Pair of values that defines a point as an offset from the top left border edge. Initial value is 50% 50%. + + + Specifies how text is distributed within the various ruby boxes when their contents do not exactly fill their respective boxes. + + + The user agent determines how the ruby contents are aligned. This is the initial value. + + + The ruby content is centered within its box. + + + If the width of the ruby text is smaller than that of the base, then the ruby text contents are evenly distributed across the width of the base, with the first and last ruby text glyphs lining up with the corresponding first and last base glyphs. If the width of the ruby text is at least the width of the base, then the letters of the base are evenly distributed across the width of the ruby text. + + + If the width of the ruby text is smaller than that of the base, then the ruby text contents are evenly distributed across the width of the base, with a certain amount of white space preceding the first and following the last character in the ruby text. That amount of white space is normally equal to half the amount of inter-character space of the ruby text. + + + The ruby text content is aligned with the start edge of the base. + + + If the ruby text is not adjacent to a line edge, it is aligned as in 'auto'. If it is adjacent to a line edge, then it is still aligned as in auto, but the side of the ruby text that touches the end of the line is lined up with the corresponding edge of the base. + + + The ruby text content is aligned with the end edge of the base. + + + The ruby text content is aligned with the start edge of the base. + + + The ruby content expands as defined for normal text justification (as defined by 'text-justify'), + + + As for 'space-between' except that there exists an extra justification opportunities whose space is distributed half before and half after the ruby content. + + + + + Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base. + + + The ruby text can overhang text adjacent to the base on either side. This is the initial value. + + + The ruby text can overhang the text that follows it. + + + The ruby text cannot overhang any text adjacent to its base, only its own base. + + + The ruby text can overhang the text that precedes it. + + + + + Used by the parent of elements with display: ruby-text to control the position of the ruby text with respect to its base. + + + The ruby text appears after the base. This is a relatively rare setting used in ideographic East Asian writing systems, most easily found in educational text. + + + The ruby text appears before the base. This is the most common setting used in ideographic East Asian writing systems. + + + + The ruby text appears on the right of the base. Unlike 'before' and 'after', this value is not relative to the text flow direction. + + + + + Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base. + + + The value of attribute 'x' is a string value. The string value is evaluated as a <number> to determine the number of ruby base elements to be spanned by the annotation element. + + + No spanning. The computed value is '1'. + + + + + Describes the horizontal radius of the ‘ellipse’ element, and the curve radius of the 'rect' element. + + + Describes the vertical radius of the ‘ellipse’ element, and the curve radius of the 'rect' element. + + + Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. + + + Determines the color of the arrow elements of a scroll arrow. + + + Determines the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows. + + + Determines the color of the gutter of a scroll bar. + + + Determines the color of the scroll box and scroll arrows of a scroll bar. + + + Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. + + + Determines the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. + + + Determines the color of the track element of a scroll bar. + + + Specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. + + + Scrolls in an instant fashion. + + + Scrolls in a smooth fashion using a user-agent-defined timing function and time period. + + + + + Defines the x and y coordinate within the element which will align with the nearest ancestor scroll container’s snap-destination for the respective axis. + + + Specifies that this element does not contribute a snap point. + + + Specifies the offset of the snap coordinate from the start edge of the element’s border box. + + + Specifies the offset of the snap coordinate from the start edge of the element’s margin box. + + + + + Define the x and y coordinate within the scroll container’s visual viewport which element snap points will align with. + + + Defines the positioning of snap points along the x axis of the scroll container it is applied to. + + + No snap points are defined by this scroll container. + + + Defines an interval at which snap points are defined, starting from the container’s relevant start edge. + + + + + Defines the positioning of snap points alobg the y axis of the scroll container it is applied to. + + + No snap points are defined by this scroll container. + + + Defines an interval at which snap points are defined, starting from the container’s relevant start edge. + + + + + Defines how strictly snap points are enforced on the scroll container. + + + The visual viewport of this scroll container must ignore snap points, if any, when scrolled. + + + The visual viewport of this scroll container is guaranteed to rest on a snap point when there are no active scrolling operations. + + + The visual viewport of this scroll container may come to rest on a snap point at the termination of a scroll at the discretion of the UA given the parameters of the scroll. + + + + + 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. + + + Adds one or more exclusion areas to the element’s wrapping context. + + + The shape is computed based on the content box of the element. + + + The shape is computed based on the shape of the display as described in css-round-display. + + + The background is painted within (clipped to) the margin box. + + + The shape is computed based on the shape defined by the shape-outside and shape-margin properties. + + + If an SVG element it defines the shape. If an image, the shape is extracted and computed based on the alpha channel. + + + + + 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. + + + Specifies an orthogonal rotation to be applied to an image before it is laid out. + + + The background is painted within (clipped to) the margin box. + + + The float area is unaffected. + + + + + Adds padding to a 'shape-inside'. + + + Provides hints about what tradeoffs to make as it renders vector graphics elements such as <path> elements and basic shapes such as circles and rectangles. + + + Suppresses aural rendering. + + + Emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. + + + Emphasize geometric precision over speed and crisp edges. + + + Emphasize rendering speed over geometric precision and crisp edges. + + + + + + Specifies whether text will be rendered aurally and if so, in what manner. + + + Computed to 'none' if 'display' is 'none', otherwise 'auto'. + + + Suppresses aural rendering. + + + The element is rendered aurally. + + + + + Determines in what manner text gets rendered aurally, based upon a basic predefined list of possibilities. + + + Speak numbers one digit at a time. + + + Punctuation such as semicolons, braces, and so on is named aloud (i.e. spoken literally) rather than rendered naturally as appropriate pauses. + + + Punctuation is not rendered: neither spoken nor rendered as pauses. + + + Uses language-dependent pronunciation rules for rendering the element’s content. + + + Spells the text one letter at a time. + + + + + @font-face descriptor. Specifies the resource containing font data. It is required, whether the font is downloadable or locally installed. + + + Reference font by URL + + + Optional hint describing the format of the font resource. + + + Format-specific string that identifies a locally available copy of a given font. + + + + + Indicates what color to use at that gradient stop. + + + Defines the opacity of a given gradient stop. + + + Paints along the outline of the given graphical element. + + + A reference to the last child paint server element of the element being painted. + + + A reference to the nth child paint server element of the element being painted. + + + The computed value of the ‘fill’ property of the context element of the element being painted. + + + The computed value of the ‘stroke’ property of the context element of the element being painted. + + + A URL reference to a paint server element, which is an element that defines a paint server: ‘hatch’, ‘linearGradient’, ‘mesh’, ‘pattern’, ‘radialGradient’ and ‘solidcolor’. + + + No paint is applied in this layer. + + + + + Controls the pattern of dashes and gaps used to stroke paths. + + + Indicates that no dashing is used. + + + + + Specifies the distance into the dash pattern to start the dash. + + + Specifies the shape to be used at the end of open subpaths when they are stroked. + + + Indicates that the stroke for each subpath does not extend beyond its two endpoints. + + + Indicates that at each end of each subpath, the shape representing the stroke will be extended by a half circle with a radius equal to the stroke width. + + + Indicates that at the end of each subpath, the shape representing the stroke will be extended by a rectangle with the same width as the stroke width and whose length is half of the stroke width. + + + + + Specifies the shape to be used at the corners of paths or basic shapes when they are stroked. + + + Indicates that an arcs corner is to be used to join path segments. + + + Indicates that a bevelled corner is to be used to join path segments. + + + Indicates that a sharp corner is to be used to join path segments. + + + Same as miter but if the ‘stroke-miterlimit’ is exceeded, the miter is clipped at a miter length equal to the ‘stroke-miterlimit’ value multiplied by the stroke width. + + + Indicates that a round corner is to be used to join path segments. + + + + + When two line segments meet at a sharp angle and miter joins have been specified for 'stroke-linejoin', it is possible for the miter to extend far beyond the thickness of the line stroking the path. + + + Specifies the opacity of the painting operation used to stroke the current object. + + + Specifies the width of the stroke on the current object. + + + @counter-style descriptor. Specifies a <symbol> that is appended to the marker representation. + + + @counter-style descriptor. Specifies which algorithm will be used to construct the counter’s representation based on the counter value. + + + Represents “sign-value” numbering systems, which, rather than using reusing digits in different positions to change their value, define additional digits with much larger values, so that the value of the number can be obtained by adding all the digits together. + + + Interprets the list of counter symbols as digits to an alphabetic numbering system, similar to the default lower-alpha counter style, which wraps from "a", "b", "c", to "aa", "ab", "ac". + + + Cycles repeatedly through its provided symbols, looping back to the beginning when it reaches the end of the list. + + + Use the algorithm of another counter style, but alter other aspects. + + + Runs through its list of counter symbols once, then falls back. + + + interprets the list of counter symbols as digits to a "place-value" numbering system, similar to the default 'decimal' counter style. + + + Cycles repeatedly through its provided symbols, doubling, tripling, etc. the symbols on each successive pass through the list. + + + + + @counter-style descriptor. Specifies the symbols used by the marker-construction algorithm specified by the system descriptor. + + + Controls the algorithm used to lay out the table cells, rows, and columns. + + + Use any automatic table layout algorithm. + + + Use the fixed table layout algorithm. + + + + + Determines the width of the tab character (U+0009), in space characters (U+0020), when rendered. + + + Describes how inline contents of a block are horizontally aligned if the contents do not completely fill the line box. + + + The inline contents are centered within the line box. + + + The inline contents are aligned to the end edge of the line box. + + + The text is justified according to the method specified by the 'text-justify' property. + + + The inline contents are aligned to the left edge of the line box. In vertical text, 'left' aligns to the edge of the line box that would be the start edge for left-to-right text. + + + This value behaves the same as 'inherit' except that an inherited value of 'start' or 'end' is calculated against its parent's 'direction' value. + + + The inline contents are aligned to the right edge of the line box. In vertical text, 'right' aligns to the edge of the line box that would be the end edge for left-to-right text. + + + The inline contents are aligned to the start edge of the line box. + + + + + Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'. + + + Content on the affected line is aligned per 'text-align' unless 'text-align' is set to 'justify', in which case it is 'start-aligned'. + + + The inline contents are centered within the line box. + + + The inline contents are aligned to the end edge of the line box. + + + The text is justified according to the method specified by the 'text-justify' property. + + + The inline contents are aligned to the left edge of the line box. In vertical text, 'left' aligns to the edge of the line box that would be the start edge for left-to-right text. + + + The inline contents are aligned to the right edge of the line box. In vertical text, 'right' aligns to the edge of the line box that would be the end edge for left-to-right text. + + + The inline contents are aligned to the start edge of the line box. + + + + + Used to align (start-, middle- or end-alignment) a string of text relative to a given point. + + + The rendered characters are aligned such that the end of the resulting rendered text is at the initial current text position. + + + The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position. + + + The rendered characters are aligned such that the start of the resulting rendered text is at the initial current text position. + + + + + This property specifies the combination of multiple characters into the space of a single character. + + + Attempt to typeset horizontally all consecutive characters within the box such that they take up the space of a single character within the vertical line box. + + + Attempt to typeset horizontally each maximal sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer such that it takes up the space of a single character within the vertical line box. + + + No special processing. + + + + + Decorations applied to font used for an element's text. + + + Produces a dashed line style. + + + Produces a dotted line. + + + Produces a double line. + + + Each line of text has a line through the middle. + + + Produces no line. + + + Each line of text has a line above it. + + + Produces a solid line. + + + Each line of text is underlined. + + + Produces a wavy line. + + + + + Specifies the color of text decoration (underlines overlines, and line-throughs) set on the element with text-decoration-line. + + + Specifies what line decorations, if any, are added to the element. + + + Each line of text has a line through the middle. + + + Neither produces nor inhibits text decoration. + + + Each line of text has a line above it. + + + Each line of text is underlined. + + + + + Specifies what parts of the element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors. + + + Skip over the box’s margin, border, and padding areas. + + + Skip over where glyphs are drawn: interrupt the decoration line to let text show through where the text decoration would otherwise cross over a glyph. The UA may also skip a small distance to either side of the glyph outline. + + + Skip nothing: text-decoration is drawn for all text content and for inline replaced elements. + + + Skip this element if it is an atomic inline (such as an image or inline-block). + + + Skip white space: this includes regular spaces (U+0020) and tabs (U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed width spaces (such as U+2000–U+200A, U+202F and U+205F), and any adjacent letter-spacing or word-spacing. + + + + + Specifies the line style for underline, line-through and overline text decoration. + + + Produces a dashed line style. + + + Produces a dotted line. + + + Produces a double line. + + + Produces no line. + + + Produces a solid line. + + + Produces a wavy line. + + + + + Shorthand for setting text-emphasis-style and text-emphasis-color in one declaration. + + + Draw large circles as marks. The filled circle is U+25CF '●', and the open circle is U+25CB '○'. + + + Draw small circles as marks. The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'. + + + Draw double circles as marks. The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'. + + + The shape is filled with solid color. + + + No emphasis marks. + + + The shape is hollow. + + + Draw sesames as marks. The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'. + + + Draw triangles as marks. The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'. + + + + + Describes the foreground color of the emphasis marks. + + + Describes where emphasis marks are drawn at. + + + Draw marks over the text in horizontal typographic mode. + + + Draw marks under the text in horizontal typographic mode. + + + Draw marks to the left of the text in vertical typographic mode. + + + Draw marks to the right of the text in vertical typographic mode. + + + + + Applies emphasis marks to the element's text. + + + Draw large circles as marks. The filled circle is U+25CF '●', and the open circle is U+25CB '○'. + + + Draw small circles as marks. The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'. + + + Draw double circles as marks. The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'. + + + The shape is filled with solid color. + + + No emphasis marks. + + + The shape is hollow. + + + Draw sesames as marks. The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'. + + + Draw triangles as marks. The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'. + + + + + Specifies the indentation applied to lines of inline content in a block. The indentation only affects the first line of inline content in the block unless the 'hanging' keyword is specified, in which case it affects all lines except the first. + + + Indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a text wrap break. + + + Inverts which lines are affected. + + + + + Selects the justification algorithm used when 'text-align' is set to 'justify'. The property applies to block containers, but the UA may (but is not required to) also support it on inline elements. + + + The UA determines the justification algorithm to follow, based on a balance between performance and adequate presentation quality. + + + Justification primarily changes spacing both at word separators and at grapheme cluster boundaries in all scripts except those in the connected and cursive groups. This value is sometimes used in e.g. Japanese, often with the 'text-align-last' property. + + + + Justification adjusts spacing between each pair of adjacent typographic character units. + + + Justification primarily changes spacing at word separators and at grapheme cluster boundaries in clustered scripts. This value is typically used for Southeast Asian scripts such as Thai. + + + Justification primarily changes spacing at word separators and at inter-graphemic boundaries in scripts that use no word spaces. This value is typically used for CJK languages. + + + Justification primarily changes spacing at word separators. This value is typically used for languages that separate words using spaces, like English or (sometimes) Korean. + + + Justification primarily stretches Arabic and related scripts through the use of kashida or other calligraphic elongation. + + + + Justification is disabled. + + + + + Specifies the orientation of text within a line. + + + In vertical writing modes, characters from horizontal-only scripts are set sideways, i.e. 90° clockwise from their standard orientation in horizontal text. + + + This value is equivalent to 'sideways-right' in 'vertical-rl' writing mode and equivalent to 'sideways-left' in 'vertical-lr' writing mode. + + + In vertical writing modes, this causes text to be set as if in a horizontal layout, but rotated 90° counter-clockwise. + + + In vertical writing modes, this causes text to be set as if in a horizontal layout, but rotated 90° clockwise. + + + In vertical writing modes, characters from horizontal-only scripts are rendered upright, i.e. in their standard horizontal orientation. + + + This value deprecated and only applies to SVG. + + + + + Text can overflow for example when it is prevented from wrapping. + + + Clip inline content that overflows. Characters may be only partially rendered. + + + Render an ellipsis character (U+2026) to represent clipped inline content. + + + + + The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders text. The ‘text-rendering’ property provides these hints. + + + + Indicates that the user agent shall emphasize geometric precision over legibility and rendering speed. + + + Indicates that the user agent shall emphasize legibility over rendering speed and geometric precision. + + + Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. + + + + + Enables shadow effects to be applied to the text of the element. + + + No shadow. + + + + + Specifies a size adjustment for displaying text content in mobile browsers. + + + Renderers must use the default size adjustment when displaying on a small device. + + + Renderers must not do size adjustment when displaying on a small device. + + + + + Declares whether and how white space inside the element is collapsed. Values have the following meanings, which must be interpreted according to the white space processing rules. + + + Collapse sequences of white space into a single character + + + Discard all white space in the element. + + + Prevents collapsing sequences of white space. + + + As 'preserve', but matches platform conventions for editable text fields. + + + As 'preserve', but collapse the advance widths of all preserved white space at the end of a line. + + + Prevents collapsing sequences of white space, and converts tabs and segment breaks to spaces. + + + Discard whitespace at the start and end of the element. + + + + + Specifies trimming behavior at the beginning and end of a box. + + + Don’t discard whitepace. + + + Discard whitespace at the start and end of the element. + + + Collapse all collapsible whitespace immediately before the start of the element. + + + Collapse all collapsible whitespace immediately after the end of the element. + + + + + Controls spacing between adjacent characters on the same line within the same inline formatting context using a set of character-class-based rules. + + + Specifies the baseline behavior, equivalent to 'space-start allow-end trim-adjacent'. + + + Turns off all text-spacing features. All fullwidth characters are set with full-width glyphs. + + + Set fullwidth opening punctuation with half-width glyphs (flush) at the start of each line. + + + Set fullwidth opening punctuation with full-width glyphs (spaced) at the start of each line. + + + Set fullwidth closing punctuation with half-width glyphs (flush) at the end of each line. + + + Set fullwidth opening punctuation with full-width glyphs (spaced) at the start of each line. + + + Set fullwidth closing punctuation with half-width glyphs (flush) at the end of each line if it does not otherwise fit prior to justification; otherwise set the punctuation with full-width glyphs. + + + Collapse spacing between punctuation glyphs. + + + Set fullwidth opening punctuation with full-width glyphs (spaced) when not at the start of the line. Set fullwidth closing punctuation with full-width glyphs (spaced) when not at the end of the line. + + + Justification may not compress text-spacing. + + + Creates 1/4em extra spacing between runs of ideographs and non-ideographic letters. + + + Creates 1/4em extra spacing between runs of ideographs and non-ideographic numerals glyphs. + + + Creates extra non-breaking spacing around punctuation as required by language-specific typographic conventions. + + + + + Controls capitalization effects of an element’s text. + + + Puts the first typographic letter unit of each word in titlecase. + + + Puts all characters in fullwidth form. If the character does not have corresponding fullwidth form, it is left as is. + + + Puts all letters in lowercase. + + + No effects. + + + Puts all letters in uppercase. + + + + + Sets the position of an underline specified on the same element: it does not affect underlines specified by ancestor elements. This property is typically used in vertical writing contexts such as in Japanese documents where it often desired to have the underline appear 'over' (to the right of) the affected run of text + + + + The user agent may use any algorithm to determine the underline’s position. In horizontal line layout, the underline should be aligned as for alphabetic. In vertical line layout, if the language is set to Japanese or Korean, the underline should be aligned as for over. + + + The underline is aligned with the under edge of the element’s content box. + + + In vertical typographic modes, the underline is aligned as for 'below', on the left edge of the text. + + + In vertical typographic modes, the underline is aligned as for 'below', except it is aligned to the right edge of the text. + + + The underline is positioned under the element’s text content. + + + + + Specifies mode for text wrapping. + + + Same as normal for inline-level elements. For block-level elements that contain line boxes as direct children, line breaks are chosen to balance the inline-size those line boxes consume, if better balance than normal is possible. + + + Lines may break at allowed break points, as determined by the line-breaking rules in effect. Honors rules specified in Unicode Standard Annex #14 for the WJ, ZW, and GL line-breaking classes. + + + Lines may not break; text that does not fit within the block container overflows it. + + + + + Specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's 'containing block'. + + + For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well + + + + + Determines whether touch input may trigger default behavior supplied by user agent. + + + The user agent may determine any permitted touch behaviors for touches that begin on the element. + + + + + + The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. + + + Touches that begin on the element must not trigger default touch behaviors. + + + The user agent may consider touches that begin on the element only for the purposes of horizontally scrolling the element’s nearest ancestor with horizontally scrollable content. + + + The user agent may consider touches that begin on the element only for the purposes of vertically scrolling the element’s nearest ancestor with vertically scrollable content. + + + + + + A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG. + + + Specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f] + + + Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order. + + + + Specifies a perspective projection matrix. + + + Specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. + + + Specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters. + + + Specifies a clockwise rotation by the given angle about the X axis. + + + Specifies a clockwise rotation by the given angle about the Y axis. + + + Specifies a clockwise rotation by the given angle about the Z axis. + + + Specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. + + + Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters. + + + Specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. + + + Specifies a scale operation using the [sy,1] scaling vector, where sy is given as the parameter. + + + Specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter. + + + Specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie: no skew on the Y axis). + + + Specifies a skew transformation along the X axis by the given angle. + + + Specifies a skew transformation along the Y axis by the given angle. + + + Specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. + + + Specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively. + + + Specifies a translation by the given amount in the X direction. + + + Specifies a translation by the given amount in the Y direction. + + + Specifies a translation by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0. + + + + + All transformations defined by the 'transform' and 'transform-origin' property are relative to the position and dimension of the specified reference box. + + + Uses the border box as reference box. + + + Uses the object bounding box as reference box. + + + Uses the nearest SVG viewport as reference box. + + + + + Establishes the origin of transformation for an element. + + + Defines how nested elements are rendered in 3D space. + + + All children of this element are rendered flattened into the 2D plane of the element. + + + Flattening is not performed, so children maintain their position in 3D space. + + + + + Shorthand property combines four of the transition properties into a single property. + + + Every property that is able to undergo a transition will do so. + + + No property will transition. + + + + + Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied. + + + Specifies how long the transition from the old value to the new value should take. + + + Specifies the name of the CSS property to which the transition is applied. + + + Every property that is able to undergo a transition will do so. + + + No property will transition. + + + + + Describes how the intermediate values used during a transition will be calculated. + + + The level of embedding with respect to the bidirectional algorithm. + + + Inside the element, reordering is strictly in sequence according to the 'direction' property; the implicit part of the bidirectional algorithm is ignored. + + + If the element is inline-level, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the 'direction' property. + + + The contents of the element are considered to be inside a separate, independent paragraph. + + + This combines the isolation behavior of 'isolate' with the directional override behavior of 'bidi-override' + + + The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline-level elements, implicit reordering works across element boundaries. + + + For the purposes of the Unicode bidirectional algorithm, the base directionality of each bidi paragraph for which the element forms the containing block is determined not by the element's computed 'direction'. + + + + + @font-face descriptor. Defines the set of Unicode codepoints that may be supported by the font face for which it is declared. + + + Ampersand. + + + WGL4 character set (Pan-European). + + + The Multilingual European Subset No. 1. Latin. Covers ~44 languages. + + + The Multilingual European Subset No. 2. Latin, Greek, and Cyrillic. Covers ~128 language. + + + The Multilingual European Subset No. 3. Covers all characters belonging to European scripts. + + + Basic Latin (ASCII). + + + Latin-1 Supplement. Accented characters for Western European languages, common punctuation characters, multiplication and division signs. + + + Latin Extended-A. Accented characters for for Czech, Dutch, Polish, and Turkish. + + + Latin Extended-B. Croatian, Slovenian, Romanian, Non-European and historic latin, Khoisan, Pinyin, Livonian, Sinology. + + + Latin Extended Additional. Vietnamese, German captial sharp s, Medievalist, Latin general use. + + + International Phonetic Alphabet Extensions. + + + Greek and Coptic. + + + Greek Extended. Accented characters for polytonic Greek. + + + Cyrillic. + + + Cyrillic Supplement. Extra letters for Komi, Khanty, Chukchi, Mordvin, Kurdish, Aleut, Chuvash, Abkhaz, Azerbaijani, and Orok. + + + Latin, Greek, Cyrillic, some punctuation and symbols. + + + Armenian. + + + Hebrew. + + + Arabic. + + + Arabic Supplement. Additional letters for African languages, Khowar, Torwali, Burushaski, and early Persian. + + + Arabic Extended-A. Additional letters for African languages, European and Central Asian languages, Rohingya, Berber, Arwi, and Koranic annotation signs. + + + Syriac. + + + Devanagari. + + + Bengali. + + + Gurmukhi. + + + Gujarati. + + + Oriya. + + + Tamil. + + + Telugu. + + + Kannada. + + + Malayalam. + + + Sinhala. + + + Warang Citi. + + + Thai. + + + Tai Tham. + + + Tai Viet. + + + Lao. + + + Tibetan. + + + Myanmar (Burmese). + + + Georgian. + + + Ethiopic. + + + Ethiopic Supplement. Extra Syllables for Sebatbeit, and Tonal marks + + + Ethiopic Extended. Extra Syllables for Me'en, Blin, and Sebatbeit. + + + Ethiopic Extended-A. Extra characters for Gamo-Gofa-Dawro, Basketo, and Gumuz. + + + Khmer. + + + Mongolian. + + + Sundanese. + + + Sundanese Supplement. Punctuation. + + + CJK (Chinese, Japanese, Korean) Unified Ideographs. Most common ideographs for modern Chinese and Japanese. + + + CJK Unified Ideographs Extension A. Rare ideographs. + + + Kangxi Radicals. + + + CJK Radicals Supplement. Alternative forms of Kangxi Radicals. + + + Hangul Jamo. + + + Hangul Syllables. + + + Hiragana. + + + Katakana. + + + Japanese Kanji, Hiragana and Katakana characters plus Yen/Yuan symbol. + + + Lisu. + + + Yi Syllables. + + + Yi Radicals. + + + General Punctuation. + + + CJK Symbols and Punctuation. + + + Superscripts and Subscripts. + + + Currency Symbols. + + + Letterlike Symbols. + + + Number Forms. + + + Arrows. + + + Mathematical Operators. + + + Miscellaneous Technical. + + + Private Use Area. + + + Alphabetic Presentation Forms. Ligatures for latin, Armenian, and Hebrew. + + + Arabic Presentation Forms-A. Contextual forms / ligatures for Persian, Urdu, Sindhi, Central Asian languages, etc, Arabic pedagogical symbols, word ligatures. + + + Emoji: Emoticons. + + + Emoji: Miscellaneous Symbols. + + + Emoji: Miscellaneous Symbols and Pictographs. + + + Emoji: Supplemental Symbols and Pictographs. + + + Emoji: Transport and Map Symbols. + + + + + Controls the appearance of selection. + + + The content of the element must be selected atomically + + + + UAs must not allow a selection which is started in this element to be extended outside of this element. + + + The UA must not allow selections to be started in this element. + + + The element imposes no constraint on the selection. + + + + + @viewport descriptor. Specifies if the zoom factor can be changed by user interaction or not. + + + The user cannot interactively change the zoom factor. + + + The user can interactively change the zoom factor. + + + + + Affects the vertical positioning of the inline boxes generated by an inline-level element inside a line box. + + + The placement of local coordinate system is fixed in spite of change of CTMs from a host coordinate space. + + + Specifies that no vector effect shall be applied. + + + The rotation and skew of the local coordinate system is suppressd in spite of change of CTMs from a host coordinate space. + + + The scale of the local coordinate system do not change in spite of change of CTMs from a host coordinate space. + + + Modifies the way an object is stroked. Stroke outline shall be calculated in the “host” coordinate space instead of local coordinate system. + + + Specifies the coordinate system of content which is under the immediate control of the user agent. + + + Specifies immediate viewport coordinate system as the host coordinate space. + + + + + Affects the vertical positioning of the inline boxes generated by an inline-level element inside a line box. + + + Match the box’s alphabetic baseline to that of its parent. + + + Align the dominant baseline of the parent box with the equivalent, or heuristically reconstructed, baseline of the element inline box. + + + Align the 'alphabetic' baseline of the element with the 'alphabetic' baseline of the parent element. + + + Align the after edge of the extended inline box with the after-edge of the line box. + + + Align the center of the aligned subtree with the center of the line box. + + + Align the 'central' baseline of the inline element with the central baseline of the parent. + + + Match the box’s mathematical baseline to that of its parent. + + + Align the 'middle' baseline of the inline element with the middle baseline of the parent. + + + Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.) + + + Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.) + + + Align the bottom of the box with the after-edge of the parent element's font. + + + Align the top of the box with the before-edge of the parent element's font. + + + Align the before edge of the extended inline box with the before-edge of the line box. + + + + + + Specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the ‘display’ property to ‘none’ to suppress box generation altogether). + + + Table-specific. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'. + + + The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. + + + The generated box is visible. + + + + + Controls the spatial distribution of audio output across a lateral sound stage. + + + Same as '0'. + + + Same as '-100'. + + + Moves the sound to the left, by subtracting 20 from the inherited ‘voice-balance’ value, and by clamping the resulting number to ‘-100’. + + + Same as '100'. + + + Moves the sound to the right, by adding 20 to the inherited ‘voice-balance’ value, and by clamping the resulting number to ‘100’. + + + + + Specifies how long it should take to render the selected element's content (not including audio cues, pauses and rest). + + + Resolves to a used value corresponding to the duration of the speech synthesis when using the inherited ‘voice-rate’. + + + + + Comma-separated, prioritized list of voice family names (compare with 'font-family'). + + + Child voice for 'age'. + + + Female voice for 'generic-voice'. + + + Male voice for 'generic-voice'. + + + Neutral voice for 'generic-voice'. + + + Old person voice for 'age'. + + + Indicates that the ‘voice-family’ value gets inherited and used regardless of any potential language change within the markup. + + + Young person voice for 'age'. + + + + + Specifies the average pitch (a frequency) of the speaking voice. The average pitch of a voice depends on the voice family. For example, the average pitch for a standard male voice is around 120Hz, but for a female voice, it's around 210Hz. + + + Indicates that the specified frequency represents an absolute value. + + + High pitch. Exact level is implementation and voice specific. + + + Low pitch. Exact level is implementation and voice specific. + + + Medium pitch. Exact level is implementation and voice specific. + + + Extra High pitch. Exact level is implementation and voice specific. + + + Extra low pitch. Exact level is implementation and voice specific. + + + + + Specifies the variability in the “baseline” pitch, i.e. how much the fundamental frequency may deviate from the average pitch of the speech output. + + + Indicates that the specified frequency represents an absolute value. + + + High pitch. Exact level is implementation and voice specific. + + + Low pitch. Exact level is implementation and voice specific. + + + Medium pitch. Exact level is implementation and voice specific. + + + Extra High pitch. Exact level is implementation and voice specific. + + + Extra low pitch. Exact level is implementation and voice specific. + + + + + Controls the speaking rate. The default rate for a voice depends on the language and dialect and on the personality of the voice. + + + + Equivalent to 100% and means the normal rate for this voice. + + + + + + + + Indicates the strength of emphasis to be applied. Emphasis is indicated using a combination of pitch change, timing changes, loudness and other acoustic differences) that varies from one language to the next. + + + Monotonically non-decreasing in strength. More emphasis than what the speech synthesizer would normally produce. + + + Inhibits the synthesizer from emphasizing words it would normally emphasize. + + + Represents the default emphasis produced by the speech synthesizer. + + + Effectively the opposite of emphasizing a word. + + + Monotonically non-decreasing in strength. More emphasis than what the speech synthesizer would normally produce. + + + + + Controls the amplitude of the audio waveform generated by the speech synthesiser. + + + Intermediary value between 'meduyn and 'x-loud'. + + + The user's preferred volume level. + + + Specifies that no sound is generated. + + + Intermediary value between 'x-soft' and 'medium'. + + + The user’s maximum tolerable volume level. + + + The user’s minimum audible volume level. + + + + + Shorthand property combines six of the animation properties into a single property. + + + The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. + + + The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. + + + The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'. + + + Both forwards and backwards fill modes are applied. + + + The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. + + + Causes the animation to repeat forever. + + + No animation is performed + + + Normal playback. + + + All iterations of the animation are played in the reverse direction from the way they were specified. + + + + + Defines when the animation will start. + + + Defines whether or not the animation should play in reverse on alternate cycles. + + + The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. + + + The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. + + + Normal playback. + + + All iterations of the animation are played in the reverse direction from the way they were specified. + + + + + Defines the length of time that an animation takes to complete one cycle. + + + Defines what values are applied by the animation outside the time it is executing. + + + The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'. + + + Both forwards and backwards fill modes are applied. + + + The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. + + + There is no change to the property value between the time the animation is applied and the time the animation begins playing or after the animation completes. + + + + + Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once. + + + Causes the animation to repeat forever. + + + + + Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. + + + No animation is performed + + + + + Defines whether the animation is running or paused. + + + A running animation will be paused. + + + Resume playback of a paused animation. + + + + + Describes how the animation will progress over one cycle of its duration. See the 'transition-timing-function'. + + + Changes the appearance of buttons and other controls to resemble native controls. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Applies a filter effect where the first filter in the list takes the element's background image as the input image. + + + No filter effects are applied. + + + Applies a Gaussian blur to the input image. + + + Applies a linear multiplier to input image, making it appear more or less bright. + + + Adjusts the contrast of the input. + + + Applies a drop shadow effect to the input image. + + + Converts the input image to grayscale. + + + Applies a hue rotation on the input image. + + + Inverts the samples in the input image. + + + Applies transparency to the samples in the input image. + + + Saturates the input image. + + + Converts the input image to sepia. + + + A filter reference to a <filter> element. + + + + + Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer. + + + + + + + Determines the background painting area. + + + + + + + + + For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s). + + + Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values. + + + If 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead. + + + Causes the middle part of the border-image to be preserved. + + + + The image is tiled (repeated) to fill the area. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. + + + The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles. + + + The image is stretched to fill the area. + + + + + + Specifies the alignment of nested elements within an outer flexible box element. + + + If this box orientation is inline-axis or horizontal, all children are placed with their baselines aligned, and extra space placed before or after as necessary. For block flows, the baseline of the first non-empty line box located within the element is used. For tables, the baseline of the first cell is used. + + + Any extra space is divided evenly, with half placed above the child and the other half placed after the child. + + + For normal direction boxes, the bottom edge of each child is placed along the bottom of the box. Extra space is placed above the element. For reverse direction boxes, the top edge of each child is placed along the top of the box. Extra space is placed below the element. + + + For normal direction boxes, the top edge of each child is placed along the top of the box. Extra space is placed below the element. For reverse direction boxes, the bottom edge of each child is placed along the bottom of the box. Extra space is placed above the element. + + + The height of each child is adjusted to that of the containing block. + + + + + In webkit applications, -webkit-box-direction specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge). + + + A box with a computed value of horizontal for box-orient displays its children from left to right. A box with a computed value of vertical displays its children from top to bottom. + + + A box with a computed value of horizontal for box-orient displays its children from right to left. A box with a computed value of vertical displays its children from bottom to top. + + + + + Specifies an element's flexibility. + + + Flexible elements can be assigned to flex groups using the 'box-flex-group' property. + + + Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group. + + + In webkit applications, -webkit-box-orient specifies whether a box lays out its contents horizontally or vertically. + + + Elements are oriented along the box's axis. + + + The box displays its children from left to right in a horizontal line. + + + Elements are oriented vertically. + + + The box displays its children from stacked from top to bottom vertically. + + + + + Specifies alignment of child elements within the current element in the direction of orientation. + + + The extra space is divided evenly, with half placed before the first child and the other half placed after the last child. + + + For normal direction boxes, the right edge of the last child is placed at the right side, with all extra space placed before the first child. For reverse direction boxes, the left edge of the first child is placed at the left side, with all extra space placed after the last child. + + + The space is divided evenly in-between each child, with none of the extra space placed before the first child or after the last child. If there is only one child, treat the pack value as if it were start. + + + For normal direction boxes, the left edge of the first child is placed at the left side, with all extra space placed after the last child. For reverse direction boxes, the right edge of the last child is placed at the right side, with all extra space placed before the first child. + + + + + Defines a reflection of a border box. + + + The reflection appears above the border box. + + + The reflection appears below the border box. + + + The reflection appears to the left of the border box. + + + The reflection appears to the right of the border box. + + + + + Box Model addition in CSS3. + + + The specified width and height (and respective min/max properties) on this element determine the border box of the element. + + + Behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. + + + + + Describes the page/column break behavior before the generated box. + + + Always force a page break before/after the generated box. + + + Neither force nor forbid a page/column break before/after the generated box. + + + Avoid a page/column break before/after the generated box. + + + Avoid a column break before/after the generated box. + + + Avoid a page break before/after the generated box. + + + + Always force a column break before/after the generated box. + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a left page. + + + Always force a page break before/after the generated box. + + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a right page. + + + + + Describes the page/column break behavior before the generated box. + + + Always force a page break before/after the generated box. + + + Neither force nor forbid a page/column break before/after the generated box. + + + Avoid a page/column break before/after the generated box. + + + Avoid a column break before/after the generated box. + + + Avoid a page break before/after the generated box. + + + + Always force a column break before/after the generated box. + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a left page. + + + Always force a page break before/after the generated box. + + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a right page. + + + + + Describes the page/column break behavior inside the generated box. + + + Neither force nor forbid a page/column break inside the generated box. + + + Avoid a page/column break inside the generated box. + + + Avoid a column break inside the generated box. + + + Avoid a page break inside the generated box. + + + + + + Describes the page/column break behavior before the generated box. + + + Always force a page break before/after the generated box. + + + Neither force nor forbid a page/column break before/after the generated box. + + + Avoid a page/column break before/after the generated box. + + + Avoid a column break before/after the generated box. + + + Avoid a page break before/after the generated box. + + + + Always force a column break before/after the generated box. + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a left page. + + + Always force a page break before/after the generated box. + + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a right page. + + + + + Describes the page/column break behavior before the generated box. + + + Always force a page break before/after the generated box. + + + Neither force nor forbid a page/column break before/after the generated box. + + + Avoid a page/column break before/after the generated box. + + + Avoid a column break before/after the generated box. + + + Avoid a page break before/after the generated box. + + + + Always force a column break before/after the generated box. + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a left page. + + + Always force a page break before/after the generated box. + + + + Force one or two page breaks before/after the generated box so that the next page is formatted as a right page. + + + + + Describes the page/column break behavior inside the generated box. + + + Neither force nor forbid a page/column break inside the generated box. + + + Avoid a page/column break inside the generated box. + + + Avoid a column break inside the generated box. + + + Avoid a page break inside the generated box. + + + + + + Describes the optimal number of columns into which the content of the element will be flowed. + + + Determines the number of columns by the 'column-width' property and the element width. + + + + + Sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap. + + + User agent specific and typically equivalent to 1em. + + + + + This property is a shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values. + + + Sets the color of the column rule + + + Sets the style of the rule between columns of an element. + + + Sets the width of the rule between columns. Negative values are not allowed. + + + A shorthand property which sets both 'column-width' and 'column-count'. + + + The width depends on the values of other properties. + + + + + Describes the page/column break behavior after the generated box. + + + The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appear. + + + The element does not span multiple columns. + + + + + This property describes the width of columns in multicol elements. + + + The width depends on the values of other properties. + + + + + Processes an element’s rendering before it is displayed in the document, by applying one or more filter effects. + + + No filter effects are applied. + + + Applies a Gaussian blur to the input image. + + + Applies a linear multiplier to input image, making it appear more or less bright. + + + Adjusts the contrast of the input. + + + Applies a drop shadow effect to the input image. + + + Converts the input image to grayscale. + + + Applies a hue rotation on the input image. + + + Inverts the samples in the input image. + + + Applies transparency to the samples in the input image. + + + Saturates the input image. + + + Converts the input image to sepia. + + + A filter reference to a <filter> element. + + + + + Makes a block container a region and associates it with a named flow. + + + The block container is not a CSS Region. + + + + + Places an element or its contents into a named flow. + + + The element is not moved to a named flow and normal CSS processing takes place. + + + + + This property provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case. + + + + + + + + + + + + No change in glyph substitution or positioning occurs. + + + + + + + Controls whether hyphenation is allowed to create more break opportunities within a line of text. + + + Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word. + + + Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities + + + Words are not broken at line breaks, even if characters inside the word suggest line break points. + + + + + Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Determines the mask painting area, which determines the area that is affected by the mask. + + + Sets the mask layer image of an element. + + + Counts as a transparent black image layer. + + + Reference to a <mask element or to a CSS image. + + + + + Specifies the mask positioning area. + + + Specifies how mask layer images are tiled after they have been sized and positioned. + + + Specifies the size of the mask layer images. + + + Resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%. + + + Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. + + + Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. + + + + + Defines the behavior of nonbreaking spaces within text. + + + + + + + Specifies whether to use native-style scrolling in an overflow:scroll element. + + + + + + + + Applies the same transform as the perspective(<number>) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself. + + + No perspective transform is applied. + + + + + Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element. + + + The 'region-fragment' property controls the behavior of the last region associated with a named flow. + + + Content flows as it would in a regular content box. + + + If the content fits within the CSS Region, then this property has no effect. + + + + + + + + + Specifies a size adjustment for displaying text content in mobile browsers. + + + Renderers must use the default size adjustment when displaying on a small device. + + + Renderers must not do size adjustment when displaying on a small device. + + + + + + + + + + + + + + + + A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG. + + + Specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f] + + + Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order. + + + + Specifies a perspective projection matrix. + + + Specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. + + + Specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters. + + + Specifies a clockwise rotation by the given angle about the X axis. + + + Specifies a clockwise rotation by the given angle about the Y axis. + + + Specifies a clockwise rotation by the given angle about the Z axis. + + + Specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. + + + Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters. + + + Specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. + + + Specifies a scale operation using the [sy,1] scaling vector, where sy is given as the parameter. + + + Specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter. + + + Specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie: no skew on the Y axis). + + + Specifies a skew transformation along the X axis by the given angle. + + + Specifies a skew transformation along the Y axis by the given angle. + + + Specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. + + + Specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively. + + + Specifies a translation by the given amount in the X direction. + + + Specifies a translation by the given amount in the Y direction. + + + Specifies a translation by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0. + + + + + Establishes the origin of transformation for an element. + + + The x coordinate of the origin for transforms applied to an element with respect to its border box. + + + The y coordinate of the origin for transforms applied to an element with respect to its border box. + + + The z coordinate of the origin for transforms applied to an element with respect to its border box. + + + Defines how nested elements are rendered in 3D space. + + + All children of this element are rendered flattened into the 2D plane of the element. + + + Flattening is not performed, so children maintain their position in 3D space. + + + + + Shorthand property combines four of the transition properties into a single property. + + + Every property that is able to undergo a transition will do so. + + + No property will transition. + + + + + Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied. + + + Specifies how long the transition from the old value to the new value should take. + + + Specifies the name of the CSS property to which the transition is applied. + + + Every property that is able to undergo a transition will do so. + + + No property will transition. + + + + + Describes how the intermediate values used during a transition will be calculated. + + + + + + + + + + Determines whether a user can edit the content of an element. + + + + + + + + Controls the appearance of selection. + + + + + + + + Shorthand property for the 'white-space-collapsing' and 'text-wrap' properties. + + + Sets 'white-space-collapsing' to 'collapse' and 'text-wrap' to 'normal'. + + + Sets 'white-space-collapsing' to 'collapse' and 'text-wrap' to 'none'. + + + Sets 'white-space-collapsing' to 'preserve' and 'text-wrap' to 'none'. + + + Sets 'white-space-collapsing' to 'preserve-breaks' and 'text-wrap' to 'normal'. + + + Sets 'white-space-collapsing' to 'preserve' and 'text-wrap' to 'normal'. + + + Preserves white space and allows wrapping. However, some of the behavior is made UA dependent to allow matching platform conventions. + + + + + Specifies the minimum number of line boxes of a block container that must be left in a fragment after a break. + + + Specifies the width of the content area, padding area or border area (depending on 'box-sizing') of certain boxes. + + + The width depends on the values of other properties. + + + Use the fill-available inline size or fill-available block size, as appropriate to the writing mode. + + + Use the fit-content inline size or fit-content block size, as appropriate to the writing mode. + + + Use the max-content inline size or max-content block size, as appropriate to the writing mode. + + + Use the min-content inline size or min-content block size, as appropriate to the writing mode. + + + + + Provides a rendering hint to the user agent, stating what kinds of changes the author expects to perform on the element. + + + Expresses no particular intent. + + + Indicates that the author expects to animate or change something about the element’s contents in the near future. + + + Indicates that the author expects to animate or change the scroll position of the element in the near future. + + + + + Specifies line break opportunities for non-CJK scripts. + + + Lines may break between any two grapheme clusters for non-CJK scripts. + + + Block characters can no longer create implied break points. + + + Breaks non-CJK scripts according to their own rules. + + + + + Specifies additional spacing between “words”. + + + No additional spacing is applied. Computes to zero. + + + + + Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit. + + + An otherwise unbreakable sequence of characters may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. + + + Lines may break only at allowed break points. + + + + + Specifies modifications to break opportunities in line breaking (and flex line breaking.) + + + Lines may break at allowed break points before and after the box, as determined by the line-breaking rules in effect. + + + Line breaking is suppressed immediately before/after the box: the UA may only break there if there are no other valid break points in the line. If the text breaks, line-breaking restrictions are honored as for 'auto'. + + + Same as 'avoid', but only for line breaks. + + + Same as 'avoid', but only for flex line breaks. + + + Force a line break immediately before/after the box if box is an inline-level box. + + + Force a flex line break immediately before/after the box if the box is a flex item in a multi-line flex container. + + + + + Specifies modifications to break opportunities in line breaking (and flex line breaking.) + + + Lines may break at allowed break points before and after the box, as determined by the line-breaking rules in effect. + + + Line breaking is suppressed immediately before/after the box: the UA may only break there if there are no other valid break points in the line. If the text breaks, line-breaking restrictions are honored as for 'auto'. + + + Same as 'avoid', but only for line breaks. + + + Same as 'avoid', but only for flex line breaks. + + + Force a line break immediately before/after the box if box is an inline-level box. + + + Force a flex line break immediately before/after the box if the box is a flex item in a multi-line flex container. + + + + + An element becomes an exclusion when its 'wrap-flow' property has a computed value other than 'auto'. + + + For floats an exclusion is created, for all other elements an exclusion is not created. + + + Inline flow content can flow on all sides of the exclusion. + + + Inline flow content can only wrap on top and bottom of the exclusion and must leave the areas to the start and end edges of the exclusion box empty. + + + Inline flow content can wrap on the end side of the exclusion area but must leave the area to the start edge of the exclusion area empty. + + + Inline flow content can wrap on the side of the exclusion with the largest available space for the given line, and must leave the other side of the exclusion empty. + + + Inline flow content can flow around the edge of the exclusion with the smallest available space within the flow content’s containing block, and must leave the other edge of the exclusion empty. + + + Inline flow content can wrap on the start edge of the exclusion area but must leave the area to end edge of the exclusion area empty. + + + + + Specifies line breaking within boxes. + + + Lines may break at allowed break points within the box, as determined by the line-breaking rules in effect. + + + Line breaking is suppressed within the box: the UA may only break within the box if there are no other valid break points in the line. If the text breaks, line-breaking restrictions are honored as for 'auto'. + + + + + Specifies if an element inherits its parent wrapping context. In other words if it is subject to the exclusions defined outside the element. + + + The exclusion element does not inherit its parent node's wrapping context. Its descendants are only subject to exclusion shapes defined inside the element. + + + The exclusion element inherits its parent node's wrapping context. Its descendant inline content wraps around exclusions defined outside the element. + + + + + This is a shorthand property for both 'direction' and 'block-progression'. + + + Top-to-bottom block flow direction. The writing mode is horizontal. + + + Left-to-right block flow direction. The writing mode is vertical, while the typographic mode is horizontal. + + + Right-to-left block flow direction. The writing mode is vertical, while the typographic mode is horizontal. + + + Left-to-right block flow direction. The writing mode is vertical. + + + Right-to-left block flow direction. The writing mode is vertical. + + + + + Describes the horizontal coordinate of the position of the element. + + + Describes the vertical coordinate of the position of the element. + + + For a positioned box, the 'z-index' property specifies the stack level of the box in the current stacking context and whether the box establishes a local stacking context. + + + The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element. + + + + + Non-standard. Specifies the magnification scale of the object. See 'transform: scale()' for a standards-based alternative. + + + + + + \ No newline at end of file diff --git a/extensions/css/server/src/data/buildscripts/generate_browserjs.js b/extensions/css/server/src/data/buildscripts/generate_browserjs.js new file mode 100644 index 0000000000000000000000000000000000000000..1333510078c1c90e7ee819cdf99cfa192fea1f55 --- /dev/null +++ b/extensions/css/server/src/data/buildscripts/generate_browserjs.js @@ -0,0 +1,392 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +/* global __dirname */ +var fs = require('fs'); +var path = require('path'); +var xml2js = require('xml2js'); +var os = require('os'); +var util = require('util'); + +// keep in sync with data from language facts +var colors = { + aliceblue: '#f0f8ff', + antiquewhite: '#faebd7', + aqua: '#00ffff', + aquamarine: '#7fffd4', + azure: '#f0ffff', + beige: '#f5f5dc', + bisque: '#ffe4c4', + black: '#000000', + blanchedalmond: '#ffebcd', + blue: '#0000ff', + blueviolet: '#8a2be2', + brown: '#a52a2a', + burlywood: '#deb887', + cadetblue: '#5f9ea0', + chartreuse: '#7fff00', + chocolate: '#d2691e', + coral: '#ff7f50', + cornflowerblue: '#6495ed', + cornsilk: '#fff8dc', + crimson: '#dc143c', + cyan: '#00ffff', + darkblue: '#00008b', + darkcyan: '#008b8b', + darkgoldenrod: '#b8860b', + darkgray: '#a9a9a9', + darkgrey: '#a9a9a9', + darkgreen: '#006400', + darkkhaki: '#bdb76b', + darkmagenta: '#8b008b', + darkolivegreen: '#556b2f', + darkorange: '#ff8c00', + darkorchid: '#9932cc', + darkred: '#8b0000', + darksalmon: '#e9967a', + darkseagreen: '#8fbc8f', + darkslateblue: '#483d8b', + darkslategray: '#2f4f4f', + darkslategrey: '#2f4f4f', + darkturquoise: '#00ced1', + darkviolet: '#9400d3', + deeppink: '#ff1493', + deepskyblue: '#00bfff', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1e90ff', + firebrick: '#b22222', + floralwhite: '#fffaf0', + forestgreen: '#228b22', + fuchsia: '#ff00ff', + gainsboro: '#dcdcdc', + ghostwhite: '#f8f8ff', + gold: '#ffd700', + goldenrod: '#daa520', + gray: '#808080', + grey: '#808080', + green: '#008000', + greenyellow: '#adff2f', + honeydew: '#f0fff0', + hotpink: '#ff69b4', + indianred: '#cd5c5c', + indigo: '#4b0082', + ivory: '#fffff0', + khaki: '#f0e68c', + lavender: '#e6e6fa', + lavenderblush: '#fff0f5', + lawngreen: '#7cfc00', + lemonchiffon: '#fffacd', + lightblue: '#add8e6', + lightcoral: '#f08080', + lightcyan: '#e0ffff', + lightgoldenrodyellow: '#fafad2', + lightgray: '#d3d3d3', + lightgrey: '#d3d3d3', + lightgreen: '#90ee90', + lightpink: '#ffb6c1', + lightsalmon: '#ffa07a', + lightseagreen: '#20b2aa', + lightskyblue: '#87cefa', + lightslategray: '#778899', + lightslategrey: '#778899', + lightsteelblue: '#b0c4de', + lightyellow: '#ffffe0', + lime: '#00ff00', + limegreen: '#32cd32', + linen: '#faf0e6', + magenta: '#ff00ff', + maroon: '#800000', + mediumaquamarine: '#66cdaa', + mediumblue: '#0000cd', + mediumorchid: '#ba55d3', + mediumpurple: '#9370d8', + mediumseagreen: '#3cb371', + mediumslateblue: '#7b68ee', + mediumspringgreen: '#00fa9a', + mediumturquoise: '#48d1cc', + mediumvioletred: '#c71585', + midnightblue: '#191970', + mintcream: '#f5fffa', + mistyrose: '#ffe4e1', + moccasin: '#ffe4b5', + navajowhite: '#ffdead', + navy: '#000080', + oldlace: '#fdf5e6', + olive: '#808000', + olivedrab: '#6b8e23', + orange: '#ffa500', + orangered: '#ff4500', + orchid: '#da70d6', + palegoldenrod: '#eee8aa', + palegreen: '#98fb98', + paleturquoise: '#afeeee', + palevioletred: '#d87093', + papayawhip: '#ffefd5', + peachpuff: '#ffdab9', + peru: '#cd853f', + pink: '#ffc0cb', + plum: '#dda0dd', + powderblue: '#b0e0e6', + purple: '#800080', + red: '#ff0000', + rebeccapurple: '#663399', + rosybrown: '#bc8f8f', + royalblue: '#4169e1', + saddlebrown: '#8b4513', + salmon: '#fa8072', + sandybrown: '#f4a460', + seagreen: '#2e8b57', + seashell: '#fff5ee', + sienna: '#a0522d', + silver: '#c0c0c0', + skyblue: '#87ceeb', + slateblue: '#6a5acd', + slategray: '#708090', + slategrey: '#708090', + snow: '#fffafa', + springgreen: '#00ff7f', + steelblue: '#4682b4', + tan: '#d2b48c', + teal: '#008080', + thistle: '#d8bfd8', + tomato: '#ff6347', + turquoise: '#40e0d0', + violet: '#ee82ee', + wheat: '#f5deb3', + white: '#ffffff', + whitesmoke: '#f5f5f5', + yellow: '#ffff00', + yellowgreen: '#9acd32' +}; + +var otherColors = { + "ActiveBorder": "Active window border.", + "ActiveCaption": "Active window caption.", + "AppWorkspace": "Background color of multiple document interface.", + "Background": "Desktop background.", + "ButtonFace": "The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.", + "ButtonHighlight": "The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.", + "ButtonShadow": "The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.", + "ButtonText": "Text on push buttons.", + "CaptionText": "Text in caption, size box, and scrollbar arrow box.", + "currentColor": "The value of the 'color' property. The computed value of the 'currentColor' keyword is the computed value of the 'color' property. If the 'currentColor' keyword is set on the 'color' property itself, it is treated as 'color:inherit' at parse time.", + "GrayText": "Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.", + "Highlight": "Item(s) selected in a control.", + "HighlightText": "Text of item(s) selected in a control.", + "InactiveBorder": "Inactive window border.", + "InactiveCaption": "Inactive window caption.", + "InactiveCaptionText": "Color of text in an inactive caption.", + "InfoBackground": "Background color for tooltip controls.", + "InfoText": "Text color for tooltip controls.", + "Menu": "Menu background.", + "MenuText": "Text in menus.", + "Scrollbar": "Scroll bar gray area.", + "ThreeDDarkShadow": "The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.", + "ThreeDFace": "The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.", + "ThreeDHighlight": "The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.", + "ThreeDLightShadow": "The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.", + "ThreeDShadow": "The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.", + "transparent": "Fully transparent. This keyword can be considered a shorthand for rgba(0,0,0,0) which is its computed value.", + "Window": "Window background.", + "WindowFrame": "Window frame.", + "WindowText": "Text in windows.", + "none": "", + + //ignore these + "-webkit-activelink": "", + "-webkit-focus-ring-color": '', + "-webkit-link": '', + "-webkit-text": '' +}; + + +function clone(obj) { + var copy = {}; + for (var i in obj) { + copy[i] = obj[i]; + } + return copy; +} + +function getProperties(obj) { + var res = []; + for (var i in obj) { + res.push(i); + } + return res; +} + +function getValues(valArr, restriction, ruleName) { + if (!Array.isArray(valArr)) { + if (valArr.$) { + valArr = [ valArr ]; + } else { + return []; + } + } + var vals = valArr.map(function (v) { + return { + name: v.$.name, + desc: v.desc, + browsers: v.$.browsers !== 'all' ? v.$.browsers : void 0 + }; + }).filter(function (v) { + if (v.browsers === 'none') { + return false; + } + return true; + }); + if (restriction.indexOf('color') !== -1) { + + var colorsCopy = clone(colors); + var otherColorsCopy = clone(otherColors); + + var moreColors = {}; + + vals = vals.filter(function (v) { + if (typeof colorsCopy[v.name] === 'string') { + delete colorsCopy[v.name]; + return false; + } + if (typeof otherColorsCopy[v.name] === 'string') { + delete otherColorsCopy[v.name]; + return false; + } + moreColors[v.name] = v.desc; + return true; + }); + var notCovered = []; + for (var i in colorsCopy) { + notCovered.push(i); + } + for (var i in otherColorsCopy) { + notCovered.push(i); + } + if (notCovered.length > 0) { + console.log('***' + ruleName + ' uncovered: ' + notCovered.length); // + ' - ' + JSON.stringify(notCovered)); + } + + if (restriction === 'color') { + var properties = getProperties(moreColors); + + console.log('---' + ruleName + ' others : ' + properties.length); // + ' - ' + JSON.stringify(properties)); + } + } + + return vals; +} + +function internalizeDescriptions(entries) { + var descriptions = {}; + var conflicts = {}; + entries.forEach(function (e) { + if (e.values) { + e.values.forEach(function (d) { + if (!d.desc) { + conflicts[d.name] = true; + return; + } + var existing = descriptions[d.name]; + if (existing) { + if (existing !== d.desc) { + conflicts[d.name] = true; + } + } + descriptions[d.name] = d.desc; + }); + } + }); + entries.forEach(function (e) { + if (e.values) { + e.values.forEach(function (d) { + if (!conflicts[d.name]) { + delete d.desc; + } else { + delete descriptions[d.name]; + } + }); + } + }); + return descriptions; +} + +function toSource(object, keyName) { + if (!object.css[keyName]) { + return []; + } + var result = []; + var entryArr = object.css[keyName].entry; + entryArr.forEach(function (e) { + if (e.$.browsers === 'none') { + return; + } + var data = { + name: e.$.name, + desc: e.desc, + browsers: e.$.browsers !== 'all' ? e.$.browsers : void 0 + }; + if (e.$.restriction) { + data.restriction= e.$.restriction; + } + if (e.values) { + data.values= getValues(e.values.value, data.restriction || '', data.name); + } + + result.push(data); + }); + + return result; + +} + +var parser = new xml2js.Parser({explicitArray : false}); +var schemaFileName= 'css-schema.xml'; +fs.readFile(path.resolve(__dirname, schemaFileName), function(err, data) { + parser.parseString(data, function (err, result) { + + //console.log(util.inspect(result, {depth: null})); //Work + + var atdirectives = toSource(result, 'atDirectives'); + var pseudoclasses = toSource(result, 'pseudoClasses'); + var pseudoelements = toSource(result, 'pseudoElements'); + var properties = toSource(result, 'properties'); + + var descriptions = internalizeDescriptions([].concat(atdirectives, pseudoclasses, pseudoelements, properties)); + + var resultObject = { + css: { + atdirectives: atdirectives, + pseudoclasses: pseudoclasses, + pseudoelements: pseudoelements, + properties: properties + } + }; + + var output = [ + '/*---------------------------------------------------------------------------------------------', + ' * 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 ' + schemaFileName + ' using css-exclude_generate_browserjs.js', + '', + '(function (factory) {', + '\tif (typeof module === "object" && typeof module.exports === "object") {', + '\t\tvar v = factory(require, exports); if (v !== undefined) module.exports = v;', + '\t} else if (typeof define === "function" && define.amd) {', + '\t\tdefine(["require", "exports"], factory);', + '\t}', + '})(function (require, exports) {', + '\texports.data = ' + JSON.stringify(resultObject, null, '\t') + ';', + '\texports.descriptions = ' + JSON.stringify(descriptions, null, '\t') + ';', + '});' + ]; + + var outputPath = path.resolve(__dirname, '../browsers.js'); + console.log('Writing to: ' + outputPath); + var content = output.join(os.EOL); + fs.writeFileSync(outputPath, content); + console.log('Done'); + }); +}); \ No newline at end of file diff --git a/extensions/css/server/src/parser/cssErrors.ts b/extensions/css/server/src/parser/cssErrors.ts new file mode 100644 index 0000000000000000000000000000000000000000..d92259f1a38cb0524e26e890f41f83dbf429ab28 --- /dev/null +++ b/extensions/css/server/src/parser/cssErrors.ts @@ -0,0 +1,51 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from './cssNodes'; + +import * as nls from 'vscode-nls'; +const localize = nls.loadMessageBundle(); + +export class CSSIssueType implements nodes.IRule { + id: string; + message: string; + + public constructor(id: string, message: string) { + this.id = id; + this.message = message; + } +} + +export let ParseError = { + NumberExpected: new CSSIssueType('css-numberexpected', localize('expected.number', "number expected")), + ConditionExpected: new CSSIssueType('css-conditionexpected', localize('expected.condt', "condition expected")), + RuleOrSelectorExpected: new CSSIssueType('css-ruleorselectorexpected', localize('expected.ruleorselector', "at-rule or selector expected")), + DotExpected: new CSSIssueType('css-dotexpected', localize('expected.dot', "dot expected")), + ColonExpected: new CSSIssueType('css-colonexpected', localize('expected.colon', "colon expected")), + SemiColonExpected: new CSSIssueType('css-semicolonexpected', localize('expected.semicolon', "semi-colon expected")), + TermExpected: new CSSIssueType('css-termexpected', localize('expected.term', "term expected")), + ExpressionExpected: new CSSIssueType('css-expressionexpected', localize('expected.expression', "expression expected")), + OperatorExpected: new CSSIssueType('css-operatorexpected', localize('expected.operator', "operator expected")), + IdentifierExpected: new CSSIssueType('css-identifierexpected', localize('expected.ident', "identifier expected")), + PercentageExpected: new CSSIssueType('css-percentageexpected', localize('expected.percentage', "percentage expected")), + URIOrStringExpected: new CSSIssueType('css-uriorstringexpected', localize('expected.uriorstring', "uri or string expected")), + URIExpected: new CSSIssueType('css-uriexpected', localize('expected.uri', "URI expected")), + VariableNameExpected: new CSSIssueType('css-varnameexpected', localize('expected.varname', "variable name expected")), + VariableValueExpected: new CSSIssueType('css-varvalueexpected', localize('expected.varvalue', "variable value expected")), + PropertyValueExpected: new CSSIssueType('css-propertyvalueexpected', localize('expected.propvalue', "property value expected")), + LeftCurlyExpected: new CSSIssueType('css-lcurlyexpected', localize('expected.lcurly', "{ expected")), + RightCurlyExpected: new CSSIssueType('css-rcurlyexpected', localize('expected.rcurly', "} expected")), + LeftSquareBracketExpected: new CSSIssueType('css-rbracketexpected', localize('expected.lsquare', "[ expected")), + RightSquareBracketExpected: new CSSIssueType('css-lbracketexpected', localize('expected.rsquare', "] expected")), + LeftParenthesisExpected: new CSSIssueType('css-lparentexpected', localize('expected.lparen', "( expected")), + RightParenthesisExpected: new CSSIssueType('css-rparentexpected', localize('expected.rparent', ") expected")), + CommaExpected: new CSSIssueType('css-commaexpected', localize('expected.comma', "comma expected")), + PageDirectiveOrDeclarationExpected: new CSSIssueType('css-pagedirordeclexpected', localize('expected.pagedirordecl', "page directive or declaraton expected")), + UnknownAtRule: new CSSIssueType('css-unknownatrule', localize('unknown.atrule', "at-rule unknown")), + UnknownKeyword: new CSSIssueType('css-unknownkeyword', localize('unknown.keyword', "unknown keyword")), + SelectorExpected: new CSSIssueType('css-selectorexpected', localize('expected.selector', "selector expected")), + StringLiteralExpected: new CSSIssueType('css-stringliteralexpected', localize('expected.stringliteral', "string literal expected")), +}; diff --git a/extensions/css/server/src/parser/cssNodes.ts b/extensions/css/server/src/parser/cssNodes.ts new file mode 100644 index 0000000000000000000000000000000000000000..fd53487714e50d9d8a8549fd40d861e9f9671ad4 --- /dev/null +++ b/extensions/css/server/src/parser/cssNodes.ts @@ -0,0 +1,1582 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +/// +/// Nodes for the css 2.1 specification. See for reference: +/// http://www.w3.org/TR/CSS21/grammar.html#grammar +/// + +export enum NodeType { + Undefined, + Identifier, + Stylesheet, + Ruleset, + Selector, + SimpleSelector, + SelectorInterpolation, + SelectorCombinator, + SelectorCombinatorParent, + SelectorCombinatorSibling, + SelectorCombinatorAllSiblings, + Page, + PageBoxMarginBox, + ClassSelector, + IdentifierSelector, + ElementNameSelector, + PseudoSelector, + AttributeSelector, + Declaration, + Declarations, + Property, + Expression, + BinaryExpression, + Term, + Operator, + Value, + StringLiteral, + URILiteral, + EscapedValue, + Function, + NumericValue, + HexColorValue, + MixinDeclaration, + MixinReference, + VariableName, + VariableDeclaration, + Prio, + Interpolation, + NestedProperties, + ExtendsReference, + SelectorPlaceholder, + Debug, + If, + Else, + For, + Each, + While, + MixinContent, + Media, + Keyframe, + FontFace, + Import, + Namespace, + Invocation, + FunctionDeclaration, + ReturnStatement, + MediaQuery, + FunctionParameter, + FunctionArgument, + KeyframeSelector, + ViewPort, + Document +} + +export enum ReferenceType { + Mixin, + Rule, + Variable, + Function, + Keyframe, + Unknown +} + + + +export function getNodeAtOffset(node: Node, offset: number): Node { + + let candidate: Node = null; + if (!node || offset < node.offset || offset > node.end) { + return null; + } + + // Find the shortest node at the position + node.accept((node) => { + if (node.offset === -1 && node.length === -1) { + return true; + } + if (node.offset <= offset && node.end >= offset) { + if (!candidate) { + candidate = node; + } else if (node.length <= candidate.length) { + candidate = node; + } + return true; + } + return false; + }); + return candidate; +} + +export function getNodePath(node: Node, offset: number): Node[] { + + let candidate: Node = getNodeAtOffset(node, offset), + path: Node[] = []; + + while (candidate) { + path.unshift(candidate); + candidate = candidate.parent; + } + + return path; +} + +export function getParentDeclaration(node: Node): Declaration { + let decl = node.findParent(NodeType.Declaration); + if (decl && decl.getValue() && decl.getValue().encloses(node)) { + return decl; + } + return null; +} + +export interface ITextProvider { + (offset: number, length: number): string; +} + + +export class Node { + + public parent: Node; + + public offset: number; + public length: number; + public get end() { return this.offset + this.length; }; + + public options: { [name: string]: any; }; + + public textProvider: ITextProvider; // only set on the root node + + private children: Node[]; + private issues: IMarker[]; + + private nodeType: NodeType; + + constructor(offset: number = -1, len: number = -1, nodeType?: NodeType) { + this.parent = null; + this.offset = offset; + this.length = len; + if (nodeType) { + this.nodeType = nodeType; + } + } + + public set type(type: NodeType) { + this.nodeType = type; + } + + public get type(): NodeType { + return this.nodeType || NodeType.Undefined; + } + + public getTextProvider(): ITextProvider { + let node: Node = this; + while (node && !node.textProvider) { + node = node.parent; + } + if (node) { + return node.textProvider; + } + return () => { return 'unknown'; }; + } + + public getText(): string { + return this.getTextProvider()(this.offset, this.length); + } + + public matches(str: string): boolean { + return this.length === str.length && this.getTextProvider()(this.offset, this.length) === str; + } + + public startsWith(str: string): boolean { + return this.length >= str.length && this.getTextProvider()(this.offset, str.length) === str; + } + + public endsWith(str: string): boolean { + return this.length >= str.length && this.getTextProvider()(this.end - str.length, str.length) === str; + } + + public accept(visitor: IVisitorFunction): void; + public accept(visitor: IVisitor): void; + public accept(visitor: any): void { + + if (typeof visitor !== 'function') { + visitor = visitor.visitNode.bind(visitor); + } + + if (visitor(this) && this.children) { + this.children.forEach((child) => { + child.accept(visitor); + }); + } + } + + public adoptChild(node: Node, index: number = -1): Node { + if (node.parent && node.parent.children) { + let idx = node.parent.children.indexOf(node); + if (idx >= 0) { + node.parent.children.splice(idx, 1); + } + } + node.parent = this; + let children = this.children; + if (!children) { + children = this.children = []; + } + if (index !== -1) { + children.splice(index, 0, node); + } else { + children.push(node); + } + return node; + } + + public attachTo(parent: Node, index: number = -1): Node { + if (parent) { + parent.adoptChild(this, index); + } + return this; + } + + public collectIssues(results: any[]): void { + if (this.issues) { + results.push.apply(results, this.issues); + } + } + + public addIssue(issue: IMarker): void { + if (!this.issues) { + this.issues = []; + } + this.issues.push(issue); + } + + public hasIssue(rule: IRule): boolean { + return this.issues && this.issues.some(i => i.getRule() === rule); + } + + public isErroneous(): boolean { + return this.issues && this.issues.length > 0; + } + + public setNode(field: string, node: Node, index: number = -1): boolean { + if (node) { + node.attachTo(this, index); + this[field] = node; + return true; + } + return false; + } + + public addChild(node: Node): boolean { + if (node) { + if (!this.children) { + this.children = []; + } + node.attachTo(this); + this.updateOffsetAndLength(node); + return true; + } + return false; + } + + private updateOffsetAndLength(node: Node): void { + if (node.offset < this.offset || this.offset === -1) { + this.offset = node.offset; + } + let nodeEnd = node.end; + if ((nodeEnd > this.end) || this.length === -1) { + this.length = nodeEnd - this.offset; + } + } + + public hasChildren(): boolean { + return this.children && this.children.length > 0; + } + + public getChildren(): Node[] { + return this.children ? this.children.slice(0) : []; + } + + public getChild(index: number): Node { + if (this.children && index < this.children.length) { + return this.children[index]; + } + return null; + } + + public addChildren(nodes: Node[]): void { + nodes.forEach((node) => this.addChild(node)); + } + + public findFirstChildBeforeOffset(offset: number): Node { + if (this.children) { + let current: Node = null; + for (let i = this.children.length - 1; i >= 0; i--) { + // iterate until we find a child that has a start offset smaller than the input offset + current = this.children[i]; + if (current.offset <= offset) { + return current; + } + } + } + return null; + } + + public findChildAtOffset(offset: number, goDeep: boolean): Node { + let current: Node = this.findFirstChildBeforeOffset(offset); + if (current && current.end >= offset) { + if (goDeep) { + return current.findChildAtOffset(offset, true) || current; + } + return current; + } + return null; + } + + public encloses(candidate: Node): boolean { + return this.offset <= candidate.offset && this.offset + this.length >= candidate.offset + candidate.length; + } + + public getParent(): Node { + let result = this.parent; + while (result instanceof Nodelist) { + result = result.parent; + } + return result; + } + + public findParent(type: NodeType): Node { + let result: Node = this; + while (result && result.type !== type) { + result = result.parent; + } + return result; + } + + public setData(key: string, value: any): void { + if (!this.options) { + this.options = {}; + } + this.options[key] = value; + } + + public getData(key: string): any { + if (!this.options || !this.options.hasOwnProperty(key)) { + return null; + } + return this.options[key]; + } +} + +export class Nodelist extends Node { + + constructor(parent: Node, index: number = -1) { + super(-1, -1); + this.attachTo(parent, index); + this.offset = -1; + this.length = -1; + } +} + + +export class Identifier extends Node { + + public referenceTypes: ReferenceType[]; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Identifier; + } + + public containsInterpolation(): boolean { + return this.hasChildren(); + } +} + +export class Stylesheet extends Node { + + private name: string; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Stylesheet; + } + + public setName(value: string): void { + this.name = value; + } + +} + +export class Declarations extends Node { + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Declarations; + } +} + +export class BodyDeclaration extends Node { + + private declarations: Declarations; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public getDeclarations(): Declarations { + return this.declarations; + } + + public setDeclarations(decls: Declarations): boolean { + return this.setNode('declarations', decls); + } + +} + +export class RuleSet extends BodyDeclaration { + + private selectors: Nodelist; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Ruleset; + } + + public getSelectors(): Nodelist { + if (!this.selectors) { + this.selectors = new Nodelist(this); + } + return this.selectors; + } + + public isNested(): boolean { + return this.parent && this.parent.findParent(NodeType.Ruleset) !== null; + } +} + +export class Selector extends Node { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Selector; + } + +} + +export class SimpleSelector extends Node { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.SimpleSelector; + } +} + +export abstract class AbstractDeclaration extends Node { + + // positions for code assist + public colonPosition: number; + public semicolonPosition: number; // semicolon following the declaration + + constructor(offset: number, length: number) { + super(offset, length); + } +} + +export class Declaration extends AbstractDeclaration { + + private property: Property; + private value: Expression; + private nestedProprties: NestedProperties; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Declaration; + } + + public setProperty(node: Property): boolean { + return this.setNode('property', node); + } + + public getProperty(): Property { + return this.property; + } + + public getFullPropertyName(): string { + let propertyName = this.property ? this.property.getName() : 'unknown'; + if (this.parent instanceof Declarations && this.parent.getParent() instanceof NestedProperties) { + let parentDecl = this.parent.getParent().getParent(); + if (parentDecl instanceof Declaration) { + return (parentDecl).getFullPropertyName() + propertyName; + } + } + return propertyName; + } + + public getNonPrefixedPropertyName(): string { + let propertyName = this.getFullPropertyName(); + if (propertyName && propertyName.charAt(0) === '-') { + let vendorPrefixEnd = propertyName.indexOf('-', 1); + if (vendorPrefixEnd !== -1) { + return propertyName.substring(vendorPrefixEnd + 1); + } + } + return propertyName; + } + + public setValue(value: Expression): boolean { + return this.setNode('value', value); + } + + public getValue(): Expression { + return this.value; + } + + public setNestedProperties(value: NestedProperties): boolean { + return this.setNode('nestedProprties', value); + } + + public getNestedProperties(): NestedProperties { + return this.nestedProprties; + } +} + +export class Property extends Node { + + private identifier: Identifier; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Property; + } + + public setIdentifier(value: Identifier): boolean { + return this.setNode('identifier', value); + } + + public getIdentifier(): Identifier { + return this.identifier; + } + + public getName(): string { + return this.getText(); + } +} + +export class Invocation extends Node { + + private arguments: Nodelist; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Invocation; + } + + public getArguments(): Nodelist { + if (!this.arguments) { + this.arguments = new Nodelist(this); + } + return this.arguments; + } +} + +export class Function extends Invocation { + + private identifier: Identifier; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Function; + } + + public setIdentifier(node: Identifier): boolean { + return this.setNode('identifier', node, 0); + } + + public getIdentifier(): Identifier { + return this.identifier; + } + + public getName(): string { + return this.identifier ? this.identifier.getText() : ''; + } + +} + +export class FunctionParameter extends Node { + + private identifier: Node; + private defaultValue: Node; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.FunctionParameter; + } + + public setIdentifier(node: Node): boolean { + return this.setNode('identifier', node, 0); + } + + public getIdentifier(): Node { + return this.identifier; + } + + public getName(): string { + return this.identifier ? this.identifier.getText() : ''; + } + + public setDefaultValue(node: Node): boolean { + return this.setNode('defaultValue', node, 0); + } + + public getDefaultValue(): Node { + return this.defaultValue; + } +} + +export class FunctionArgument extends Node { + + private identifier: Node; + private value: Node; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.FunctionArgument; + } + + public setIdentifier(node: Node): boolean { + return this.setNode('identifier', node, 0); + } + + public getIdentifier(): Node { + return this.identifier; + } + + public getName(): string { + return this.identifier ? this.identifier.getText() : ''; + } + + public setValue(node: Node): boolean { + return this.setNode('value', node, 0); + } + + public getValue(): Node { + return this.value; + } +} + +export class IfStatement extends BodyDeclaration { + public expression: Expression; + public elseClause: BodyDeclaration; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.If; + } + + public setExpression(node: Expression): boolean { + return this.setNode('expression', node, 0); + } + + public setElseClause(elseClause: BodyDeclaration): boolean { + return this.setNode('elseClause', elseClause); + } +} + +export class ForStatement extends BodyDeclaration { + public variable: Variable; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.For; + } + + public setVariable(node: Variable): boolean { + return this.setNode('variable', node, 0); + } +} + +export class EachStatement extends BodyDeclaration { + public variable: Variable; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Each; + } + + public setVariable(node: Variable): boolean { + return this.setNode('variable', node, 0); + } +} + +export class WhileStatement extends BodyDeclaration { + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.While; + } +} + +export class ElseStatement extends BodyDeclaration { + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Else; + } +} + +export class FunctionDeclaration extends BodyDeclaration { + private identifier: Identifier; + private parameters: Nodelist; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.FunctionDeclaration; + } + + public setIdentifier(node: Identifier): boolean { + return this.setNode('identifier', node, 0); + } + + public getIdentifier(): Identifier { + return this.identifier; + } + + public getName(): string { + return this.identifier ? this.identifier.getText() : ''; + } + + public getParameters(): Nodelist { + if (!this.parameters) { + this.parameters = new Nodelist(this); + } + return this.parameters; + } +} + +export class ViewPort extends BodyDeclaration { + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.ViewPort; + } +} + +export class FontFace extends BodyDeclaration { + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.FontFace; + } + +} + +export class NestedProperties extends BodyDeclaration { + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.NestedProperties; + } +} + +export class Keyframe extends BodyDeclaration { + + private keyword: Node; + private identifier: Identifier; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Keyframe; + } + + public setKeyword(keyword: Node): boolean { + return this.setNode('keyword', keyword, 0); + } + + public getKeyword(): Node { + return this.keyword; + } + + public setIdentifier(node: Identifier): boolean { + return this.setNode('identifier', node, 0); + } + + public getIdentifier(): Identifier { + return this.identifier; + } + + public getName(): string { + return this.identifier ? this.identifier.getText() : ''; + } +} + +export class KeyframeSelector extends BodyDeclaration { + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.KeyframeSelector; + } +} + +export class Import extends Node { + + private medialist: Node; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Import; + } + + public setMedialist(node: Node): boolean { + if (node) { + node.attachTo(this); + this.medialist = node; + return true; + } + return false; + } +} + +export class Namespace extends Node { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Namespace; + } + +} + +export class Media extends BodyDeclaration { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Media; + } +} + +export class Document extends BodyDeclaration { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Document; + } +} + +export class Medialist extends Node { + private mediums: Nodelist; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public getMediums(): Nodelist { + if (!this.mediums) { + this.mediums = new Nodelist(this); + } + return this.mediums; + } +} + +export class MediaQuery extends Node { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.MediaQuery; + } +} + +export class Page extends BodyDeclaration { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Page; + } + +} + +export class PageBoxMarginBox extends BodyDeclaration { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.PageBoxMarginBox; + } + +} + +export class Expression extends Node { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Expression; + } +} + +export class BinaryExpression extends Node { + + private left: Node; + private right: Node; + private operator: Node; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.BinaryExpression; + } + + public setLeft(left: Node): boolean { + return this.setNode('left', left); + } + + public getLeft(): Node { + return this.left; + } + + public setRight(right: Node): boolean { + return this.setNode('right', right); + } + + public getRight(): Node { + return this.right; + } + + public setOperator(value: Node): boolean { + return this.setNode('operator', value); + } + + public getOperator(): Node { + return this.operator; + } +} + +export class Term extends Node { + + private operator: Node; + private expression: Node; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Term; + } + + public setOperator(value: Node): boolean { + return this.setNode('operator', value); + } + + public getOperator(): Node { + return this.operator; + } + + public setExpression(value: Node): boolean { + return this.setNode('expression', value); + } + + public getExpression(): Node { + return this.expression; + } +} + +export class Operator extends Node { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Operator; + } + +} + +export class HexColorValue extends Node { + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.HexColorValue; + } + +} + +export class NumericValue extends Node { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.NumericValue; + } + + public getValue(): { value: string; unit: string } { + let raw = this.getText(); + let unitIdx = 0, + code: number, + _dot = '.'.charCodeAt(0), + _0 = '0'.charCodeAt(0), + _9 = '9'.charCodeAt(0); + + for (let i = 0, len = raw.length; i < len; i++) { + code = raw.charCodeAt(i); + if (!(_0 <= code && code <= _9 || code === _dot)) { + break; + } + unitIdx += 1; + } + return { + value: raw.substring(0, unitIdx), + unit: unitIdx < raw.length ? raw.substring(unitIdx) : undefined + }; + } +} + +export class VariableDeclaration extends AbstractDeclaration { + + private variable: Variable; + private value: Node; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.VariableDeclaration; + } + + public setVariable(node: Variable): boolean { + if (node) { + node.attachTo(this); + this.variable = node; + return true; + } + return false; + } + + public getVariable(): Variable { + return this.variable; + } + + public getName(): string { + return this.variable ? this.variable.getName() : ''; + } + + public setValue(node: Node): boolean { + if (node) { + node.attachTo(this); + this.value = node; + return true; + } + return false; + } + +} + +export class Interpolation extends Node { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.Interpolation; + } +} + +export class Variable extends Node { + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.VariableName; + } + + public getName(): string { + return this.getText(); + } + +} + +export class ExtendsReference extends Node { + private selector: Selector; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.ExtendsReference; + } + + public setSelector(node: Selector): boolean { + return this.setNode('selector', node, 0); + } + + public getSelector(): Selector { + return this.selector; + } + + public getName(): string { + return this.selector ? this.selector.getText() : ''; + } +} + + +export class MixinReference extends Node { + private identifier: Identifier; + private arguments: Nodelist; + private content: BodyDeclaration; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.MixinReference; + } + + public setIdentifier(node: Identifier): boolean { + return this.setNode('identifier', node, 0); + } + + public getIdentifier(): Identifier { + return this.identifier; + } + + public getName(): string { + return this.identifier ? this.identifier.getText() : ''; + } + + public getArguments(): Nodelist { + if (!this.arguments) { + this.arguments = new Nodelist(this); + } + return this.arguments; + } + + public setContent(node: BodyDeclaration): boolean { + return this.setNode('content', node); + } + + public getContent(): BodyDeclaration { + return this.content; + } +} + +export class MixinDeclaration extends BodyDeclaration { + + private identifier: Identifier; + private parameters: Nodelist; + private guard: LessGuard; + + constructor(offset: number, length: number) { + super(offset, length); + } + + public get type(): NodeType { + return NodeType.MixinDeclaration; + } + + public setIdentifier(node: Identifier): boolean { + return this.setNode('identifier', node, 0); + } + + public getIdentifier(): Identifier { + return this.identifier; + } + + public getName(): string { + return this.identifier ? this.identifier.getText() : ''; + } + + public getParameters(): Nodelist { + if (!this.parameters) { + this.parameters = new Nodelist(this); + } + return this.parameters; + } + + public setGuard(node: LessGuard): boolean { + if (node) { + node.attachTo(this); + this.guard = node; + } + return false; + } +} + +export class LessGuard extends Node { + + public isNegated: boolean; + private conditions: Nodelist; + + public getConditions(): Nodelist { + if (!this.conditions) { + this.conditions = new Nodelist(this); + } + return this.conditions; + } +} + +export class GuardCondition extends Node { + + public variable: Node; + public isEquals: boolean; + public isGreater: boolean; + public isEqualsGreater: boolean; + public isLess: boolean; + public isEqualsLess: boolean; + + public setVariable(node: Node): boolean { + return this.setNode('variable', node); + } +} + +export interface IRule { + id: string; + message: string; +} + + +export enum Level { + Ignore = 1, + Warning = 2, + Error = 4 +} + +export interface IMarker { + getNode(): Node; + getMessage(): string; + getOffset(): number; + getLength(): number; + getRule(): IRule; + getLevel(): Level; +} + +export class Marker implements IMarker { + + private node: Node; + private rule: IRule; + private level: Level; + private message: string; + private offset: number; + private length: number; + + constructor(node: Node, rule: IRule, level: Level, message?: string, offset: number = node.offset, length: number = node.length) { + this.node = node; + this.rule = rule; + this.level = level; + this.message = message || rule.message; + this.offset = offset; + this.length = length; + } + + public getRule(): IRule { + return this.rule; + } + + public getLevel(): Level { + return this.level; + } + + public getOffset(): number { + return this.offset; + } + + public getLength(): number { + return this.length; + } + + public getNode(): Node { + return this.node; + } + + public getMessage(): string { + return this.message; + } +} + +export interface IVisitor { + visitNode: (node: Node) => boolean; +} + +export interface IVisitorFunction { + (node: Node): boolean; +} +/* +export class DefaultVisitor implements IVisitor { + + public visitNode(node:Node):boolean { + switch (node.type) { + case NodeType.Stylesheet: + return this.visitStylesheet( node); + case NodeType.FontFace: + return this.visitFontFace( node); + case NodeType.Ruleset: + return this.visitRuleSet( node); + case NodeType.Selector: + return this.visitSelector( node); + case NodeType.SimpleSelector: + return this.visitSimpleSelector( node); + case NodeType.Declaration: + return this.visitDeclaration( node); + case NodeType.Function: + return this.visitFunction( node); + case NodeType.FunctionDeclaration: + return this.visitFunctionDeclaration( node); + case NodeType.FunctionParameter: + return this.visitFunctionParameter( node); + case NodeType.FunctionArgument: + return this.visitFunctionArgument( node); + case NodeType.Term: + return this.visitTerm( node); + case NodeType.Declaration: + return this.visitExpression( node); + case NodeType.NumericValue: + return this.visitNumericValue( node); + case NodeType.Page: + return this.visitPage( node); + case NodeType.PageBoxMarginBox: + return this.visitPageBoxMarginBox( node); + case NodeType.Property: + return this.visitProperty( node); + case NodeType.NumericValue: + return this.visitNodelist( node); + case NodeType.Import: + return this.visitImport( node); + case NodeType.Namespace: + return this.visitNamespace( node); + case NodeType.Keyframe: + return this.visitKeyframe( node); + case NodeType.KeyframeSelector: + return this.visitKeyframeSelector( node); + case NodeType.MixinDeclaration: + return this.visitMixinDeclaration( node); + case NodeType.MixinReference: + return this.visitMixinReference( node); + case NodeType.Variable: + return this.visitVariable( node); + case NodeType.VariableDeclaration: + return this.visitVariableDeclaration( node); + } + return this.visitUnknownNode(node); + } + + public visitFontFace(node:FontFace):boolean { + return true; + } + + public visitKeyframe(node:Keyframe):boolean { + return true; + } + + public visitKeyframeSelector(node:KeyframeSelector):boolean { + return true; + } + + public visitStylesheet(node:Stylesheet):boolean { + return true; + } + + public visitProperty(Node:Property):boolean { + return true; + } + + public visitRuleSet(node:RuleSet):boolean { + return true; + } + + public visitSelector(node:Selector):boolean { + return true; + } + + public visitSimpleSelector(node:SimpleSelector):boolean { + return true; + } + + public visitDeclaration(node:Declaration):boolean { + return true; + } + + public visitFunction(node:Function):boolean { + return true; + } + + public visitFunctionDeclaration(node:FunctionDeclaration):boolean { + return true; + } + + public visitInvocation(node:Invocation):boolean { + return true; + } + + public visitTerm(node:Term):boolean { + return true; + } + + public visitImport(node:Import):boolean { + return true; + } + + public visitNamespace(node:Namespace):boolean { + return true; + } + + public visitExpression(node:Expression):boolean { + return true; + } + + public visitNumericValue(node:NumericValue):boolean { + return true; + } + + public visitPage(node:Page):boolean { + return true; + } + + public visitPageBoxMarginBox(node:PageBoxMarginBox):boolean { + return true; + } + + public visitNodelist(node:Nodelist):boolean { + return true; + } + + public visitVariableDeclaration(node:VariableDeclaration):boolean { + return true; + } + + public visitVariable(node:Variable):boolean { + return true; + } + + public visitMixinDeclaration(node:MixinDeclaration):boolean { + return true; + } + + public visitMixinReference(node:MixinReference):boolean { + return true; + } + + public visitUnknownNode(node:Node):boolean { + return true; + } +} +*/ +export class ParseErrorCollector implements IVisitor { + + static entries(node: Node): IMarker[] { + let visitor = new ParseErrorCollector(); + node.accept(visitor); + return visitor.entries; + } + + public entries: IMarker[]; + + constructor() { + this.entries = []; + } + + public visitNode(node: Node): boolean { + + if (node.isErroneous()) { + node.collectIssues(this.entries); + } + return true; + } +} + diff --git a/extensions/css/server/src/parser/cssParser.ts b/extensions/css/server/src/parser/cssParser.ts new file mode 100644 index 0000000000000000000000000000000000000000..335f5d0b925a2a853aa2dce1de309a58f0a3314c --- /dev/null +++ b/extensions/css/server/src/parser/cssParser.ts @@ -0,0 +1,1019 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; +import scanner = require('./cssScanner'); +import nodes = require('./cssNodes'); +import errors = require('./cssErrors'); +import languageFacts = require('../services/languageFacts'); +import {TextDocument} from 'vscode-languageserver'; + +export interface IMark { + prev: scanner.IToken; + curr: scanner.IToken; + pos: number; +} + +/// +/// A parser for the css core specification. See for reference: +/// http://www.w3.org/TR/CSS21/syndata.html#tokenization +/// +export class Parser { + + public scanner: scanner.Scanner; + public token: scanner.IToken; + public prevToken: scanner.IToken; + + private lastErrorToken: scanner.IToken; + + constructor(scnr: scanner.Scanner = new scanner.Scanner()) { + this.scanner = scnr; + this.token = null; + this.prevToken = null; + } + + public peek(type: scanner.TokenType, text?: string, ignoreCase: boolean = true): boolean { + if (type !== this.token.type) { + return false; + } + if (typeof text !== 'undefined') { + if (ignoreCase) { + return text.toLowerCase() === this.token.text.toLowerCase(); + } else { + return text === this.token.text; + } + } + return true; + } + + public peekRegExp(type: scanner.TokenType, regEx: RegExp): boolean { + if (type !== this.token.type) { + return false; + } + return regEx.test(this.token.text); + } + + public hasWhitespace(): boolean { + return this.prevToken && (this.prevToken.offset + this.prevToken.len !== this.token.offset); + } + + public consumeToken(): void { + this.prevToken = this.token; + this.token = this.scanner.scan(); + } + + public mark(): IMark { + return { + prev: this.prevToken, + curr: this.token, + pos: this.scanner.pos() + }; + } + + public restoreAtMark(mark: IMark): void { + this.prevToken = mark.prev; + this.token = mark.curr; + this.scanner.goBackTo(mark.pos); + } + + public acceptOne(type: scanner.TokenType, text?: string[], ignoreCase: boolean = true): boolean { + for (let i = 0; i < text.length; i++) { + if (this.peek(type, text[i], ignoreCase)) { + this.consumeToken(); + return true; + } + } + return false; + } + + public accept(type: scanner.TokenType, text?: string, ignoreCase: boolean = true): boolean { + if (this.peek(type, text, ignoreCase)) { + this.consumeToken(); + return true; + } + return false; + } + + public resync(resyncTokens: scanner.TokenType[], resyncStopTokens: scanner.TokenType[]): boolean { + while (true) { + if (resyncTokens && resyncTokens.indexOf(this.token.type) !== -1) { + this.consumeToken(); + return true; + } else if (resyncStopTokens && resyncStopTokens.indexOf(this.token.type) !== -1) { + return true; + } else { + if (this.token.type === scanner.TokenType.EOF) { + return false; + } + this.token = this.scanner.scan(); + } + } + } + + public createNode(nodeType: nodes.NodeType): nodes.Node { + return new nodes.Node(this.token.offset, this.token.len, nodeType); + } + + public create(ctor: any): nodes.Node { + let obj = Object.create(ctor.prototype); + ctor.apply(obj, [this.token.offset, this.token.len]); + return obj; + } + + public finish(node: T, error?: errors.CSSIssueType, resyncTokens?: scanner.TokenType[], resyncStopTokens?: scanner.TokenType[]): T { + // parseNumeric misuses error for boolean flagging (however the real error mustn't be a false) + // + nodelist offsets mustn't be modified, because there is a offset hack in rulesets for smartselection + if (!(node instanceof nodes.Nodelist)) { + if (error) { + this.markError(node, error, resyncTokens, resyncStopTokens); + } + // set the node end position + if (this.prevToken !== null) { + // length with more elements belonging together + let prevEnd = this.prevToken.offset + this.prevToken.len; + node.length = prevEnd > node.offset ? prevEnd - node.offset : 0; // offset is taken from current token, end from previous: Use 0 for empty nodes + } + + } + return node; + } + + public markError(node: T, error: errors.CSSIssueType, resyncTokens?: scanner.TokenType[], resyncStopTokens?: scanner.TokenType[]): void { + if (this.token !== this.lastErrorToken) { // do not report twice on the same token + node.addIssue(new nodes.Marker(node, error, nodes.Level.Error, null, this.token.offset, this.token.len)); + this.lastErrorToken = this.token; + } + if (resyncTokens || resyncStopTokens) { + this.resync(resyncTokens, resyncStopTokens); + } + } + + public parseStylesheet(textDocument: TextDocument): nodes.Stylesheet { + let versionId = textDocument.version; + let textProvider = (offset: number, length: number) => { + if (textDocument.version !== versionId) { + throw new Error('Underlying model has changed, AST is no longer valid'); + } + return textDocument.getText().substr(offset, length); + }; + + return this.internalParse(textDocument.getText(), this._parseStylesheet, textProvider); + } + + public internalParse(input: string, parseFunc: () => T, textProvider?: nodes.ITextProvider): T { + this.scanner.setSource(input); + this.token = this.scanner.scan(); + let node = parseFunc.bind(this)(); + if (node) { + if (textProvider) { + node.textProvider = textProvider; + } else { + node.textProvider = (offset: number, length: number) => { return input.substr(offset, length); }; + } + } + return node; + } + + public _parseStylesheet(): nodes.Stylesheet { + let node = this.create(nodes.Stylesheet); + node.addChild(this._parseCharset()); + + let inRecovery = false; + do { + let hasMatch = false; + do { + hasMatch = false; + let statement = this._parseStylesheetStatement(); + if (statement) { + node.addChild(statement); + hasMatch = true; + inRecovery = false; + if (!this.peek(scanner.TokenType.EOF) && this._needsSemicolonAfter(statement) && !this.accept(scanner.TokenType.SemiColon)) { + this.markError(node, errors.ParseError.SemiColonExpected); + } + } + while (this.accept(scanner.TokenType.SemiColon) || this.accept(scanner.TokenType.CDO) || this.accept(scanner.TokenType.CDC)) { + // accept empty statements + hasMatch = true; + inRecovery = false; + } + } while (hasMatch); + + if (this.peek(scanner.TokenType.EOF)) { + break; + } + + if (!inRecovery) { + if (this.peek(scanner.TokenType.AtKeyword)) { + this.markError(node, errors.ParseError.UnknownAtRule); + } else { + this.markError(node, errors.ParseError.RuleOrSelectorExpected); + } + inRecovery = true; + } + this.consumeToken(); + } while (!this.peek(scanner.TokenType.EOF)); + + return this.finish(node); + } + + public _parseStylesheetStatement(): nodes.Node { + return this._parseRuleset(false) + || this._parseImport() + || this._parseMedia() + || this._parsePage() + || this._parseFontFace() + || this._parseKeyframe() + || this._parseViewPort() + || this._parseNamespace() + || this._parseDocument(); + } + + public _tryParseRuleset(isNested: boolean): nodes.RuleSet { + let mark = this.mark(); + if (this._parseSelector(isNested)) { + while (this.accept(scanner.TokenType.Comma) && this._parseSelector(isNested)) { + // loop + } + if (this.accept(scanner.TokenType.CurlyL)) { + this.restoreAtMark(mark); + return this._parseRuleset(isNested); + } + } + this.restoreAtMark(mark); + return null; + } + + public _parseRuleset(isNested: boolean = false): nodes.RuleSet { + let node = this.create(nodes.RuleSet); + + if (!node.getSelectors().addChild(this._parseSelector(isNested))) { + return null; + } + + while (this.accept(scanner.TokenType.Comma) && node.getSelectors().addChild(this._parseSelector(isNested))) { + // loop + } + + return this._parseBody(node, this._parseRuleSetDeclaration.bind(this)); + } + + public _parseRuleSetDeclaration(): nodes.Node { + return this._parseDeclaration(); + } + + public _needsSemicolonAfter(node: nodes.Node): boolean { + switch (node.type) { + case nodes.NodeType.Keyframe: + case nodes.NodeType.ViewPort: + case nodes.NodeType.Media: + case nodes.NodeType.Ruleset: + case nodes.NodeType.Namespace: + case nodes.NodeType.If: + case nodes.NodeType.For: + case nodes.NodeType.Each: + case nodes.NodeType.While: + case nodes.NodeType.MixinDeclaration: + case nodes.NodeType.FunctionDeclaration: + return false; + case nodes.NodeType.VariableDeclaration: + case nodes.NodeType.ExtendsReference: + case nodes.NodeType.MixinContent: + case nodes.NodeType.ReturnStatement: + case nodes.NodeType.MediaQuery: + case nodes.NodeType.Debug: + case nodes.NodeType.Import: + return true; + case nodes.NodeType.MixinReference: + return !(node).getContent(); + case nodes.NodeType.Declaration: + return !(node).getNestedProperties(); + } + return false; + } + + public _parseDeclarations(parseDeclaration: () => nodes.Node): nodes.Declarations { + let node = this.create(nodes.Declarations); + if (!this.accept(scanner.TokenType.CurlyL)) { + return null; + } + + let decl = parseDeclaration(); + while (node.addChild(decl)) { + if (this.peek(scanner.TokenType.CurlyR)) { + break; + } + if (this._needsSemicolonAfter(decl) && !this.accept(scanner.TokenType.SemiColon)) { + return this.finish(node, errors.ParseError.SemiColonExpected, [scanner.TokenType.SemiColon, scanner.TokenType.CurlyR]); + } + while (this.accept(scanner.TokenType.SemiColon)) { + // accept empty statements + } + decl = parseDeclaration(); + } + + if (!this.accept(scanner.TokenType.CurlyR)) { + return this.finish(node, errors.ParseError.RightCurlyExpected, [scanner.TokenType.CurlyR, scanner.TokenType.SemiColon]); + } + return this.finish(node); + } + + public _parseBody(node: T, parseDeclaration: () => nodes.Node): T { + if (!node.setDeclarations(this._parseDeclarations(parseDeclaration))) { + return this.finish(node, errors.ParseError.LeftCurlyExpected, [scanner.TokenType.CurlyR, scanner.TokenType.SemiColon]); + } + return this.finish(node); + } + + public _parseSelector(isNested: boolean): nodes.Selector { + let node = this.create(nodes.Selector); + + let hasContent = false; + if (isNested) { + // nested selectors can start with a combinator + hasContent = node.addChild(this._parseCombinator()); + } + while (node.addChild(this._parseSimpleSelector())) { + hasContent = true; + node.addChild(this._parseCombinator()); // optional + } + return hasContent ? this.finish(node) : null; + } + + public _parseDeclaration(resyncStopTokens?: scanner.TokenType[]): nodes.Declaration { + let node = this.create(nodes.Declaration); + if (!node.setProperty(this._parseProperty())) { + return null; + } + + if (!this.accept(scanner.TokenType.Colon)) { + return this.finish(node, errors.ParseError.ColonExpected, [scanner.TokenType.Colon], resyncStopTokens); + } + node.colonPosition = this.prevToken.offset; + + if (!node.setValue(this._parseExpr())) { + return this.finish(node, errors.ParseError.PropertyValueExpected); + } + node.addChild(this._parsePrio()); + + if (this.peek(scanner.TokenType.SemiColon)) { + node.semicolonPosition = this.token.offset; // not part of the declaration, but useful information for code assist + } + + return this.finish(node); + } + + public _tryToParseDeclaration(): nodes.Declaration { + let mark = this.mark(); + if (this._parseProperty() && this.accept(scanner.TokenType.Colon)) { + // looks like a declaration, go ahead + this.restoreAtMark(mark); + return this._parseDeclaration(); + } + + this.restoreAtMark(mark); + return null; + } + + public _parseProperty(): nodes.Property { + let node = this.create(nodes.Property); + + let mark = this.mark(); + if (this.accept(scanner.TokenType.Delim, '*') || this.accept(scanner.TokenType.Delim, '_')) { + // support for IE 5.x, 6 and 7 star hack: see http://en.wikipedia.org/wiki/CSS_filter#Star_hack + if (this.hasWhitespace()) { + this.restoreAtMark(mark); + return null; + } + } + if (node.setIdentifier(this._parseIdent())) { + return this.finish(node); + } + return null; + } + + public _parseCharset(): nodes.Node { + let node = this.create(nodes.Node); + if (!this.accept(scanner.TokenType.Charset)) { + return null; + } + if (!this.accept(scanner.TokenType.String)) { + return this.finish(node, errors.ParseError.IdentifierExpected); + } + if (!this.accept(scanner.TokenType.SemiColon)) { + return this.finish(node, errors.ParseError.SemiColonExpected); + } + return this.finish(node); + } + + + + public _parseImport(): nodes.Node { + let node = this.create(nodes.Import); + if (!this.accept(scanner.TokenType.AtKeyword, '@import')) { + return null; + } + + if (!this.accept(scanner.TokenType.URI) && !this.accept(scanner.TokenType.String)) { + return this.finish(node, errors.ParseError.URIOrStringExpected); + } + + node.setMedialist(this._parseMediaList()); + + return this.finish(node); + } + + public _parseNamespace(): nodes.Node { + // http://www.w3.org/TR/css3-namespace/ + // namespace : NAMESPACE_SYM S* [IDENT S*]? [STRING|URI] S* ';' S* + + let node = this.create(nodes.Namespace); + if (!this.accept(scanner.TokenType.AtKeyword, '@namespace')) { + return null; + } + + node.addChild(this._parseIdent()); // optional prefix + + if (!this.accept(scanner.TokenType.URI) && !this.accept(scanner.TokenType.String)) { + return this.finish(node, errors.ParseError.URIExpected, [scanner.TokenType.SemiColon]); + } + + if (!this.accept(scanner.TokenType.SemiColon)) { + return this.finish(node, errors.ParseError.SemiColonExpected); + } + + return this.finish(node); + } + + public _parseFontFace(): nodes.Node { + if (!this.peek(scanner.TokenType.AtKeyword, '@font-face')) { + return null; + } + let node = this.create(nodes.FontFace); + this.consumeToken(); // @font-face + + return this._parseBody(node, this._parseRuleSetDeclaration.bind(this)); + } + + public _parseViewPort(): nodes.Node { + if (!this.peek(scanner.TokenType.AtKeyword, '@-ms-viewport') && + !this.peek(scanner.TokenType.AtKeyword, '@-o-viewport') && + !this.peek(scanner.TokenType.AtKeyword, '@viewport') + ) { + return null; + } + let node = this.create(nodes.ViewPort); + this.consumeToken(); // @-ms-viewport + + return this._parseBody(node, this._parseRuleSetDeclaration.bind(this)); + } + + public _parseKeyframe(): nodes.Node { + let node = this.create(nodes.Keyframe); + + let atNode = this.create(nodes.Node); + + if (!this.accept(scanner.TokenType.AtKeyword, '@keyframes') && + !this.accept(scanner.TokenType.AtKeyword, '@-webkit-keyframes') && + !this.accept(scanner.TokenType.AtKeyword, '@-ms-keyframes') && + !this.accept(scanner.TokenType.AtKeyword, '@-moz-keyframes') && + !this.accept(scanner.TokenType.AtKeyword, '@-o-keyframes')) { + + return null; + } + node.setKeyword(this.finish(atNode)); + if (atNode.getText() === '@-ms-keyframes') { // -ms-keyframes never existed + this.markError(atNode, errors.ParseError.UnknownKeyword); + } + + if (!node.setIdentifier(this._parseIdent([nodes.ReferenceType.Keyframe]))) { + return this.finish(node, errors.ParseError.IdentifierExpected, [scanner.TokenType.CurlyR]); + } + + return this._parseBody(node, this._parseKeyframeSelector.bind(this)); + } + + public _parseKeyframeSelector(): nodes.Node { + let node = this.create(nodes.KeyframeSelector); + + if (!node.addChild(this._parseIdent()) && !this.accept(scanner.TokenType.Percentage)) { + return null; + } + + while (this.accept(scanner.TokenType.Comma)) { + if (!node.addChild(this._parseIdent()) && !this.accept(scanner.TokenType.Percentage)) { + return this.finish(node, errors.ParseError.PercentageExpected); + } + } + + return this._parseBody(node, this._parseRuleSetDeclaration.bind(this)); + } + + public _parseMediaDeclaration(): nodes.Node { + return this._tryParseRuleset(false) || this._tryToParseDeclaration() || this._parseStylesheetStatement(); + } + + public _parseMedia(): nodes.Node { + // MEDIA_SYM S* media_query_list '{' S* ruleset* '}' S* + // media_query_list : S* [media_query [ ',' S* media_query ]* ]? + let node = this.create(nodes.Media); + if (!this.accept(scanner.TokenType.AtKeyword, '@media')) { + return null; + } + if (!node.addChild(this._parseMediaQuery([scanner.TokenType.CurlyL]))) { + return this.finish(node, errors.ParseError.IdentifierExpected); + } + while (this.accept(scanner.TokenType.Comma)) { + if (!node.addChild(this._parseMediaQuery([scanner.TokenType.CurlyL]))) { + return this.finish(node, errors.ParseError.IdentifierExpected); + } + } + + return this._parseBody(node, this._parseMediaDeclaration.bind(this)); + } + + public _parseMediaQuery(resyncStopToken: scanner.TokenType[]): nodes.Node { + // http://www.w3.org/TR/css3-mediaqueries/ + // media_query : [ONLY | NOT]? S* IDENT S* [ AND S* expression ]* | expression [ AND S* expression ]* + // expression : '(' S* IDENT S* [ ':' S* expr ]? ')' S* + + let node = this.create(nodes.MediaQuery); + + let parseExpression = true; + let hasContent = false; + if (!this.peek(scanner.TokenType.ParenthesisL)) { + if (this.accept(scanner.TokenType.Ident, 'only', true) || this.accept(scanner.TokenType.Ident, 'not', true)) { + // optional + } + if (!node.addChild(this._parseIdent())) { + return null; + } + hasContent = true; + parseExpression = this.accept(scanner.TokenType.Ident, 'and', true); + } + while (parseExpression) { + if (!this.accept(scanner.TokenType.ParenthesisL)) { + if (hasContent) { + return this.finish(node, errors.ParseError.LeftParenthesisExpected, [], resyncStopToken); + } + return null; + } + if (!node.addChild(this._parseMediaFeatureName())) { + return this.finish(node, errors.ParseError.IdentifierExpected, [], resyncStopToken); + } + if (this.accept(scanner.TokenType.Colon)) { + if (!node.addChild(this._parseExpr())) { + return this.finish(node, errors.ParseError.TermExpected, [], resyncStopToken); + } + } + if (!this.accept(scanner.TokenType.ParenthesisR)) { + return this.finish(node, errors.ParseError.RightParenthesisExpected, [], resyncStopToken); + } + parseExpression = this.accept(scanner.TokenType.Ident, 'and', true); + } + return node; + } + + public _parseMediaFeatureName(): nodes.Node { + return this._parseIdent(); + } + + public _parseMediaList(): nodes.Medialist { + let node = this.create(nodes.Medialist); + if (node.getMediums().addChild(this._parseMedium())) { + while (this.accept(scanner.TokenType.Comma)) { + if (!node.getMediums().addChild(this._parseMedium())) { + return this.finish(node, errors.ParseError.IdentifierExpected); + } + } + return this.finish(node); + } + return null; + } + + public _parseMedium(): nodes.Node { + let node = this.create(nodes.Node); + if (node.addChild(this._parseIdent())) { + return this.finish(node); + } else { + return null; + } + } + + public _parsePageDeclaration(): nodes.Node { + return this._parsePageMarginBox() || this._parseRuleSetDeclaration(); + } + + public _parsePage(): nodes.Node { + // http://www.w3.org/TR/css3-page/ + // page_rule : PAGE_SYM S* page_selector_list '{' S* page_body '}' S* + // page_body : /* Can be empty */ declaration? [ ';' S* page_body ]? | page_margin_box page_body + + let node = this.create(nodes.Page); + if (!this.accept(scanner.TokenType.AtKeyword, '@Page')) { + return null; + } + if (node.addChild(this._parsePageSelector())) { + while (this.accept(scanner.TokenType.Comma)) { + if (!node.addChild(this._parsePageSelector())) { + return this.finish(node, errors.ParseError.IdentifierExpected); + } + } + } + + return this._parseBody(node, this._parsePageDeclaration.bind(this)); + } + + public _parsePageMarginBox(): nodes.Node { + // page_margin_box : margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S* + let node = this.create(nodes.PageBoxMarginBox); + if (!this.peek(scanner.TokenType.AtKeyword)) { + return null; + } + + if (!this.acceptOne(scanner.TokenType.AtKeyword, languageFacts.getPageBoxDirectives())) { + this.markError(node, errors.ParseError.UnknownAtRule, [], [scanner.TokenType.CurlyL]); + } + + return this._parseBody(node, this._parseRuleSetDeclaration.bind(this)); + } + + + public _parsePageSelector(): nodes.Node { + // page_selector : pseudo_page+ | IDENT pseudo_page* + // pseudo_page : ':' [ "left" | "right" | "first" | "blank" ]; + + let node = this.create(nodes.Node); + if (!this.peek(scanner.TokenType.Ident) && !this.peek(scanner.TokenType.Colon)) { + return null; + } + node.addChild(this._parseIdent()); // optional ident + + if (this.accept(scanner.TokenType.Colon)) { + if (!node.addChild(this._parseIdent())) { // optional ident + return this.finish(node, errors.ParseError.IdentifierExpected); + } + } + return this.finish(node); + } + + public _parseDocument(): nodes.Node { + // -moz-document is experimental but has been pushed to css4 + + let node = this.create(nodes.Document); + if (!this.accept(scanner.TokenType.AtKeyword, '@-moz-document')) { + return null; + } + this.resync([], [scanner.TokenType.CurlyL]); // ignore all the rules + return this._parseBody(node, this._parseStylesheetStatement.bind(this)); + } + + public _parseOperator(): nodes.Node { + // these are operators for binary expressions + let node = this.createNode(nodes.NodeType.Operator); + if (this.accept(scanner.TokenType.Delim, '/') || + this.accept(scanner.TokenType.Delim, '*') || + this.accept(scanner.TokenType.Delim, '+') || + this.accept(scanner.TokenType.Delim, '-') || + this.accept(scanner.TokenType.Dashmatch) || + this.accept(scanner.TokenType.Includes) || + this.accept(scanner.TokenType.SubstringOperator) || + this.accept(scanner.TokenType.PrefixOperator) || + this.accept(scanner.TokenType.SuffixOperator) || + this.accept(scanner.TokenType.Delim, '=')) { // doesn't stick to the standard here + + return this.finish(node); + + } else { + return null; + } + } + + public _parseUnaryOperator(): nodes.Node { + let node = this.create(nodes.Node); + if (this.accept(scanner.TokenType.Delim, '+') || this.accept(scanner.TokenType.Delim, '-')) { + return this.finish(node); + } else { + return null; + } + } + + public _parseCombinator(): nodes.Node { + let node = this.create(nodes.Node); + if (this.accept(scanner.TokenType.Delim, '>')) { + node.type = nodes.NodeType.SelectorCombinatorParent; + return this.finish(node); + } else if (this.accept(scanner.TokenType.Delim, '+')) { + node.type = nodes.NodeType.SelectorCombinatorSibling; + return this.finish(node); + } else if (this.accept(scanner.TokenType.Delim, '~')) { + node.type = nodes.NodeType.SelectorCombinatorAllSiblings; + return this.finish(node); + } else { + return null; + } + } + + public _parseSimpleSelector(): nodes.Node { + // simple_selector + // : element_name [ HASH | class | attrib | pseudo ]* | [ HASH | class | attrib | pseudo ]+ ; + + let node = this.create(nodes.SimpleSelector); + let c = 0; + if (node.addChild(this._parseElementName())) { + c++; + } + while ((c === 0 || !this.hasWhitespace()) && node.addChild(this._parseSimpleSelectorBody())) { + c++; + } + return c > 0 ? this.finish(node) : null; + } + + public _parseSimpleSelectorBody(): nodes.Node { + return this._parsePseudo() || this._parseHash() || this._parseClass() || this._parseAttrib(); + } + + public _parseSelectorIdent(): nodes.Node { + return this._parseIdent(); + } + + public _parseHash(): nodes.Node { + if (!this.peek(scanner.TokenType.Hash) && !this.peek(scanner.TokenType.Delim, '#')) { + return null; + } + let node = this.createNode(nodes.NodeType.IdentifierSelector); + if (this.accept(scanner.TokenType.Delim, '#')) { + if (this.hasWhitespace() || !node.addChild(this._parseSelectorIdent())) { + return this.finish(node, errors.ParseError.IdentifierExpected); + } + } else { + this.consumeToken(); // TokenType.Hash + } + return this.finish(node); + } + + public _parseClass(): nodes.Node { + // class: '.' IDENT ; + if (!this.peek(scanner.TokenType.Delim, '.')) { + return null; + } + let node = this.createNode(nodes.NodeType.ClassSelector); + this.consumeToken(); // '.' + if (this.hasWhitespace() || !node.addChild(this._parseSelectorIdent())) { + return this.finish(node, errors.ParseError.IdentifierExpected); + } + return this.finish(node); + } + + public _parseElementName(): nodes.Node { + // element_name: IDENT | '*'; + let node = this.createNode(nodes.NodeType.ElementNameSelector); + if (node.addChild(this._parseSelectorIdent()) || this.accept(scanner.TokenType.Delim, '*')) { + return this.finish(node); + } + return null; + } + + public _parseAttrib(): nodes.Node { + // attrib : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ]? ']' + if (!this.peek(scanner.TokenType.BracketL)) { + return null; + } + let node = this.createNode(nodes.NodeType.AttributeSelector); + this.consumeToken(); // BracketL + if (!node.addChild(this._parseBinaryExpr())) { + // is this bad? + } + if (!this.accept(scanner.TokenType.BracketR)) { + return this.finish(node, errors.ParseError.RightSquareBracketExpected); + } + return this.finish(node); + } + + public _parsePseudo(): nodes.Node { + // pseudo: ':' [ IDENT | FUNCTION S* [IDENT S*]? ')' ] + if (!this.peek(scanner.TokenType.Colon)) { + return null; + } + let pos = this.mark(); + let node = this.createNode(nodes.NodeType.PseudoSelector); + this.consumeToken(); // Colon + if (!this.hasWhitespace() && this.accept(scanner.TokenType.Colon)) { + // optional, support :: + } + if (!this.hasWhitespace()) { + if (!node.addChild(this._parseIdent())) { + return this.finish(node, errors.ParseError.IdentifierExpected); + } + if (!this.hasWhitespace() && this.accept(scanner.TokenType.ParenthesisL)) { + node.addChild(this._parseBinaryExpr() || this._parseSimpleSelector()); + if (!this.accept(scanner.TokenType.ParenthesisR)) { + return this.finish(node, errors.ParseError.RightParenthesisExpected); + } + } + return this.finish(node); + } + this.restoreAtMark(pos); + return null; + } + + public _parsePrio(): nodes.Node { + if (!this.peek(scanner.TokenType.Exclamation)) { + return null; + } + + let node = this.createNode(nodes.NodeType.Prio); + if (this.accept(scanner.TokenType.Exclamation) && this.accept(scanner.TokenType.Ident, 'important', true)) { + return this.finish(node); + } + return null; + } + + public _parseExpr(stopOnComma: boolean = false): nodes.Expression { + let node = this.create(nodes.Expression); + if (!node.addChild(this._parseBinaryExpr())) { + return null; + } + + while (true) { + if (this.peek(scanner.TokenType.Comma)) { // optional + if (stopOnComma) { + return this.finish(node); + } + this.consumeToken(); + } + if (!node.addChild(this._parseBinaryExpr())) { + break; + } + } + + return this.finish(node); + } + + public _parseBinaryExpr(preparsedLeft?: nodes.BinaryExpression, preparsedOper?: nodes.Node): nodes.Node { + let node = this.create(nodes.BinaryExpression); + + if (!node.setLeft((preparsedLeft || this._parseTerm()))) { + return null; + } + + if (!node.setOperator(preparsedOper || this._parseOperator())) { + return this.finish(node); + } + + if (!node.setRight(this._parseTerm())) { + return this.finish(node, errors.ParseError.TermExpected); + } + + // things needed for multiple binary expressions + node = this.finish(node); + let operator = this._parseOperator(); + if (operator) { + node = this._parseBinaryExpr(node, operator); + } + + return this.finish(node); + } + + public _parseTerm(): nodes.Term { + + let node = this.create(nodes.Term); + node.setOperator(this._parseUnaryOperator()); // optional + + if (node.setExpression(this._parseFunction()) || // first function then ident + node.setExpression(this._parseIdent()) || + node.setExpression(this._parseURILiteral()) || + node.setExpression(this._parseStringLiteral()) || + node.setExpression(this._parseNumeric()) || + node.setExpression(this._parseHexColor()) || + node.setExpression(this._parseOperation()) + ) { + return this.finish(node); + } + + return null; + } + + public _parseOperation(): nodes.Node { + let node = this.create(nodes.Node); + if (!this.accept(scanner.TokenType.ParenthesisL)) { + return null; + } + node.addChild(this._parseExpr()); + if (!this.accept(scanner.TokenType.ParenthesisR)) { + return this.finish(node, errors.ParseError.RightParenthesisExpected); + } + return this.finish(node); + } + + public _parseNumeric(): nodes.NumericValue { + let node = this.create(nodes.NumericValue); + if (this.accept(scanner.TokenType.Num) || + this.accept(scanner.TokenType.Percentage) || + this.accept(scanner.TokenType.Resolution) || + this.accept(scanner.TokenType.Length) || + this.accept(scanner.TokenType.EMS) || + this.accept(scanner.TokenType.EXS) || + this.accept(scanner.TokenType.Angle) || + this.accept(scanner.TokenType.Time) || + this.accept(scanner.TokenType.Dimension) || + this.accept(scanner.TokenType.Freq)) { + + return this.finish(node); + } + + return null; + } + + public _parseStringLiteral(): nodes.Node { + let node = this.createNode(nodes.NodeType.StringLiteral); + if (this.accept(scanner.TokenType.String) || this.accept(scanner.TokenType.BadString)) { + return this.finish(node); + } + return null; + } + + public _parseURILiteral(): nodes.Node { + let node = this.createNode(nodes.NodeType.URILiteral); + if (this.accept(scanner.TokenType.URI) || this.accept(scanner.TokenType.BadUri)) { + return this.finish(node); + } + return null; + } + + public _parseIdent(referenceTypes?: nodes.ReferenceType[]): nodes.Identifier { + let node = this.create(nodes.Identifier); + if (referenceTypes) { + node.referenceTypes = referenceTypes; + } + if (this.accept(scanner.TokenType.Ident)) { + return this.finish(node); + } + return null; + } + + public _parseFunction(): nodes.Function { + + let pos = this.mark(); + let node = this.create(nodes.Function); + + if (!node.setIdentifier(this._parseFunctionIdentifier())) { + return null; + } + + if (this.hasWhitespace() || !this.accept(scanner.TokenType.ParenthesisL)) { + this.restoreAtMark(pos); + return null; + } + + if (node.getArguments().addChild(this._parseFunctionArgument())) { + while (this.accept(scanner.TokenType.Comma)) { + if (!node.getArguments().addChild(this._parseFunctionArgument())) { + this.markError(node, errors.ParseError.ExpressionExpected); + } + } + } + + if (!this.accept(scanner.TokenType.ParenthesisR)) { + return this.finish(node, errors.ParseError.RightParenthesisExpected); + } + return this.finish(node); + } + + public _parseFunctionIdentifier(): nodes.Identifier { + let node = this.create(nodes.Identifier); + node.referenceTypes = [nodes.ReferenceType.Function]; + + if (this.accept(scanner.TokenType.Ident, 'progid')) { + // support for IE7 specific filters: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)' + if (this.accept(scanner.TokenType.Colon)) { + while (this.accept(scanner.TokenType.Ident) && this.accept(scanner.TokenType.Delim, '.')) { + // loop + } + } + return this.finish(node); + } else if (this.accept(scanner.TokenType.Ident)) { + return this.finish(node); + } + return null; + } + + public _parseFunctionArgument(): nodes.Node { + let node = this.create(nodes.FunctionArgument); + if (node.setValue(this._parseExpr(true))) { + return this.finish(node); + } + return null; + } + + public _parseHexColor(): nodes.Node { + if (this.peekRegExp(scanner.TokenType.Hash, /^#[0-9A-Fa-f]{3}([0-9A-Fa-f]{3})?$/g)) { + let node = this.create(nodes.HexColorValue); + this.consumeToken(); + return this.finish(node); + } else { + return null; + } + } +} diff --git a/extensions/css/server/src/parser/cssScanner.ts b/extensions/css/server/src/parser/cssScanner.ts new file mode 100644 index 0000000000000000000000000000000000000000..cfc6f0391444b349efcf9dacbb8e7aa74f9163fb --- /dev/null +++ b/extensions/css/server/src/parser/cssScanner.ts @@ -0,0 +1,654 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +export enum TokenType { + Ident, + AtKeyword, + String, + BadString, + BadUri, + Hash, + Num, + Percentage, + Dimension, + URI, + UnicodeRange, + CDO, + CDC, + Colon, + SemiColon, + CurlyL, + CurlyR, + ParenthesisL, + ParenthesisR, + BracketL, + BracketR, + Whitespace, + Includes, + Dashmatch, + SubstringOperator, + PrefixOperator, + SuffixOperator, + Delim, + EMS, + EXS, + Length, + Angle, + Time, + Freq, + Exclamation, + Resolution, + Comma, + Charset, + EscapedJavaScript, + BadEscapedJavaScript, + Comment, + SingleLineComment, + EOF, + CustomToken +} + +export interface IToken { + type: TokenType; + text: string; + offset: number; + len: number; +} + +export class MultiLineStream { + + private source: string; + private len: number; + private position: number; + + constructor(source: string) { + this.source = source; + this.len = source.length; + this.position = 0; + } + + public substring(from: number, to: number = this.position): string { + return this.source.substring(from, to); + } + + public eos(): boolean { + return this.len <= this.position; + } + + public pos(): number { + return this.position; + } + + public goBackTo(pos: number): void { + this.position = pos; + } + + public goBack(n: number): void { + this.position -= n; + } + + public advance(n: number): void { + this.position += n; + } + + public nextChar(): number { + return this.source.charCodeAt(this.position++) || 0; + } + + public peekChar(n: number = 0): number { + return this.source.charCodeAt(this.position + n) || 0; + } + + public lookbackChar(n: number = 0): number { + return this.source.charCodeAt(this.position - n) || 0; + } + + public advanceIfChar(ch: number): boolean { + if (ch === this.source.charCodeAt(this.position)) { + this.position++; + return true; + } + return false; + } + + public advanceIfChars(ch: number[]): boolean { + let i: number; + if (this.position + ch.length > this.source.length) { + return false; + } + for (i = 0; i < ch.length; i++) { + if (this.source.charCodeAt(this.position + i) !== ch[i]) { + return false; + } + } + this.advance(i); + return true; + } + + public advanceWhileChar(condition: (ch: number) => boolean): number { + let posNow = this.position; + while (this.position < this.len && condition(this.source.charCodeAt(this.position))) { + this.position++; + } + return this.position - posNow; + } +} + +const _a = 'a'.charCodeAt(0); +const _e = 'e'.charCodeAt(0); +const _f = 'f'.charCodeAt(0); +const _i = 'i'.charCodeAt(0); +const _l = 'l'.charCodeAt(0); +const _p = 'p'.charCodeAt(0); +const _r = 'r'.charCodeAt(0); +const _u = 'u'.charCodeAt(0); +const _x = 'x'.charCodeAt(0); +const _z = 'z'.charCodeAt(0); +const _A = 'A'.charCodeAt(0); +const _E = 'E'.charCodeAt(0); +const _F = 'F'.charCodeAt(0); +const _I = 'I'.charCodeAt(0); +const _L = 'L'.charCodeAt(0); +const _P = 'P'.charCodeAt(0); +const _R = 'R'.charCodeAt(0); +const _U = 'U'.charCodeAt(0); +const _X = 'X'.charCodeAt(0); +const _Z = 'Z'.charCodeAt(0); +const _0 = '0'.charCodeAt(0); +const _9 = '9'.charCodeAt(0); +const _TLD = '~'.charCodeAt(0); +const _HAT = '^'.charCodeAt(0); +const _EQS = '='.charCodeAt(0); +const _PIP = '|'.charCodeAt(0); +const _MIN = '-'.charCodeAt(0); +const _USC = '_'.charCodeAt(0); +const _PRC = '%'.charCodeAt(0); +const _MUL = '*'.charCodeAt(0); +const _LPA = '('.charCodeAt(0); +const _RPA = ')'.charCodeAt(0); +const _LAN = '<'.charCodeAt(0); +const _RAN = '>'.charCodeAt(0); +const _ATS = '@'.charCodeAt(0); +const _HSH = '#'.charCodeAt(0); +const _DLR = '$'.charCodeAt(0); +const _BSL = '\\'.charCodeAt(0); +const _FSL = '/'.charCodeAt(0); +const _NWL = '\n'.charCodeAt(0); +const _CAR = '\r'.charCodeAt(0); +const _LFD = '\f'.charCodeAt(0); +const _DQO = '"'.charCodeAt(0); +const _SQO = '\''.charCodeAt(0); +const _WSP = ' '.charCodeAt(0); +const _TAB = '\t'.charCodeAt(0); +const _SEM = ';'.charCodeAt(0); +const _COL = ':'.charCodeAt(0); +const _CUL = '{'.charCodeAt(0); +const _CUR = '}'.charCodeAt(0); +const _BRL = '['.charCodeAt(0); +const _BRR = ']'.charCodeAt(0); +const _CMA = ','.charCodeAt(0); +const _DOT = '.'.charCodeAt(0); +const _BNG = '!'.charCodeAt(0); + +const _url = [_u, _U, _r, _R, _l, _L, _LPA, _LPA]; +const _url_prefix = [_u, _U, _r, _R, _l, _L, _MIN, _MIN, _p, _P, _r, _R, _e, _E, _f, _F, _i, _I, _x, _X, _LPA, _LPA]; + +const staticTokenTable: { [code: number]: TokenType; } = {}; +staticTokenTable[_SEM] = TokenType.SemiColon; +staticTokenTable[_COL] = TokenType.Colon; +staticTokenTable[_CUL] = TokenType.CurlyL; +staticTokenTable[_CUR] = TokenType.CurlyR; +staticTokenTable[_BRR] = TokenType.BracketR; +staticTokenTable[_BRL] = TokenType.BracketL; +staticTokenTable[_LPA] = TokenType.ParenthesisL; +staticTokenTable[_RPA] = TokenType.ParenthesisR; +staticTokenTable[_CMA] = TokenType.Comma; + +const staticUnitTable: { [code: number]: TokenType; } = {}; +staticUnitTable['em'] = TokenType.EMS; +staticUnitTable['ex'] = TokenType.EXS; +staticUnitTable['px'] = TokenType.Length; +staticUnitTable['cm'] = TokenType.Length; +staticUnitTable['mm'] = TokenType.Length; +staticUnitTable['in'] = TokenType.Length; +staticUnitTable['pt'] = TokenType.Length; +staticUnitTable['pc'] = TokenType.Length; +staticUnitTable['deg'] = TokenType.Angle; +staticUnitTable['rad'] = TokenType.Angle; +staticUnitTable['grad'] = TokenType.Angle; +staticUnitTable['ms'] = TokenType.Time; +staticUnitTable['s'] = TokenType.Time; +staticUnitTable['hz'] = TokenType.Freq; +staticUnitTable['khz'] = TokenType.Freq; +staticUnitTable['%'] = TokenType.Percentage; +staticUnitTable['dpi'] = TokenType.Resolution; +staticUnitTable['dpcm'] = TokenType.Resolution; + +export class Scanner { + + public stream: MultiLineStream; + public ignoreComment = true; + public ignoreWhitespace = true; + + public setSource(input: string): void { + this.stream = new MultiLineStream(input); + } + + public finishToken(offset: number, type: TokenType, text?: string): IToken { + return { + offset: offset, + len: this.stream.pos() - offset, + type: type, + text: text || this.stream.substring(offset) + }; + } + + public substring(offset: number, len: number): string { + return this.stream.substring(offset, offset + len); + } + + public pos(): number { + return this.stream.pos(); + } + + public goBackTo(pos: number): void { + this.stream.goBackTo(pos); + } + + public scan(): IToken { + // processes all whitespaces and comments + let triviaToken = this.trivia(); + if (triviaToken !== null) { + return triviaToken; + } + + let offset = this.stream.pos(); + + // End of file/input + if (this.stream.eos()) { + return this.finishToken(offset, TokenType.EOF); + } + + // CDO + if (this.stream.advanceIfChars([_MIN, _MIN, _RAN])) { + return this.finishToken(offset, TokenType.CDC); + } + + // URL + let tokenType = this._url(); + if (tokenType !== null) { + return this.finishToken(offset, tokenType); + } + + let content: string[] = []; + if (this.ident(content)) { + return this.finishToken(offset, TokenType.Ident, content.join('')); + } + + // at-keyword + if (this.stream.advanceIfChar(_ATS)) { + content = ['@']; + if (this._name(content)) { + let keywordText = content.join(''); + if (keywordText === '@charset') { + return this.finishToken(offset, TokenType.Charset, keywordText); + } + return this.finishToken(offset, TokenType.AtKeyword, keywordText); + } else { + return this.finishToken(offset, TokenType.Delim); + } + } + + // hash + if (this.stream.advanceIfChar(_HSH)) { + content = ['#']; + if (this._name(content)) { + return this.finishToken(offset, TokenType.Hash, content.join('')); + } else { + return this.finishToken(offset, TokenType.Delim); + } + } + + // Important + if (this.stream.advanceIfChar(_BNG)) { + return this.finishToken(offset, TokenType.Exclamation); + } + + // Numbers + if (this._number()) { + + let pos = this.stream.pos(); + content = [this.stream.substring(offset, pos)]; + if (this.stream.advanceIfChar(_PRC)) { + // Percentage 43% + return this.finishToken(offset, TokenType.Percentage); + } else if (this.ident(content)) { + let dim = this.stream.substring(pos).toLowerCase(); + tokenType = staticUnitTable[dim]; + if (typeof tokenType !== 'undefined') { + // Known dimension 43px + return this.finishToken(offset, tokenType, content.join('')); + } else { + // Unknown dimension 43ft + return this.finishToken(offset, TokenType.Dimension, content.join('')); + } + } + + return this.finishToken(offset, TokenType.Num); + } + + // String, BadString + content = []; + tokenType = this._string(content); + if (tokenType !== null) { + return this.finishToken(offset, tokenType, content.join('')); + } + + // single character tokens + tokenType = staticTokenTable[this.stream.peekChar()]; + if (typeof tokenType !== 'undefined') { + this.stream.advance(1); + return this.finishToken(offset, tokenType); + } + + // includes ~= + if (this.stream.peekChar(0) === _TLD && this.stream.peekChar(1) === _EQS) { + this.stream.advance(2); + return this.finishToken(offset, TokenType.Includes); + } + + // DashMatch |= + if (this.stream.peekChar(0) === _PIP && this.stream.peekChar(1) === _EQS) { + this.stream.advance(2); + return this.finishToken(offset, TokenType.Dashmatch); + } + + // Substring operator *= + if (this.stream.peekChar(0) === _MUL && this.stream.peekChar(1) === _EQS) { + this.stream.advance(2); + return this.finishToken(offset, TokenType.SubstringOperator); + } + + // Substring operator ^= + if (this.stream.peekChar(0) === _HAT && this.stream.peekChar(1) === _EQS) { + this.stream.advance(2); + return this.finishToken(offset, TokenType.PrefixOperator); + } + + // Substring operator $= + if (this.stream.peekChar(0) === _DLR && this.stream.peekChar(1) === _EQS) { + this.stream.advance(2); + return this.finishToken(offset, TokenType.SuffixOperator); + } + + // Delim + this.stream.nextChar(); + return this.finishToken(offset, TokenType.Delim); + } + + private _matchWordAnyCase(characters: number[]): boolean { + let index = 0; + this.stream.advanceWhileChar((ch: number) => { + let result = characters[index] === ch || characters[index + 1] === ch; + if (result) { + index += 2; + } + return result; + }); + if (index === characters.length) { + return true; + } else { + this.stream.goBack(index / 2); + return false; + } + } + + protected trivia(): IToken { + while (true) { + let offset = this.stream.pos(); + if (this._whitespace()) { + if (!this.ignoreWhitespace) { + return this.finishToken(offset, TokenType.Whitespace); + } + } else if (this.comment()) { + if (!this.ignoreComment) { + return this.finishToken(offset, TokenType.Comment); + } + } else { + return null; + } + } + } + + protected comment(): boolean { + if (this.stream.advanceIfChars([_FSL, _MUL])) { + let success = false, hot = false; + this.stream.advanceWhileChar((ch) => { + if (hot && ch === _FSL) { + success = true; + return false; + } + hot = ch === _MUL; + return true; + }); + if (success) { + this.stream.advance(1); + } + return true; + } + + return false; + } + + private _number(): boolean { + let npeek = 0, ch: number; + if (this.stream.peekChar() === _DOT) { + npeek = 1; + } + ch = this.stream.peekChar(npeek); + if (ch >= _0 && ch <= _9) { + this.stream.advance(npeek + 1); + this.stream.advanceWhileChar((ch) => { + return ch >= _0 && ch <= _9 || npeek === 0 && ch === _DOT; + }); + return true; + } + return false; + } + + private _newline(result: string[]): boolean { + let ch = this.stream.peekChar(); + switch (ch) { + case _CAR: + case _LFD: + case _NWL: + this.stream.advance(1); + result.push(String.fromCharCode(ch)); + if (ch === _CAR && this.stream.advanceIfChar(_NWL)) { + result.push('\n'); + } + return true; + } + + + return false; + } + + private _escape(result: string[], includeNewLines?: boolean): boolean { + let ch = this.stream.peekChar(); + if (ch === _BSL) { + this.stream.advance(1); + ch = this.stream.peekChar(); + let hexNumCount = 0; + while (hexNumCount < 6 && (ch >= _0 && ch <= _9 || ch >= _a && ch <= _f || ch >= _A && ch <= _F)) { + this.stream.advance(1); + ch = this.stream.peekChar(); + hexNumCount++; + } + if (hexNumCount > 0) { + try { + let hexVal = parseInt(this.stream.substring(this.stream.pos() - hexNumCount), 16); + if (hexVal) { + result.push(String.fromCharCode(hexVal)); + } + } catch (e) { + // ignore + } + + // optional whitespace or new line, not part of result text + if (ch === _WSP || ch === _TAB) { + this.stream.advance(1); + } else { + this._newline([]); + } + return true; + } + if (ch !== _CAR && ch !== _LFD && ch !== _NWL) { + this.stream.advance(1); + result.push(String.fromCharCode(ch)); + return true; + } else if (includeNewLines) { + return this._newline(result); + } + } + return false; + } + + private _stringChar(closeQuote: number, result: string[]) { + // not closeQuote, not backslash, not newline + let ch = this.stream.peekChar(); + if (ch !== 0 && ch !== closeQuote && ch !== _BSL && ch !== _CAR && ch !== _LFD && ch !== _NWL) { + this.stream.advance(1); + result.push(String.fromCharCode(ch)); + return true; + } + return false; + }; + + private _string(result: string[]): TokenType { + if (this.stream.peekChar() === _SQO || this.stream.peekChar() === _DQO) { + let closeQuote = this.stream.nextChar(); + result.push(String.fromCharCode(closeQuote)); + + while (this._stringChar(closeQuote, result) || this._escape(result, true)) { + // loop + } + + if (this.stream.peekChar() === closeQuote) { + this.stream.nextChar(); + result.push(String.fromCharCode(closeQuote)); + return TokenType.String; + } else { + return TokenType.BadString; + } + } + return null; + } + + private _url(): TokenType { + if (this._matchWordAnyCase(_url) || this._matchWordAnyCase(_url_prefix)) { + this._whitespace(); + let tokenType = TokenType.URI, stringType = this._string([]); + if (stringType === TokenType.BadString) { + tokenType = TokenType.BadUri; + + } else if (stringType === null) { + this.stream.advanceWhileChar((ch) => { + return ch !== _RPA; + }); + tokenType = TokenType.URI; + } + this._whitespace(); + if (this.stream.advanceIfChar(_RPA)) { + return tokenType; + } else { + return TokenType.BadUri; + } + } + + return null; + } + + private _whitespace(): boolean { + let n = this.stream.advanceWhileChar((ch) => { + return ch === _WSP || ch === _TAB || ch === _NWL || ch === _LFD || ch === _CAR; + }); + return n > 0; + } + + private _name(result: string[]): boolean { + let matched = false; + while (this._identChar(result) || this._escape(result)) { + matched = true; + } + return matched; + } + + protected ident(result: string[]): boolean { + let pos = this.stream.pos(); + let hasMinus = this._minus(result); + if (hasMinus && this._minus(result) /* -- */) { + let hasContent = false; + while (this._identChar(result) || this._escape(result)) { + hasContent = true; + } + if (hasContent) { + return true; + } + } else if (this._identFirstChar(result) || this._escape(result)) { + while (this._identChar(result) || this._escape(result)) { + // loop + } + return true; + } + this.stream.goBackTo(pos); + return false; + } + + private _identFirstChar(result: string[]): boolean { + let ch = this.stream.peekChar(); + if (ch === _USC || // _ + ch >= _a && ch <= _z || // a-z + ch >= _A && ch <= _Z || // A-Z + ch >= 0x80 && ch <= 0xFFFF) { // nonascii + this.stream.advance(1); + result.push(String.fromCharCode(ch)); + return true; + } + return false; + } + + + private _minus(result: string[]): boolean { + let ch = this.stream.peekChar(); + if (ch === _MIN) { + this.stream.advance(1); + result.push(String.fromCharCode(ch)); + return true; + } + return false; + } + + private _identChar(result: string[]): boolean { + let ch = this.stream.peekChar(); + if (ch === _USC || // _ + ch === _MIN || // - + ch >= _a && ch <= _z || // a-z + ch >= _A && ch <= _Z || // A-Z + ch >= _0 && ch <= _9 || // 0/9 + ch >= 0x80 && ch <= 0xFFFF) { // nonascii + this.stream.advance(1); + result.push(String.fromCharCode(ch)); + return true; + } + return false; + } +} diff --git a/extensions/css/server/src/parser/cssSymbolScope.ts b/extensions/css/server/src/parser/cssSymbolScope.ts new file mode 100644 index 0000000000000000000000000000000000000000..a29ca57da03a9ec96af0410581302a218200f266 --- /dev/null +++ b/extensions/css/server/src/parser/cssSymbolScope.ts @@ -0,0 +1,362 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from './cssNodes'; +import {findFirst} from '../utils/arrays'; + +export class Scope { + + public parent: Scope; + public children: Scope[]; + + public offset: number; + public length: number; + + private symbols: Symbol[]; + + constructor(offset: number, length: number) { + this.offset = offset; + this.length = length; + this.symbols = []; + + this.parent = null; + this.children = []; + } + + public addChild(scope: Scope): void { + this.children.push(scope); + scope.setParent(this); + } + + public setParent(scope: Scope): void { + this.parent = scope; + } + + public findScope(offset: number, length: number = 0): Scope { + if (this.offset <= offset && this.offset + this.length > offset + length || this.offset === offset && this.length === length) { + return this.findInScope(offset, length); + } + return null; + } + + private findInScope(offset: number, length: number = 0): Scope { + // find the first scope child that has an offset larger than offset + length + let end = offset + length; + let idx = findFirst(this.children, s => s.offset > end); + if (idx === 0) { + // all scopes have offsets larger than our end + return this; + } + + let res = this.children[idx - 1]; + if (res.offset <= offset && res.offset + res.length >= offset + length) { + return res.findInScope(offset, length); + } + return this; + } + + public addSymbol(symbol: Symbol): void { + this.symbols.push(symbol); + } + + public getSymbol(name: string, type: nodes.ReferenceType): Symbol { + for (let index = 0; index < this.symbols.length; index++) { + let symbol = this.symbols[index]; + if (symbol.name === name && symbol.type === type) { + return symbol; + } + } + return null; + } + + public getSymbols(): Symbol[] { + return this.symbols; + } +} + +export class GlobalScope extends Scope { + + constructor() { + super(0, Number.MAX_VALUE); + } +} + + + +export class Symbol { + + public name: string; + public type: nodes.ReferenceType; + public node: nodes.Node; + + constructor(name: string, node: nodes.Node, type: nodes.ReferenceType) { + this.name = name; + this.node = node; + this.type = type; + } +} + +export class ScopeBuilder implements nodes.IVisitor { + + public scope: Scope; + + constructor(scope: Scope) { + this.scope = scope; + } + + private addSymbol(node: nodes.Node, name: string, type: nodes.ReferenceType): void { + if (node.offset !== -1) { + let current = this.scope.findScope(node.offset, node.length); + current.addSymbol(new Symbol(name, node, type)); + } + } + + private addScope(node: nodes.Node): Scope { + if (node.offset !== -1) { + let current = this.scope.findScope(node.offset, node.length); + if (current.offset !== node.offset || current.length !== node.length) { // scope already known? + let newScope = new Scope(node.offset, node.length); + current.addChild(newScope); + return newScope; + } + return current; + } + return null; + } + + private addSymbolToChildScope(scopeNode: nodes.Node, node: nodes.Node, name: string, type: nodes.ReferenceType): void { + if (scopeNode && scopeNode.offset !== -1) { + let current = this.addScope(scopeNode); // create the scope or gets the existing one + current.addSymbol(new Symbol(name, node, type)); + } + } + + public visitNode(node: nodes.Node): boolean { + switch (node.type) { + case nodes.NodeType.Keyframe: + this.addSymbol(node, (node).getName(), nodes.ReferenceType.Keyframe); + return true; + case nodes.NodeType.Declaration: + return this.visitDeclarationNode(node); + case nodes.NodeType.VariableDeclaration: + return this.visitVariableDeclarationNode(node); + case nodes.NodeType.Ruleset: + return this.visitRuleSet(node); + case nodes.NodeType.MixinDeclaration: + this.addSymbol(node, (node).getName(), nodes.ReferenceType.Mixin); + return true; + case nodes.NodeType.FunctionDeclaration: + this.addSymbol(node, (node).getName(), nodes.ReferenceType.Function); + return true; + case nodes.NodeType.FunctionParameter: { + // parameters are part of the body scope + let scopeNode = (node.getParent()).getDeclarations(); + if (scopeNode) { + this.addSymbolToChildScope(scopeNode, node, (node).getName(), nodes.ReferenceType.Variable); + } + return true; + } + case nodes.NodeType.Declarations: + this.addScope(node); + return true; + case nodes.NodeType.For: + case nodes.NodeType.Each: { + let forOrEachNode = node; + let scopeNode = forOrEachNode.getDeclarations(); + if (scopeNode) { + this.addSymbolToChildScope(scopeNode, forOrEachNode.variable, forOrEachNode.variable.getName(), nodes.ReferenceType.Variable); + } + return true; + } + } + return true; + } + + public visitRuleSet(node: nodes.RuleSet): boolean { + let current = this.scope.findScope(node.offset, node.length); + node.getSelectors().getChildren().forEach((child) => { + if (child instanceof nodes.Selector) { + if (child.getChildren().length === 1) { // only selectors with a single element can be extended + current.addSymbol(new Symbol(child.getChild(0).getText(), child, nodes.ReferenceType.Rule)); + } + } + }); + + return true; + } + + public visitVariableDeclarationNode(node: nodes.VariableDeclaration): boolean { + this.addSymbol(node, (node).getName(), nodes.ReferenceType.Variable); + return true; + } + + public visitDeclarationNode(node: nodes.Declaration): boolean { + if (Symbols.isCssVariable(node.getProperty().getIdentifier())) { + this.addCSSVariable(node.getProperty(), node.getProperty().getName(), nodes.ReferenceType.Variable); + } + return true; + } + + private addCSSVariable(node: nodes.Node, name: string, type: nodes.ReferenceType): void { + if (node.offset !== -1) { + let globalScope = this.getGlobalScope(node, name, type); + globalScope.addSymbol(new Symbol(name, node, type)); + } + } + + private getGlobalScope(node: nodes.Node, name: string, type: nodes.ReferenceType): Scope { + let current = this.scope.findScope(node.offset, node.length); + while (current.parent !== null) { + current = current.parent; + } + return current; + } +} + +export class Symbols { + + private global: Scope; + + constructor(node: nodes.Node) { + this.global = new GlobalScope(); + node.accept(new ScopeBuilder(this.global)); + } + + public findSymbolsAtOffset(offset: number, referenceType: nodes.ReferenceType): Symbol[] { + let scope = this.global.findScope(offset, 0); + let result: Symbol[] = []; + let names: { [name: string]: boolean } = {}; + while (scope) { + let symbols = scope.getSymbols(); + for (let i = 0; i < symbols.length; i++) { + let symbol = symbols[i]; + if (symbol.node.offset <= offset && symbol.type === referenceType && !names[symbol.name]) { + result.push(symbol); + names[symbol.name] = true; + } + } + scope = scope.parent; + } + return result; + } + + private internalFindSymbol(node: nodes.Node, referenceTypes: nodes.ReferenceType[]): Symbol { + let scopeNode = node; + if (node.parent instanceof nodes.FunctionParameter && node.parent.getParent() instanceof nodes.BodyDeclaration) { + scopeNode = (node.parent.getParent()).getDeclarations(); + } + if (node.parent instanceof nodes.FunctionArgument && node.parent.getParent() instanceof nodes.Function) { + let funcId = (node.parent.getParent()).getIdentifier(); + if (funcId) { + let functionSymbol = this.internalFindSymbol(funcId, [nodes.ReferenceType.Function]); + if (functionSymbol) { + scopeNode = (functionSymbol.node).getDeclarations(); + } + } + } + if (!scopeNode) { + return null; + } + let name = node.getText(); + let scope = this.global.findScope(scopeNode.offset, scopeNode.length); + while (scope) { + for (let index = 0; index < referenceTypes.length; index++) { + let type = referenceTypes[index]; + let symbol = scope.getSymbol(name, type); + if (symbol) { + return symbol; + } + } + scope = scope.parent; + } + return null; + } + + private evaluateReferenceTypes(node: nodes.Node): nodes.ReferenceType[] { + if (node instanceof nodes.Identifier) { + let referenceTypes = (node).referenceTypes; + if (referenceTypes) { + return referenceTypes; + } else { + if (Symbols.isCssVariable(node)) { + return [nodes.ReferenceType.Variable]; + } + // are a reference to a keyframe? + let decl = nodes.getParentDeclaration(node); + if (decl) { + let propertyName = decl.getNonPrefixedPropertyName(); + if ((propertyName === 'animation' || propertyName === 'animation-name') + && decl.getValue() && decl.getValue().offset === node.offset) { + return [nodes.ReferenceType.Keyframe]; + } + } + } + } else if (node instanceof nodes.Variable) { + return [nodes.ReferenceType.Variable]; + } + let selector = node.findParent(nodes.NodeType.Selector); + if (selector) { + return [nodes.ReferenceType.Rule]; + } + let extendsRef = node.findParent(nodes.NodeType.ExtendsReference); + if (extendsRef) { + return [nodes.ReferenceType.Rule]; + } + return null; + } + + public findSymbolFromNode(node: nodes.Node): Symbol { + if (!node) { + return null; + } + while (node.type === nodes.NodeType.Interpolation) { + node = node.getParent(); + } + + let referenceTypes = this.evaluateReferenceTypes(node); + if (referenceTypes) { + return this.internalFindSymbol(node, referenceTypes); + } + return null; + } + + public matchesSymbol(node: nodes.Node, symbol: Symbol): boolean { + if (!node) { + return null; + } + while (node.type === nodes.NodeType.Interpolation) { + node = node.getParent(); + } + if (symbol.name.length !== node.length || symbol.name !== node.getText()) { + return false; + } + + let referenceTypes = this.evaluateReferenceTypes(node); + if (!referenceTypes || referenceTypes.indexOf(symbol.type) === -1) { + return false; + } + + let nodeSymbol = this.internalFindSymbol(node, referenceTypes); + return nodeSymbol === symbol; + } + + + public findSymbol(name: string, type: nodes.ReferenceType, offset: number): Symbol { + let scope = this.global.findScope(offset); + while (scope) { + let symbol = scope.getSymbol(name, type); + if (symbol) { + return symbol; + } + scope = scope.parent; + } + return null; + } + + public static isCssVariable(identifier: nodes.Identifier): boolean { + return /^--/.test(identifier.getText()); + } +} \ No newline at end of file diff --git a/extensions/css/server/src/services/cssCodeActions.ts b/extensions/css/server/src/services/cssCodeActions.ts new file mode 100644 index 0000000000000000000000000000000000000000..be30b0e520f54a76c730c63b980c84a4774bbc16 --- /dev/null +++ b/extensions/css/server/src/services/cssCodeActions.ts @@ -0,0 +1,86 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from '../parser/cssNodes'; +import * as languageFacts from './languageFacts'; +import {difference} from '../utils/strings'; +import {Rules} from '../services/lintRules'; +import {TextDocument, Range, CodeActionContext, Diagnostic, Command, TextEdit} from 'vscode-languageserver'; + +import * as nls from 'vscode-nls'; +const localize = nls.loadMessageBundle(); + +export class CSSCodeActions { + + constructor() { + } + + public doCodeActions(document: TextDocument, range: Range, context: CodeActionContext, stylesheet: nodes.Stylesheet): Thenable { + let result: Command[] = []; + if (context.diagnostics) { + for (let diagnostic of context.diagnostics) { + this.appendFixesForMarker(document, stylesheet, diagnostic, result); + } + } + return Promise.resolve(result); + } + + private getFixesForUnknownProperty(document: TextDocument, property: nodes.Property, marker: Diagnostic, result: Command[]): void { + + interface RankedProperty { + property: string; + score: number; + } + + let propertyName = property.getName(); + let candidates: RankedProperty[] = []; + for (let p in languageFacts.getProperties()) { + let score = difference(propertyName, p); + if (score >= propertyName.length / 2 /*score_lim*/) { + candidates.push({ property: p, score }); + } + } + + // Sort in descending order. + candidates.sort((a, b) => { + return b.score - a.score; + }); + + let maxActions = 3; + for (let candidate of candidates) { + let propertyName = candidate.property; + let title = localize('css.codeaction.rename', "Rename to '{0}'", propertyName); + let edit = TextEdit.replace(marker.range, propertyName); + result.push(Command.create(title, '_css.applyCodeAction', document.uri, document.version, [edit])); + if (--maxActions <= 0) { + return; + } + } + } + + private appendFixesForMarker(document: TextDocument, stylesheet: nodes.Stylesheet, marker: Diagnostic, result: Command[]): void { + + if (marker.code !== Rules.UnknownProperty.id) { + return; + } + let offset = document.offsetAt(marker.range.start); + let end = document.offsetAt(marker.range.end); + let nodepath = nodes.getNodePath(stylesheet, offset); + + for (let i = nodepath.length - 1; i >= 0; i--) { + let node = nodepath[i]; + if (node instanceof nodes.Declaration) { + let property = (node).getProperty(); + if (property && property.offset === offset && property.end === end) { + this.getFixesForUnknownProperty(document, property, marker, result); + return; + } + } + } + } + +} + diff --git a/extensions/css/server/src/services/cssCompletion.ts b/extensions/css/server/src/services/cssCompletion.ts new file mode 100644 index 0000000000000000000000000000000000000000..9b6decd665a50ba9bc011646c8a78686e800c4f9 --- /dev/null +++ b/extensions/css/server/src/services/cssCompletion.ts @@ -0,0 +1,665 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from '../parser/cssNodes'; +import {Symbols} from '../parser/cssSymbolScope'; +import * as languageFacts from './languageFacts'; +import * as strings from '../utils/strings'; +import {TextDocument, Position, CompletionList, CompletionItemKind} from 'vscode-languageserver'; + +export class CSSCompletion { + + variablePrefix: string; + position: Position; + offset: number; + currentWord: string; + textDocument: TextDocument; + styleSheet: nodes.Stylesheet; + symbolContext: Symbols; + + constructor(variablePrefix: string = null) { + this.variablePrefix = variablePrefix; + } + + private getSymbolContext(): Symbols { + if (!this.symbolContext) { + this.symbolContext = new Symbols(this.styleSheet); + } + return this.symbolContext; + } + + + public doComplete(document: TextDocument, position: Position, styleSheet: nodes.Stylesheet): CompletionList { + this.offset = document.offsetAt(position); + this.position = position; + this.currentWord = getCurrentWord(document, this.offset); + this.textDocument = document; + this.styleSheet = styleSheet; + + let result: CompletionList = { isIncomplete: false, items: [] }; + let nodepath = nodes.getNodePath(this.styleSheet, this.offset); + + for (let i = nodepath.length - 1; i >= 0; i--) { + let node = nodepath[i]; + if (node instanceof nodes.Property) { + this.getCompletionsForDeclarationProperty(result); + } else if (node instanceof nodes.Expression) { + this.getCompletionsForExpression(node, result); + } else if (node instanceof nodes.SimpleSelector) { + let parentRuleSet = node.findParent(nodes.NodeType.Ruleset); + this.getCompletionsForSelector(parentRuleSet, result); + } else if (node instanceof nodes.Declarations) { + this.getCompletionsForDeclarations(node, result); + } else if (node instanceof nodes.VariableDeclaration) { + this.getCompletionsForVariableDeclaration(node, result); + } else if (node instanceof nodes.RuleSet) { + this.getCompletionsForRuleSet(node, result); + } else if (node instanceof nodes.Interpolation) { + this.getCompletionsForInterpolation(node, result); + } else if (node instanceof nodes.FunctionArgument) { + this.getCompletionsForFunctionArgument(node, node.getParent(), result); + } else if (node instanceof nodes.FunctionDeclaration) { + this.getCompletionsForFunctionDeclaration(node, result); + } else if (node instanceof nodes.Function) { + this.getCompletionsForFunctionArgument(null, node, result); + } + if (result.items.length > 0) { + return result; + } + } + this.getCompletionsForStylesheet(result); + if (result.items.length > 0) { + return result; + } + + if (this.variablePrefix && this.currentWord.indexOf(this.variablePrefix) === 0) { + this.getVariableProposals(result); + if (result.items.length > 0) { + return result; + } + } + + // no match, don't show text matches + return result; + } + + public getCompletionsForDeclarationProperty(result: CompletionList): CompletionList { + return this.getPropertyProposals(result); + } + + private getPropertyProposals(result: CompletionList): CompletionList { + let properties = languageFacts.getProperties(); + + for (let key in properties) { + if (properties.hasOwnProperty(key)) { + let entry = properties[key]; + if (entry.browsers.onCodeComplete) { + result.items.push({ + label: entry.name, + documentation: languageFacts.getEntryDescription(entry), + insertText: entry.name + ': ', + kind: CompletionItemKind.Property + }); + } + } + } + return result; + } + + public getCompletionsForDeclarationValue(node: nodes.Declaration, result: CompletionList): CompletionList { + let propertyName = node.getFullPropertyName(); + let entry = languageFacts.getProperties()[propertyName]; + + if (entry) { + this.getColorProposals(entry, result); + this.getPositionProposals(entry, result); + this.getRepeatStyleProposals(entry, result); + this.getLineProposals(entry, result); + this.getBoxProposals(entry, result); + this.getImageProposals(entry, result); + this.getTimingFunctionProposals(entry, result); + this.getBasicShapeProposals(entry, result); + this.getValueEnumProposals(entry, result); + this.getCSSWideKeywordProposals(entry, result); + this.getUnitProposals(entry, result); + } else { + let existingValues = new Set(); + this.styleSheet.accept(new ValuesCollector(propertyName, existingValues)); + existingValues.getEntries().forEach((existingValue) => { + result.items.push({ + label: existingValue, + insertText: existingValue, + kind: CompletionItemKind.Value + }); + }); + } + this.getVariableProposals(result); + this.getTermProposals(result); + return result; + } + + public getValueEnumProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + if (entry.values) { + entry.values.forEach((value) => { + if (languageFacts.isCommonValue(value)) { // only show if supported by more than one browser + result.items.push({ + label: value.name, + documentation: languageFacts.getEntryDescription(value), + insertText: value.name, + kind: CompletionItemKind.Value + }); + } + }); + } + return result; + } + + public getCSSWideKeywordProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + for (let keywords in languageFacts.cssWideKeywords) { + result.items.push({ + label: keywords, + documentation: languageFacts.cssWideKeywords[keywords], + insertText: keywords, + kind: CompletionItemKind.Value + }); + } + return result; + } + + public getCompletionsForInterpolation(node: nodes.Interpolation, result: CompletionList): CompletionList { + if (this.offset >= node.offset + 2) { + this.getVariableProposals(result); + } + return result; + } + + public getVariableProposals(result: CompletionList): CompletionList { + let symbols = this.getSymbolContext().findSymbolsAtOffset(this.offset, nodes.ReferenceType.Variable); + symbols.forEach((symbol) => { + result.items.push({ + label: symbol.name, + insertText: strings.startsWith(symbol.name, '--') ? `let(${symbol.name})` : symbol.name, + kind: CompletionItemKind.Variable + }); + }); + return result; + } + + public getVariableProposalsForCSSVarFunction(result: CompletionList): CompletionList { + let symbols = this.getSymbolContext().findSymbolsAtOffset(this.offset, nodes.ReferenceType.Variable); + symbols = symbols.filter((symbol): boolean => { + return strings.startsWith(symbol.name, '--'); + }); + symbols.forEach((symbol) => { + result.items.push({ + label: symbol.name, + insertText: symbol.name, + kind: CompletionItemKind.Variable + }); + }); + return result; + } + + public getUnitProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + let currentWord = '0'; + if (this.currentWord.length > 0) { + let numMatch = this.currentWord.match(/-?\d[\.\d+]*/); + if (numMatch) { + currentWord = numMatch[0]; + } + } + entry.restrictions.forEach((restriction) => { + let units = languageFacts.units[restriction]; + if (units) { + units.forEach(function (unit: string) { + result.items.push({ + label: currentWord + unit, + insertText: currentWord + unit, + kind: CompletionItemKind.Unit + }); + }); + } + }); + result.isIncomplete = true; + return result; + } + + protected getColorProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + if (entry.restrictions.indexOf('color') !== -1) { + for (let color in languageFacts.colors) { + result.items.push({ + label: color, + documentation: languageFacts.colors[color], + insertText: color, + kind: CompletionItemKind.Color + }); + } + for (let color in languageFacts.colorKeywords) { + result.items.push({ + label: color, + documentation: languageFacts.colorKeywords[color], + insertText: color, + kind: CompletionItemKind.Value + }); + } + let colorValues = new Set(); + this.styleSheet.accept(new ColorValueCollector(colorValues)); + colorValues.getEntries().forEach((color) => { + result.items.push({ + label: color, + insertText: color, + kind: CompletionItemKind.Color + }); + }); + languageFacts.colorFunctions.forEach((p) => { + result.items.push({ + label: p.func.substr(0, p.func.indexOf('(')), + detail: p.func, + documentation: p.desc, + insertText: p.func.replace(/\[?\$(\w+)\]?/g, '{{$1}}'), + kind: CompletionItemKind.Function + }); + }); + } + return result; + } + + protected getPositionProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + if (entry.restrictions.indexOf('position') !== -1) { + for (let position in languageFacts.positionKeywords) { + result.items.push({ + label: position, + documentation: languageFacts.positionKeywords[position], + insertText: position, + kind: CompletionItemKind.Value + }); + } + } + return result; + } + + protected getRepeatStyleProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + if (entry.restrictions.indexOf('repeat') !== -1) { + for (let repeat in languageFacts.repeatStyleKeywords) { + result.items.push({ + label: repeat, + documentation: languageFacts.repeatStyleKeywords[repeat], + insertText: repeat, + kind: CompletionItemKind.Value + }); + } + } + return result; + } + + protected getLineProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + if (entry.restrictions.indexOf('line-style') !== -1) { + for (let lineStyle in languageFacts.lineStyleKeywords) { + result.items.push({ + label: lineStyle, + documentation: languageFacts.lineStyleKeywords[lineStyle], + insertText: lineStyle, + kind: CompletionItemKind.Value + }); + } + } + if (entry.restrictions.indexOf('line-width') !== -1) { + languageFacts.lineWidthKeywords.forEach((lineWidth) => { + result.items.push({ + label: lineWidth, + insertText: lineWidth, + kind: CompletionItemKind.Value + }); + }); + } + return result; + } + + protected getBoxProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + let geometryBox = entry.restrictions.indexOf('geometry-box'); + if (geometryBox !== -1) { + for (let box in languageFacts.geometryBoxKeywords) { + result.items.push({ + label: box, + documentation: languageFacts.geometryBoxKeywords[box], + insertText: box, + kind: CompletionItemKind.Value + }); + } + } + if (entry.restrictions.indexOf('box') !== -1 || geometryBox !== -1) { + for (let box in languageFacts.boxKeywords) { + result.items.push({ + label: box, + documentation: languageFacts.boxKeywords[box], + insertText: box, + kind: CompletionItemKind.Value + }); + } + } + return result; + } + + protected getImageProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + if (entry.restrictions.indexOf('image') !== -1) { + for (let image in languageFacts.imageFunctions) { + result.items.push({ + label: image, + documentation: languageFacts.imageFunctions[image], + insertText: image, + kind: CompletionItemKind.Function + }); + } + } + return result; + } + + protected getTimingFunctionProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + if (entry.restrictions.indexOf('timing-function') !== -1) { + for (let timing in languageFacts.transitionTimingFunctions) { + result.items.push({ + label: timing, + documentation: languageFacts.transitionTimingFunctions[timing], + insertText: timing, + kind: CompletionItemKind.Function + }); + } + } + return result; + } + + protected getBasicShapeProposals(entry: languageFacts.IEntry, result: CompletionList): CompletionList { + if (entry.restrictions.indexOf('shape') !== -1) { + for (let shape in languageFacts.basicShapeFunctions) { + result.items.push({ + label: shape, + documentation: languageFacts.basicShapeFunctions[shape], + insertText: shape, + kind: CompletionItemKind.Function + }); + } + } + return result; + } + + public getCompletionsForStylesheet(result: CompletionList): CompletionList { + let node = this.styleSheet.findFirstChildBeforeOffset(this.offset); + if (!node) { + return this.getCompletionForTopLevel(result); + } + if (node instanceof nodes.RuleSet) { + return this.getCompletionsForRuleSet(node, result); + } + return result; + } + + public getCompletionForTopLevel(result: CompletionList): CompletionList { + languageFacts.getAtDirectives().forEach(function (entry) { + if (entry.browsers.count > 0) { + result.items.push({ + label: entry.name, + insertText: entry.name, + documentation: languageFacts.getEntryDescription(entry), + kind: CompletionItemKind.Keyword + }); + } + }); + this.getCompletionsForSelector(null, result); + return result; + } + + public getCompletionsForRuleSet(ruleSet: nodes.RuleSet, result: CompletionList): CompletionList { + let declarations = ruleSet.getDeclarations(); + + let isAfter = declarations && declarations.endsWith('}') && this.offset >= declarations.end; + if (isAfter) { + return this.getCompletionForTopLevel(result); + } + let isInSelectors = !declarations || this.offset <= declarations.offset; + if (isInSelectors) { + return this.getCompletionsForSelector(ruleSet, result); + } + ruleSet.findParent(nodes.NodeType.Ruleset); + + return this.getCompletionsForDeclarations(ruleSet.getDeclarations(), result); + } + + public getCompletionsForSelector(ruleSet: nodes.RuleSet, result: CompletionList): CompletionList { + languageFacts.getPseudoClasses().forEach((entry) => { + if (entry.browsers.onCodeComplete) { + result.items.push({ + label: entry.name, + insertText: entry.name, + documentation: languageFacts.getEntryDescription(entry), + kind: CompletionItemKind.Function + }); + } + }); + languageFacts.getPseudoElements().forEach((entry) => { + if (entry.browsers.onCodeComplete) { + result.items.push({ + label: entry.name, + insertText: entry.name, + documentation: languageFacts.getEntryDescription(entry), + kind: CompletionItemKind.Function + }); + } + }); + languageFacts.html5Tags.forEach((entry) => { + result.items.push({ + label: entry, + insertText: entry, + kind: CompletionItemKind.Keyword + }); + }); + languageFacts.svgElements.forEach((entry) => { + result.items.push({ + label: entry, + insertText: entry, + kind: CompletionItemKind.Keyword + }); + }); + + let visited: { [name: string]: boolean } = {}; + visited[this.currentWord] = true; + let textProvider = this.styleSheet.getTextProvider(); + this.styleSheet.accept(n => { + if (n.type === nodes.NodeType.SimpleSelector && n.length > 0) { + let selector = textProvider(n.offset, n.length); + if (selector.charAt(0) === '.' && !visited[selector]) { + visited[selector] = true; + result.items.push({ + label: selector, + insertText: selector, + kind: CompletionItemKind.Keyword + }); + } + return false; + } + return true; + }); + + if (ruleSet && ruleSet.isNested()) { + let selector = ruleSet.getSelectors().findFirstChildBeforeOffset(this.offset); + if (selector && ruleSet.getSelectors().getChildren().indexOf(selector) === 0) { + this.getPropertyProposals(result); + } + } + return result; + } + + public getCompletionsForDeclarations(declarations: nodes.Declarations, result: CompletionList): CompletionList { + if (!declarations) { // incomplete nodes + return result; + } + + let node = declarations.findFirstChildBeforeOffset(this.offset); + if (!node) { + return this.getCompletionsForDeclarationProperty(result); + } + + if (node instanceof nodes.AbstractDeclaration) { + let declaration = node; + if ((!isDefined(declaration.colonPosition) || this.offset <= declaration.colonPosition) || (isDefined(declaration.semicolonPosition) && declaration.semicolonPosition < this.offset)) { + if (this.offset === declaration.semicolonPosition + 1) { + return result; // don't show new properties right after semicolon (see Bug 15421:[intellisense] [css] Be less aggressive when manually typing CSS) + } + + // complete property + return this.getCompletionsForDeclarationProperty(result); + } + + if (declaration instanceof nodes.Declaration) { + // complete value + return this.getCompletionsForDeclarationValue(declaration, result); + } + } + return result; + } + + public getCompletionsForVariableDeclaration(declaration: nodes.VariableDeclaration, result: CompletionList): CompletionList { + if (this.offset > declaration.colonPosition) { + this.getVariableProposals(result); + } + return result; + } + + public getCompletionsForExpression(expression: nodes.Expression, result: CompletionList): CompletionList { + if (expression.getParent() instanceof nodes.FunctionArgument) { + this.getCompletionsForFunctionArgument(expression.getParent(), expression.getParent().getParent(), result); + return result; + } + + let declaration = expression.findParent(nodes.NodeType.Declaration); + if (!declaration) { + this.getTermProposals(result); + return result; + } + + let node = expression.findChildAtOffset(this.offset, true); + if (!node) { + return this.getCompletionsForDeclarationValue(declaration, result); + } + if (node instanceof nodes.NumericValue || node instanceof nodes.Identifier) { + return this.getCompletionsForDeclarationValue(declaration, result); + } + return result; + } + + public getCompletionsForFunctionArgument(arg: nodes.FunctionArgument, func: nodes.Function, result: CompletionList): CompletionList { + if (func.getIdentifier().getText() === 'let') { + if (!func.getArguments().hasChildren() || func.getArguments().getChild(0) === arg) { + this.getVariableProposalsForCSSVarFunction(result); + } + } + return result; + } + + public getCompletionsForFunctionDeclaration(decl: nodes.FunctionDeclaration, result: CompletionList): CompletionList { + let declarations = decl.getDeclarations(); + if (declarations && this.offset > declarations.offset && this.offset < declarations.end) { + this.getTermProposals(result); + } + return result; + } + + public getTermProposals(result: CompletionList): CompletionList { + let allFunctions = this.getSymbolContext().findSymbolsAtOffset(this.offset, nodes.ReferenceType.Function); + allFunctions.forEach((functionSymbol) => { + if (functionSymbol.node instanceof nodes.FunctionDeclaration) { + let functionDecl = functionSymbol.node; + let params = functionDecl.getParameters().getChildren().map((c) => { + return (c instanceof nodes.FunctionParameter) ? (c).getName() : c.getText(); + }); + result.items.push({ + label: functionSymbol.name, + detail: functionSymbol.name + '(' + params.join(', ') + ')', + insertText: functionSymbol.name + '(' + params.map((p) => '{{' + p + '}}').join(', ') + ')', + kind: CompletionItemKind.Function + }); + } + }); + return result; + } + +} + +class Set { + private entries: { [key: string]: boolean } = {}; + public add(entry: string): void { + this.entries[entry] = true; + } + public getEntries(): string[] { + return Object.keys(this.entries); + } +} + + +class InternalValueCollector implements nodes.IVisitor { + + constructor(public entries: Set) { + // nothing to do + } + + public visitNode(node: nodes.Node): boolean { + if (node instanceof nodes.Identifier || node instanceof nodes.NumericValue || node instanceof nodes.HexColorValue) { + this.entries.add(node.getText()); + } + return true; + } +} + +class ValuesCollector implements nodes.IVisitor { + + + constructor(public propertyName: string, public entries: Set) { + // nothing to do + } + + private matchesProperty(decl: nodes.Declaration): boolean { + let propertyName = decl.getFullPropertyName(); + return this.propertyName === propertyName; + } + + public visitNode(node: nodes.Node): boolean { + if (node instanceof nodes.Declaration) { + if (this.matchesProperty(node)) { + let value = (node).getValue(); + if (value) { + value.accept(new InternalValueCollector(this.entries)); + } + } + } + return true; + } +} + +class ColorValueCollector implements nodes.IVisitor { + + constructor(public entries: Set) { + // nothing to do + } + + public visitNode(node: nodes.Node): boolean { + if (node instanceof nodes.HexColorValue || (node instanceof nodes.Function && languageFacts.isColorConstructor(node))) { + this.entries.add(node.getText()); + } + return true; + } +} + +function isDefined(obj: any): boolean { + return typeof obj !== 'undefined'; +} + +function getCurrentWord(document: TextDocument, offset: number) { + let i = offset - 1; + let text = document.getText(); + while (i >= 0 && ' \t\n\r":{[,'.indexOf(text.charAt(i)) === -1) { + i--; + } + return text.substring(i + 1, offset); +} \ No newline at end of file diff --git a/extensions/css/server/src/services/cssHover.ts b/extensions/css/server/src/services/cssHover.ts new file mode 100644 index 0000000000000000000000000000000000000000..8a0a62a261efea44a258d191cf7ea7bc190e0fa3 --- /dev/null +++ b/extensions/css/server/src/services/cssHover.ts @@ -0,0 +1,55 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from '../parser/cssNodes'; +import * as languageFacts from './languageFacts'; +import {TextDocument, Range, Position, Hover} from 'vscode-languageserver'; +import {selectorToMarkedString, simpleSelectorToMarkedString} from './selectorPrinting'; + +export class CSSHover { + + constructor() { + } + + public doHover(document: TextDocument, position: Position, stylesheet: nodes.Stylesheet): Thenable { + + function getRange(node: nodes.Node) { + return Range.create(document.positionAt(node.offset), document.positionAt(node.end)); + } + + let offset = document.offsetAt(position); + let nodepath = nodes.getNodePath(stylesheet, offset); + + for (let i = 0; i < nodepath.length; i++) { + let node = nodepath[i]; + if (node instanceof nodes.Selector) { + return Promise.resolve({ + contents: selectorToMarkedString(node), + range: getRange(node) + }); + } + if (node instanceof nodes.SimpleSelector) { + return Promise.resolve({ + contents: simpleSelectorToMarkedString(node), + range: getRange(node) + }); + } + if (node instanceof nodes.Declaration) { + let propertyName = node.getFullPropertyName(); + let entry = languageFacts.getProperties()[propertyName]; + if (entry) { + return Promise.resolve({ + contents: entry.description, + range: getRange(node) + }); + } + } + } + + return null; + } +} + diff --git a/extensions/css/server/src/services/cssNavigation.ts b/extensions/css/server/src/services/cssNavigation.ts new file mode 100644 index 0000000000000000000000000000000000000000..7ddba9a53e48d428dd7747ba1e6b7ab4142b1152 --- /dev/null +++ b/extensions/css/server/src/services/cssNavigation.ts @@ -0,0 +1,167 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from '../parser/cssNodes'; +import {TextDocument, Range, Position, Location, DocumentHighlightKind, DocumentHighlight, SymbolInformation, SymbolKind} from 'vscode-languageserver'; +import {Symbols} from '../parser/cssSymbolScope'; +import {isColorValue} from '../services/languageFacts'; + +import * as nls from 'vscode-nls'; +const localize = nls.loadMessageBundle(); + +export class CSSNavigation { + + public findDefinition(document: TextDocument, position: Position, stylesheet: nodes.Node): Location { + + let symbols = new Symbols(stylesheet); + let offset = document.offsetAt(position); + let node = nodes.getNodeAtOffset(stylesheet, offset); + + if (!node) { + return null; + } + + let symbol = symbols.findSymbolFromNode(node); + if (!symbol) { + return null; + } + + return { + uri: document.uri, + range: getRange(node, document) + }; + } + + public findReferences(document: TextDocument, position: Position, stylesheet: nodes.Node): Location[] { + return this.findDocumentHighlights(document, position, stylesheet).map(h => { + return { + uri: document.uri, + range: h.range + }; + }); + } + + public findDocumentHighlights(document: TextDocument, position: Position, stylesheet: nodes.Node): DocumentHighlight[] { + let result: DocumentHighlight[] = []; + + let offset = document.offsetAt(position); + let node = nodes.getNodeAtOffset(stylesheet, offset); + if (!node || node.type === nodes.NodeType.Stylesheet || node.type === nodes.NodeType.Declarations) { + return result; + } + + let symbols = new Symbols(stylesheet); + let symbol = symbols.findSymbolFromNode(node); + let name = node.getText(); + + stylesheet.accept((candidate) => { + if (symbol) { + if (symbols.matchesSymbol(candidate, symbol)) { + result.push({ + kind: getHighlightKind(candidate), + range: getRange(candidate, document) + }); + return false; + } + } else if (node.type === candidate.type && node.length === candidate.length && name === candidate.getText()) { + // Same node type and data + result.push({ + kind: getHighlightKind(candidate), + range: getRange(candidate, document) + }); + } + return true; + }); + + return result; + } + + + + public findDocumentSymbols(document: TextDocument, stylesheet: nodes.Stylesheet): SymbolInformation[] { + + let result: SymbolInformation[] = []; + + stylesheet.accept((node) => { + + let entry: SymbolInformation = { + name: null, + kind: SymbolKind.Class, // TODO@Martin: find a good SymbolKind + location: null + }; + + if (node instanceof nodes.Selector) { + entry.name = node.getText(); + } else if (node instanceof nodes.VariableDeclaration) { + entry.name = (node).getName(); + entry.kind = SymbolKind.Variable; + } else if (node instanceof nodes.MixinDeclaration) { + entry.name = (node).getName(); + entry.kind = SymbolKind.Method; + } else if (node instanceof nodes.FunctionDeclaration) { + entry.name = (node).getName(); + entry.kind = SymbolKind.Function; + } else if (node instanceof nodes.Keyframe) { + entry.name = localize('literal.keyframes', "@keyframes {0}", (node).getName()); + } else if (node instanceof nodes.FontFace) { + entry.name = localize('literal.fontface', "@font-face"); + } + + if (entry.name) { + entry.location = Location.create(document.uri, getRange(node, document)); + result.push(entry); + } + + return true; + }); + + return result; + } + + public findColorSymbols(document: TextDocument, stylesheet: nodes.Stylesheet): Range[] { + let result: Range[] = []; + stylesheet.accept((node) => { + if (isColorValue(node)) { + result.push(getRange(node, document)); + } + return true; + }); + return result; + } +} + +function getRange(node: nodes.Node, document: TextDocument) : Range { + return Range.create(document.positionAt(node.offset), document.positionAt(node.end)); +} + +function getHighlightKind(node: nodes.Node): DocumentHighlightKind { + + if (node.type === nodes.NodeType.Selector) { + return DocumentHighlightKind.Write; + } + + if (node instanceof nodes.Identifier) { + if (node.parent && node.parent instanceof nodes.Property) { + if (Symbols.isCssVariable(node)) { + return DocumentHighlightKind.Write; + } + } + } + + if (node.parent) { + switch (node.parent.type) { + case nodes.NodeType.FunctionDeclaration: + case nodes.NodeType.MixinDeclaration: + case nodes.NodeType.Keyframe: + case nodes.NodeType.VariableDeclaration: + case nodes.NodeType.FunctionParameter: + return DocumentHighlightKind.Write; + } + } + + return DocumentHighlightKind.Read; +} + diff --git a/extensions/css/server/src/services/cssValidation.ts b/extensions/css/server/src/services/cssValidation.ts new file mode 100644 index 0000000000000000000000000000000000000000..9585cea0485f67d84e6685c3b6806b9954327b7b --- /dev/null +++ b/extensions/css/server/src/services/cssValidation.ts @@ -0,0 +1,64 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from '../parser/cssNodes'; +import {TextDocument, Range, Diagnostic, DiagnosticSeverity} from 'vscode-languageserver'; +import {ILintConfigurationSettings, sanitize} from './lintRules'; +import {LintVisitor} from './lint'; + +export interface LanguageSettings { + validate?: boolean; + lint?: ILintConfigurationSettings; +} + +// The settings interface describe the server relevant settings part +export interface Settings { + css: LanguageSettings; + less: LanguageSettings; + scss: LanguageSettings; +} + +export class CSSValidation { + + private lintSettings: ILintConfigurationSettings; + private validationEnabled: boolean; + + constructor() { + } + + public configure(raw: LanguageSettings) { + if (raw) { + this.validationEnabled = raw.validate; + if (raw.lint) { + this.lintSettings = sanitize(raw.lint); + } else { + this.lintSettings = {}; + } + } + } + + public doValidation(document: TextDocument, stylesheet: nodes.Stylesheet): Thenable { + if (!this.validationEnabled) { + return Promise.resolve([]); + } + + let entries: nodes.IMarker[] = []; + entries.push.apply(entries, nodes.ParseErrorCollector.entries(stylesheet)); + entries.push.apply(entries, LintVisitor.entries(stylesheet, this.lintSettings)); + + function toDiagnostic(marker: nodes.IMarker): Diagnostic { + let range = Range.create(document.positionAt(marker.getOffset()), document.positionAt(marker.getOffset() + marker.getLength())); + return { + code: marker.getRule().id, + message: marker.getMessage(), + severity: marker.getLevel() === nodes.Level.Warning ? DiagnosticSeverity.Warning : DiagnosticSeverity.Error, + range: range + }; + } + + return Promise.resolve(entries.filter(entry => entry.getLevel() !== nodes.Level.Ignore).map(toDiagnostic)); + } +} \ No newline at end of file diff --git a/extensions/css/server/src/services/languageFacts.ts b/extensions/css/server/src/services/languageFacts.ts new file mode 100644 index 0000000000000000000000000000000000000000..16ddd1388894f99cba257212cbedbd30935b97cf --- /dev/null +++ b/extensions/css/server/src/services/languageFacts.ts @@ -0,0 +1,588 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from '../parser/cssNodes'; +import * as browsers from '../data/browsers'; + +import * as nls from 'vscode-nls'; +const localize = nls.loadMessageBundle(); + +export let colors : { [name:string]:string } = { + aliceblue: '#f0f8ff', + antiquewhite: '#faebd7', + aqua: '#00ffff', + aquamarine: '#7fffd4', + azure: '#f0ffff', + beige: '#f5f5dc', + bisque: '#ffe4c4', + black: '#000000', + blanchedalmond: '#ffebcd', + blue: '#0000ff', + blueviolet: '#8a2be2', + brown: '#a52a2a', + burlywood: '#deb887', + cadetblue: '#5f9ea0', + chartreuse: '#7fff00', + chocolate: '#d2691e', + coral: '#ff7f50', + cornflowerblue: '#6495ed', + cornsilk: '#fff8dc', + crimson: '#dc143c', + cyan: '#00ffff', + darkblue: '#00008b', + darkcyan: '#008b8b', + darkgoldenrod: '#b8860b', + darkgray: '#a9a9a9', + darkgrey: '#a9a9a9', + darkgreen: '#006400', + darkkhaki: '#bdb76b', + darkmagenta: '#8b008b', + darkolivegreen: '#556b2f', + darkorange: '#ff8c00', + darkorchid: '#9932cc', + darkred: '#8b0000', + darksalmon: '#e9967a', + darkseagreen: '#8fbc8f', + darkslateblue: '#483d8b', + darkslategray: '#2f4f4f', + darkslategrey: '#2f4f4f', + darkturquoise: '#00ced1', + darkviolet: '#9400d3', + deeppink: '#ff1493', + deepskyblue: '#00bfff', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1e90ff', + firebrick: '#b22222', + floralwhite: '#fffaf0', + forestgreen: '#228b22', + fuchsia: '#ff00ff', + gainsboro: '#dcdcdc', + ghostwhite: '#f8f8ff', + gold: '#ffd700', + goldenrod: '#daa520', + gray: '#808080', + grey: '#808080', + green: '#008000', + greenyellow: '#adff2f', + honeydew: '#f0fff0', + hotpink: '#ff69b4', + indianred: '#cd5c5c', + indigo: '#4b0082', + ivory: '#fffff0', + khaki: '#f0e68c', + lavender: '#e6e6fa', + lavenderblush: '#fff0f5', + lawngreen: '#7cfc00', + lemonchiffon: '#fffacd', + lightblue: '#add8e6', + lightcoral: '#f08080', + lightcyan: '#e0ffff', + lightgoldenrodyellow: '#fafad2', + lightgray: '#d3d3d3', + lightgrey: '#d3d3d3', + lightgreen: '#90ee90', + lightpink: '#ffb6c1', + lightsalmon: '#ffa07a', + lightseagreen: '#20b2aa', + lightskyblue: '#87cefa', + lightslategray: '#778899', + lightslategrey: '#778899', + lightsteelblue: '#b0c4de', + lightyellow: '#ffffe0', + lime: '#00ff00', + limegreen: '#32cd32', + linen: '#faf0e6', + magenta: '#ff00ff', + maroon: '#800000', + mediumaquamarine: '#66cdaa', + mediumblue: '#0000cd', + mediumorchid: '#ba55d3', + mediumpurple: '#9370d8', + mediumseagreen: '#3cb371', + mediumslateblue: '#7b68ee', + mediumspringgreen: '#00fa9a', + mediumturquoise: '#48d1cc', + mediumvioletred: '#c71585', + midnightblue: '#191970', + mintcream: '#f5fffa', + mistyrose: '#ffe4e1', + moccasin: '#ffe4b5', + navajowhite: '#ffdead', + navy: '#000080', + oldlace: '#fdf5e6', + olive: '#808000', + olivedrab: '#6b8e23', + orange: '#ffa500', + orangered: '#ff4500', + orchid: '#da70d6', + palegoldenrod: '#eee8aa', + palegreen: '#98fb98', + paleturquoise: '#afeeee', + palevioletred: '#d87093', + papayawhip: '#ffefd5', + peachpuff: '#ffdab9', + peru: '#cd853f', + pink: '#ffc0cb', + plum: '#dda0dd', + powderblue: '#b0e0e6', + purple: '#800080', + red: '#ff0000', + rebeccapurple: '#663399', + rosybrown: '#bc8f8f', + royalblue: '#4169e1', + saddlebrown: '#8b4513', + salmon: '#fa8072', + sandybrown: '#f4a460', + seagreen: '#2e8b57', + seashell: '#fff5ee', + sienna: '#a0522d', + silver: '#c0c0c0', + skyblue: '#87ceeb', + slateblue: '#6a5acd', + slategray: '#708090', + slategrey: '#708090', + snow: '#fffafa', + springgreen: '#00ff7f', + steelblue: '#4682b4', + tan: '#d2b48c', + teal: '#008080', + thistle: '#d8bfd8', + tomato: '#ff6347', + turquoise: '#40e0d0', + violet: '#ee82ee', + wheat: '#f5deb3', + white: '#ffffff', + whitesmoke: '#f5f5f5', + yellow: '#ffff00', + yellowgreen: '#9acd32' +}; + +export let colorKeywords : { [name:string]:string } = { + 'currentColor': 'The value of the \'color\' property. The computed value of the \'currentColor\' keyword is the computed value of the \'color\' property. If the \'currentColor\' keyword is set on the \'color\' property itself, it is treated as \'color:inherit\' at parse time.', + 'transparent': 'Fully transparent. This keyword can be considered a shorthand for rgba(0,0,0,0) which is its computed value.', +}; + +export let positionKeywords : { [name:string]:string } = { + 'bottom': 'Computes to ‘100%’ for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.', + 'center': 'Computes to ‘50%’ (‘left 50%’) for the horizontal position if the horizontal position is not otherwise specified, or ‘50%’ (‘top 50%’) for the vertical position if it is.', + 'left': 'Computes 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.', + 'right': 'Computes 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.', + 'top': 'Computes 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.' +}; + +export let repeatStyleKeywords : { [name:string]:string } = { + 'no-repeat': 'Placed once and not repeated in this direction.', + 'repeat': 'Repeated in this direction as often as needed to cover the background painting area.', + 'repeat-x': 'Computes to ‘repeat no-repeat’.', + 'repeat-y': 'Computes to ‘no-repeat repeat’.', + 'round': 'Repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does.', + 'space': 'Repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.' +}; + +export let lineStyleKeywords : { [name:string]:string } = { + 'dashed': 'A series of square-ended dashes.', + 'dotted': 'A series of round dots.', + 'double': 'Two parallel solid lines with some space between them.', + 'groove': 'Looks as if it were carved in the canvas.', + 'hidden': 'Same as ‘none’, but has different behavior in the border conflict resolution rules for border-collapsed tables.', + 'inset': 'Looks as if the content on the inside of the border is sunken into the canvas.', + 'none': 'No border. Color and width are ignored.', + 'outset': 'Looks as if the content on the inside of the border is coming out of the canvas.', + 'ridge': 'Looks as if it were coming out of the canvas.', + 'solid': 'A single line segment.' +}; + +export let lineWidthKeywords = ['medium', 'thick', 'thin']; + +export let boxKeywords : { [name:string]:string } = { + 'border-box': 'The background is painted within (clipped to) the border box.', + 'content-box': 'The background is painted within (clipped to) the content box.', + 'padding-box': 'The background is painted within (clipped to) the padding box.' +}; + +export let geometryBoxKeywords : { [name:string]:string } = { + 'margin-box': 'Uses the margin box as reference box.', + 'fill-box': 'Uses the object bounding box as reference box.', + 'stroke-box': 'Uses the stroke bounding box as reference box.', + 'view-box': 'Uses the nearest SVG viewport as reference box.' +}; + +export let cssWideKeywords : { [name:string]:string } = { + 'initial': 'Represents the value specified as the property’s initial value.', + 'inherit': 'Represents the computed value of the property on the element’s parent.', + 'unset': 'Acts as either `inherit` or `initial`, depending on whether the property is inherited or not.' +}; + +export let colorFunctions = [ + { func: 'rgb($red, $green, $blue)', desc: localize('css.builtin.rgb', 'Creates a Color from red, green, and blue values.') }, + { func: 'rgba($red, $green, $blue, $alpha)', desc: localize('css.builtin.rgba', 'Creates a Color from red, green, blue, and alpha values.') }, + { func: 'hsl($hue, $saturation, $lightness)', desc: localize('css.builtin.hsl', 'Creates a Color from hue, saturation, and lightness values.') }, + { func: 'hsla($hue, $saturation, $lightness, $alpha)', desc: localize('css.builtin.hsla', 'Creates a Color from hue, saturation, lightness, and alpha values.') } +]; + +export let 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 let transitionTimingFunctions : { [name:string]:string } = { + 'ease': 'Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).', + 'ease-in': 'Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).', + 'ease-in-out': 'Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0).', + 'ease-out': 'Equivalent to cubic-bezier(0, 0, 0.58, 1.0).', + 'linear': 'Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).', + 'step-end': 'Equivalent to steps(1, end).', + 'step-start': 'Equivalent to steps(1, start).', + 'steps()': 'The first parameter specifies the number of intervals in the function. The second parameter, which is optional, is either the value “start” or “end”.', + 'cubic-bezier()': 'Specifies a cubic-bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2).', + 'cubic-bezier(0.6, -0.28, 0.735, 0.045)': 'Ease-in Back. Overshoots.', + 'cubic-bezier(0.68, -0.55, 0.265, 1.55)': 'Ease-in-out Back. Overshoots.', + 'cubic-bezier(0.175, 0.885, 0.32, 1.275)': 'Ease-out Back. Overshoots.', + 'cubic-bezier(0.6, 0.04, 0.98, 0.335)': 'Ease-in Circular. Based on half circle.', + 'cubic-bezier(0.785, 0.135, 0.15, 0.86)': 'Ease-in-out Circular. Based on half circle.', + 'cubic-bezier(0.075, 0.82, 0.165, 1)': 'Ease-out Circular. Based on half circle.', + 'cubic-bezier(0.55, 0.055, 0.675, 0.19)': 'Ease-in Cubic. Based on power of three.', + 'cubic-bezier(0.645, 0.045, 0.355, 1)': 'Ease-in-out Cubic. Based on power of three.', + 'cubic-bezier(0.215, 0.610, 0.355, 1)': 'Ease-out Cubic. Based on power of three.', + 'cubic-bezier(0.95, 0.05, 0.795, 0.035)': 'Ease-in Exponential. Based on two to the power ten.', + 'cubic-bezier(1, 0, 0, 1)': 'Ease-in-out Exponential. Based on two to the power ten.', + 'cubic-bezier(0.19, 1, 0.22, 1)': 'Ease-out Exponential. Based on two to the power ten.', + 'cubic-bezier(0.47, 0, 0.745, 0.715)': 'Ease-in Sine.', + 'cubic-bezier(0.445, 0.05, 0.55, 0.95)': 'Ease-in-out Sine.', + 'cubic-bezier(0.39, 0.575, 0.565, 1)': 'Ease-out Sine.', + 'cubic-bezier(0.55, 0.085, 0.68, 0.53)': 'Ease-in Quadratic. Based on power of two.', + 'cubic-bezier(0.455, 0.03, 0.515, 0.955)': 'Ease-in-out Quadratic. Based on power of two.', + 'cubic-bezier(0.25, 0.46, 0.45, 0.94)': 'Ease-out Quadratic. Based on power of two.', + 'cubic-bezier(0.895, 0.03, 0.685, 0.22)': 'Ease-in Quartic. Based on power of four.', + 'cubic-bezier(0.77, 0, 0.175, 1)': 'Ease-in-out Quartic. Based on power of four.', + 'cubic-bezier(0.165, 0.84, 0.44, 1)': 'Ease-out Quartic. Based on power of four.', + 'cubic-bezier(0.755, 0.05, 0.855, 0.06)': 'Ease-in Quintic. Based on power of five.', + 'cubic-bezier(0.86, 0, 0.07, 1)': 'Ease-in-out Quintic. Based on power of five.', + 'cubic-bezier(0.23, 1, 0.320, 1)': 'Ease-out Quintic. Based on power of five.' +}; + +export let basicShapeFunctions : { [name:string]:string } = { + 'circle()': 'Defines a circle.', + 'ellipse()': 'Defines an ellipse.', + 'inset()': 'Defines an inset rectangle.', + 'polygon()': 'Defines a polygon.' +}; + +export let units : { [unitName:string]:string[] } = { + 'length': ['em', 'rem', 'ex', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'vw', 'vh', 'vmin', 'vmax'], + 'angle': ['deg', 'rad', 'grad', 'turn'], + 'time': ['ms', 's'], + 'frequency': ['Hz', 'kHz'], + 'resolution': ['dpi', 'dpcm', 'dppx'], + 'percentage': ['%'] +}; + +export let html5Tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', + 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', + 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', + 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', + 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', + 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'let', 'video', 'wbr' ]; + +export let svgElements = ['circle', 'clipPath', 'cursor', 'defs', 'desc', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', + 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', + 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'foreignObject', 'g', 'hatch', 'hatchpath', 'image', 'line', 'linearGradient', + 'marker', 'mask', 'mesh', 'meshpatch', 'meshrow', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'set', 'solidcolor', 'stop', 'svg', 'switch', + 'symbol', 'text', 'textPath', 'tspan', 'use', 'view']; + +export function isColorConstructor(node:nodes.Function): boolean { + let name = node.getName(); + if (!name) { + return false; + } + return /^(rgb|rgba|hsl|hsla)$/gi.test(name); +} + +/** + * Returns true if the node is a color value - either + * defined a hex number, as rgb or rgba function, or + * as color name. + */ +export function isColorValue(node:nodes.Node):boolean { + if(node.type === nodes.NodeType.HexColorValue) { + return true; + } else if(node.type === nodes.NodeType.Function) { + return this.isColorConstructor( node); + } else if (node.type === nodes.NodeType.Identifier) { + if (node.parent && node.parent.type !== nodes.NodeType.Term) { + return false; + } + let candidateColor = node.getText().toLowerCase(); + if(candidateColor === 'none') { + return false; + } + if (colors[candidateColor]) { + return true; + } + } + return false; +} + +/** + * Returns true if the given name is a known property. + */ +export function isKnownProperty(name: string):boolean { + if(!name) { + return false; + } else { + name = name.toLowerCase(); + return getProperties().hasOwnProperty(name); + } +} + +export function isCommonValue(entry:Value):boolean { + return entry.browsers.count > 1; +} + +export function getPageBoxDirectives():string[] { + return [ + '@bottom-center', '@bottom-left', '@bottom-left-corner', '@bottom-right', '@bottom-right-corner', + '@left-bottom', '@left-middle', '@left-top', '@right-bottom', '@right-middle', '@right-top', + '@top-center', '@top-left', '@top-left-corner', '@top-right', '@top-right-corner' + ]; +} + +export function getEntryDescription(entry:{description: string; browsers: Browsers}): string { + let desc = entry.description || ''; + let browserLabel = this.getBrowserLabel(entry.browsers); + if (browserLabel) { + if (desc) { + desc = desc + '\n'; + } + desc= desc + '(' + browserLabel + ')'; + } + return desc; +} + +export function getBrowserLabel(b: Browsers): string { + let result = ''; + if (!b || b.all || b.count === 0) { + return null; + } + for (let curr in browserNames) { + if (typeof ( b)[curr] === 'string') { + if (result.length > 0) { + result = result + ', '; + } + result = result + ( browserNames)[curr]; + let version = ( b)[curr]; + if (version.length > 0) { + result = result + ' ' + version; + } + } + } + return result; +} + +export interface Browsers { + E?:string; + FF?:string; + IE?:string; + O?:string; + C?:string; + S?:string; + count:number; + all:boolean; + onCodeComplete:boolean; +} + +export interface Value { + name:string; + description:string; + browsers:Browsers; +} + +export interface IEntry { + name:string; + restrictions:string[]; + browsers:Browsers; + description:string; + values:Value[]; +} + +function evalBrowserEntry(browsers: string) { + let browserEntry : Browsers = { all: false, count: 0, onCodeComplete: false}; + let count = 0; + if (browsers) { + browsers.split(',').forEach( + (s: string) => { + s = s.trim(); + if (s === 'all') { + browserEntry.all= true; + count = Number.MAX_VALUE; + } else if (s !== 'none') { + for (let key in browserNames) { + if (s.indexOf(key) === 0) { + ( browserEntry)[key] = s.substring(key.length).trim(); + count++; + } + } + } + } + ); + } else { + browserEntry.all = true; + count = Number.MAX_VALUE; + } + browserEntry.count = count; + browserEntry.onCodeComplete = count > 0; // to be refined + return browserEntry; +} + + +class ValueImpl implements Value { + + private browserEntry: Browsers; + + constructor(public data: any) { + } + + get name() : string { + return this.data.name; + } + + get description() : string { + return this.data.desc || browsers.descriptions[this.data.name]; + } + + get browsers() : Browsers { + if (!this.browserEntry) { + this.browserEntry = evalBrowserEntry(this.data.browsers); + } + return this.browserEntry; + } +} + +class EntryImpl implements IEntry { + private browserEntry: Browsers; + + constructor(public data: any) { + } + + get name(): string { + return this.data.name; + } + + get description(): string { + return this.data.desc || browsers.descriptions[this.data.name]; + } + + get browsers(): Browsers { + if (!this.browserEntry) { + this.browserEntry = evalBrowserEntry(this.data.browsers); + } + return this.browserEntry; + } + + get restrictions(): string[] { + if (this.data.restriction) { + return this.data.restriction.split(',').map(function(s: string) { return s.trim(); }); + } else { + return []; + } + } + + get values(): Value[] { + if(!this.data.values) { + return []; + } + if(!Array.isArray(this.data.values)) { + return [new ValueImpl(this.data.values.value)]; + } + return this.data.values.map(function (v: string) { + return new ValueImpl(v); + }); + } +} + +let propertySet: { [key: string]: IEntry }; +let properties = browsers.data.css.properties; +export function getProperties(): { [name: string]: IEntry; } { + if(!propertySet) { + propertySet = { + }; + for(let i = 0, len = properties.length; i < len; i++) { + let rawEntry = properties[i]; + propertySet[rawEntry.name] = new EntryImpl(rawEntry); + } + } + return propertySet; +} + +let atDirectives = browsers.data.css.atdirectives; +let atDirectiveList: IEntry[]; +export function getAtDirectives(): IEntry[] { + if (!atDirectiveList) { + atDirectiveList = []; + for (let i = 0, len = atDirectives.length; i < len; i++) { + let rawEntry = atDirectives[i]; + atDirectiveList.push(new EntryImpl(rawEntry)); + } + } + return atDirectiveList; +} + + +let pseudoElements = browsers.data.css.pseudoelements; +let pseudoElementList: IEntry[]; +export function getPseudoElements(): IEntry[] { + if (!pseudoElementList) { + pseudoElementList = []; + for (let i = 0, len = pseudoElements.length; i < len; i++) { + let rawEntry = pseudoElements[i]; + pseudoClassesList.push(new EntryImpl(rawEntry)); + } + } + return pseudoElementList; +} + +let pseudoClasses = browsers.data.css.pseudoclasses; +let pseudoClassesList: IEntry[]; +export function getPseudoClasses(): IEntry[]{ + if (!pseudoClassesList) { + pseudoClassesList = []; + for (let i = 0, len = pseudoClasses.length; i < len; i++) { + let rawEntry = pseudoClasses[i]; + pseudoClassesList.push(new EntryImpl(rawEntry)); + } + } + return pseudoClassesList; +} + +export let browserNames = { + E : 'Edge', + FF : 'Firefox', + S : 'Safari', + C : 'Chrome', + IE : 'IE', + O : 'Opera' +}; diff --git a/extensions/css/server/src/services/lint.ts b/extensions/css/server/src/services/lint.ts new file mode 100644 index 0000000000000000000000000000000000000000..2efc10e1f39854285a039645c1824496bc8e7f12 --- /dev/null +++ b/extensions/css/server/src/services/lint.ts @@ -0,0 +1,536 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as languageFacts from './languageFacts'; +import {Rules, ILintConfigurationSettings, toLevel, Rule} from './lintRules'; +import * as nodes from '../parser/cssNodes'; + +import * as nls from 'vscode-nls'; +const localize = nls.loadMessageBundle(); + +class Element { + + public name: string; + public node: nodes.Declaration; + + constructor(text: string, data: nodes.Declaration) { + this.name = text; + this.node = data; + } +} + +class NodesByRootMap { + public data: { [name: string]: { nodes: nodes.Node[]; names: string[] } } = {}; + + public add(root: string, name: string, node: nodes.Node): void { + let entry = this.data[root]; + if (!entry) { + entry = { nodes: [], names: [] }; + this.data[root] = entry; + } + entry.names.push(name); + if (node) { + entry.nodes.push(node); + } + } +} + +export class LintVisitor implements nodes.IVisitor { + + static entries(node: nodes.Node, settings: ILintConfigurationSettings): nodes.IMarker[] { + let visitor = new LintVisitor(settings); + node.accept(visitor); + return visitor.getEntries(); + } + + static prefixes = [ + '-ms-', '-moz-', '-o-', '-webkit-', // Quite common + // '-xv-', '-atsc-', '-wap-', '-khtml-', 'mso-', 'prince-', '-ah-', '-hp-', '-ro-', '-rim-', '-tc-' // Quite un-common + ]; + + private warnings: nodes.IMarker[] = []; + private configuration: { [id: string]: nodes.Level }; + + constructor(settings: ILintConfigurationSettings = {}) { + this.configuration = {}; + for (let ruleKey in Rules) { + let rule = Rules[ruleKey]; + let level = settings[rule.id] || toLevel(rule.defaultValue); + this.configuration[rule.id] = level; + } + } + + private fetch(input: Element[], s: string): Element[] { + let elements: Element[] = []; + + for (let i = 0; i < input.length; i++) { + if (input[i].name.toLowerCase() === s) { + elements.push(input[i]); + } + } + + return elements; + } + + private fetchWithValue(input: Element[], s: string, v: string): Element[] { + let elements: Element[] = []; + for (let inputElement of input) { + if (inputElement.name.toLowerCase() === s) { + let expression = inputElement.node.getValue(); + if (expression && this.findValueInExpression(expression, v)) { + elements.push(inputElement); + } + } + } + return elements; + } + + private findValueInExpression(expression: nodes.Expression, v: string): boolean { + let found = false; + expression.accept(node => { + if (node.type === nodes.NodeType.Identifier && node.getText() === v) { + found = true; + } + return !found; + }); + return found; + } + + + private fetchWithin(input: Element[], s: string): Element[] { + let elements: Element[] = []; + + for (let inputElement of input) { + if (inputElement.name.toLowerCase().indexOf(s) >= 0) { + elements.push(inputElement); + } + } + + return elements; + } + + public getEntries(filter: number = (nodes.Level.Warning | nodes.Level.Error)): nodes.IMarker[] { + return this.warnings.filter(entry => { + return (entry.getLevel() & filter) !== 0; + }); + } + + private addEntry(node: nodes.Node, rule: Rule, details?: string): void { + let entry = new nodes.Marker(node, rule, this.configuration[rule.id], details); + this.warnings.push(entry); + } + + private getMissingNames(expected: string[], actual: string[]): string { + expected = expected.slice(0); // clone + for (let i = 0; i < actual.length; i++) { + let k = expected.indexOf(actual[i]); + if (k !== -1) { + expected[k] = null; + } + } + let result: string = null; + for (let i = 0; i < expected.length; i++) { + let curr = expected[i]; + if (curr) { + if (result === null) { + result = localize('namelist.single', "'{0}'", curr); + } else { + result = localize('namelist.concatenated', "{0}, '{1}'", result, curr); + } + } + } + return result; + } + + public visitNode(node: nodes.Node): boolean { + switch (node.type) { + case nodes.NodeType.Stylesheet: + return this.visitStylesheet(node); + case nodes.NodeType.FontFace: + return this.visitFontFace(node); + case nodes.NodeType.Ruleset: + return this.visitRuleSet(node); + case nodes.NodeType.SimpleSelector: + return this.visitSimpleSelector(node); + case nodes.NodeType.Function: + return this.visitFunction(node); + case nodes.NodeType.NumericValue: + return this.visitNumericValue(node); + case nodes.NodeType.Import: + return this.visitImport(node); + } + return this.visitUnknownNode(node); + } + + private visitStylesheet(node: nodes.Stylesheet): boolean { + // @keyframe and it's vendor specific alternatives + // @keyframe should be included + + let keyframes = new NodesByRootMap(); + node.accept(node => { + if (node instanceof nodes.Keyframe) { + let keyword = (node).getKeyword(); + let text = keyword.getText(); + keyframes.add((node).getName(), text, (text !== '@keyframes') ? keyword : null); + } + return true; + }); + + let expected = ['@-webkit-keyframes', '@-moz-keyframes', '@-o-keyframes']; + + for (let name in keyframes.data) { + let actual = keyframes.data[name].names; + let needsStandard = (actual.indexOf('@keyframes') === -1); + if (!needsStandard && actual.length === 1) { + continue; // only the non-vendor specific keyword is used, that's fine, no warning + } + let addVendorSpecificWarnings = (node: nodes.Node) => { + if (needsStandard) { + let message = localize('keyframes.standardrule.missing', "Always define standard rule '@keyframes' when defining keyframes."); + this.addEntry(node, Rules.IncludeStandardPropertyWhenUsingVendorPrefix, message); + } + if (missingVendorSpecific) { + let message = localize('keyframes.vendorspecific.missing', "Always include all vendor specific rules: Missing: {0}", missingVendorSpecific); + this.addEntry(node, Rules.AllVendorPrefixes, message); + } + }; + + let missingVendorSpecific = this.getMissingNames(expected, actual); + if (missingVendorSpecific || needsStandard) { + keyframes.data[name].nodes.forEach(addVendorSpecificWarnings); + } + } + + return true; + } + + private visitSimpleSelector(node: nodes.SimpleSelector): boolean { + + let text = node.getText(); + + ///////////////////////////////////////////////////////////// + // Lint - The universal selector (*) is known to be slow. + ///////////////////////////////////////////////////////////// + if (text === '*') { + this.addEntry(node, Rules.UniversalSelector); + } + + ///////////////////////////////////////////////////////////// + // Lint - Avoid id selectors + ///////////////////////////////////////////////////////////// + if (text.indexOf('#') === 0) { + this.addEntry(node, Rules.AvoidIdSelector); + } + return true; + } + + private visitImport(node: nodes.Import): boolean { + ///////////////////////////////////////////////////////////// + // Lint - Import statements shouldn't be used, because they aren't offering parallel downloads. + ///////////////////////////////////////////////////////////// + this.addEntry(node, Rules.ImportStatemement); + return true; + } + + private visitRuleSet(node: nodes.RuleSet): boolean { + ///////////////////////////////////////////////////////////// + // Lint - Don't use empty rulesets. + ///////////////////////////////////////////////////////////// + let declarations = node.getDeclarations(); + if (!declarations) { + // syntax error + return false; + } + + + if (!declarations.hasChildren()) { + this.addEntry(node.getSelectors(), Rules.EmptyRuleSet); + } + + let self = this; + let propertyTable: Element[] = []; + declarations.getChildren().forEach(function (element) { + if (element instanceof nodes.Declaration) { + let decl = element; + propertyTable.push(new Element(decl.getFullPropertyName(), decl)); + } + }, this); + + ///////////////////////////////////////////////////////////// + // Don't use width or height when using padding or border. + ///////////////////////////////////////////////////////////// + if ((this.fetch(propertyTable, 'width').length > 0 || this.fetch(propertyTable, 'height').length > 0) && (this.fetchWithin(propertyTable, 'padding').length > 0 || this.fetchWithin(propertyTable, 'border').length > 0)) { + let elements: Element[] = this.fetch(propertyTable, 'width'); + for (let index = 0; index < elements.length; index++) { + this.addEntry(elements[index].node, Rules.NoWidthOrHeightWhenPaddingOrBorder); + } + elements = this.fetch(propertyTable, 'height'); + for (let index = 0; index < elements.length; index++) { + this.addEntry(elements[index].node, Rules.NoWidthOrHeightWhenPaddingOrBorder); + } + elements = this.fetchWithin(propertyTable, 'padding'); + for (let index = 0; index < elements.length; index++) { + this.addEntry(elements[index].node, Rules.NoWidthOrHeightWhenPaddingOrBorder); + } + elements = this.fetchWithin(propertyTable, 'border'); + for (let index = 0; index < elements.length; index++) { + this.addEntry(elements[index].node, Rules.NoWidthOrHeightWhenPaddingOrBorder); + } + } + + ///////////////////////////////////////////////////////////// + // Properties ignored due to display + ///////////////////////////////////////////////////////////// + + // With 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect + let displayElems = this.fetchWithValue(propertyTable, 'display', 'inline'); + if (displayElems.length > 0) { + ['width', 'height', 'margin-top', 'margin-bottom', 'float'].forEach(function (prop) { + let elem = self.fetch(propertyTable, prop); + for (let index = 0; index < elem.length; index++) { + self.addEntry(elem[index].node, Rules.PropertyIgnoredDueToDisplay); + } + }); + } + + // With 'display: inline-block', 'float' has no effect + displayElems = this.fetchWithValue(propertyTable, 'display', 'inline-block'); + if (displayElems.length > 0) { + let elem = this.fetch(propertyTable, 'float'); + for (let index = 0; index < elem.length; index++) { + this.addEntry(elem[index].node, Rules.PropertyIgnoredDueToDisplay); + } + } + + // With 'display: block', 'vertical-align' has no effect + displayElems = this.fetchWithValue(propertyTable, 'display', 'block'); + if (displayElems.length > 0) { + let elem = this.fetch(propertyTable, 'vertical-align'); + for (let index = 0; index < elem.length; index++) { + this.addEntry(elem[index].node, Rules.PropertyIgnoredDueToDisplay); + } + } + + ///////////////////////////////////////////////////////////// + // Don't use !important + ///////////////////////////////////////////////////////////// + node.accept(n => { + if (n.type === nodes.NodeType.Prio) { + self.addEntry(n, Rules.AvoidImportant); + } + return true; + }); + + ///////////////////////////////////////////////////////////// + // Avoid 'float' + ///////////////////////////////////////////////////////////// + + let elements: Element[] = this.fetch(propertyTable, 'float'); + for (let index = 0; index < elements.length; index++) { + this.addEntry(elements[index].node, Rules.AvoidFloat); + } + + ///////////////////////////////////////////////////////////// + // Don't use duplicate declarations. + ///////////////////////////////////////////////////////////// + for (let i = 0; i < propertyTable.length; i++) { + let element = propertyTable[i]; + if (element.name.toLowerCase() !== 'background') { + let value = element.node.getValue(); + if (value && value.getText()[0] !== '-') { + let elements = this.fetch(propertyTable, element.name); + if (elements.length > 1) { + for (let k = 0; k < elements.length; k++) { + let value = elements[k].node.getValue(); + if (value && value.getText()[0] !== '-' && elements[k] !== element) { + this.addEntry(element.node, Rules.DuplicateDeclarations); + } + } + } + } + } + } + + ///////////////////////////////////////////////////////////// + // Unknown propery & When using a vendor-prefixed gradient, make sure to use them all. + ///////////////////////////////////////////////////////////// + + let propertiesBySuffix = new NodesByRootMap(); + let containsUnknowns = false; + + declarations.getChildren().forEach(node => { + if (this.isCSSDeclaration(node)) { + let decl = node; + let name = decl.getFullPropertyName(); + let firstChar = name.charAt(0); + + if (firstChar === '-') { + if (name.charAt(1) !== '-') { // avoid css variables + if (!languageFacts.isKnownProperty(name)) { + this.addEntry(decl.getProperty(), Rules.UnknownVendorSpecificProperty); + } + let nonPrefixedName = decl.getNonPrefixedPropertyName(); + propertiesBySuffix.add(nonPrefixedName, name, decl.getProperty()); + } + } else { + if (firstChar === '*' || firstChar === '_') { + this.addEntry(decl.getProperty(), Rules.IEStarHack); + name = name.substr(1); + } + if (!languageFacts.isKnownProperty(name)) { + this.addEntry(decl.getProperty(), Rules.UnknownProperty); + } + propertiesBySuffix.add(name, name, null); // don't pass the node as we don't show errors on the standard + } + } else { + containsUnknowns = true; + } + }); + + if (!containsUnknowns) { // don't perform this test if there are + for (let suffix in propertiesBySuffix.data) { + let entry = propertiesBySuffix.data[suffix]; + let actual = entry.names; + + let needsStandard = languageFacts.isKnownProperty(suffix) && (actual.indexOf(suffix) === -1); + if (!needsStandard && actual.length === 1) { + continue; // only the non-vendor specific rule is used, that's fine, no warning + } + + let expected: string[] = []; + for (let i = 0, len = LintVisitor.prefixes.length; i < len; i++) { + let prefix = LintVisitor.prefixes[i]; + if (languageFacts.isKnownProperty(prefix + suffix)) { + expected.push(prefix + suffix); + } + } + + let addVendorSpecificWarnings = (node: nodes.Node) => { + if (needsStandard) { + let message = localize('property.standard.missing', "Also define the standard property '{0}' for compatibility", suffix); + this.addEntry(node, Rules.IncludeStandardPropertyWhenUsingVendorPrefix, message); + } + if (missingVendorSpecific) { + let message = localize('property.vendorspecific.missing', "Always include all vendor specific properties: Missing: {0}", missingVendorSpecific); + this.addEntry(node, Rules.AllVendorPrefixes, message); + } + }; + + let missingVendorSpecific = this.getMissingNames(expected, actual); + if (missingVendorSpecific || needsStandard) { + entry.nodes.forEach(addVendorSpecificWarnings); + } + } + } + + + return true; + } + + private visitNumericValue(node: nodes.NumericValue): boolean { + ///////////////////////////////////////////////////////////// + // 0 has no following unit + ///////////////////////////////////////////////////////////// + let value = node.getValue(); + if (value.unit === '%') { + return true; + } + + if (parseFloat(value.value) === 0.0 && !!value.unit) { + this.addEntry(node, Rules.ZeroWithUnit); + } + + return true; + } + + private visitFontFace(node: nodes.FontFace): boolean { + let declarations = node.getDeclarations(); + if (!declarations) { + // syntax error + return; + } + + let definesSrc = false, definesFontFamily = false; + let containsUnknowns = false; + declarations.getChildren().forEach(node => { + if (this.isCSSDeclaration(node)) { + let name = ((node).getProperty().getName().toLocaleLowerCase()); + if (name === 'src') { definesSrc = true; } + if (name === 'font-family') { definesFontFamily = true; } + } else { + containsUnknowns = true; + } + }); + + if (!containsUnknowns && (!definesSrc || !definesFontFamily)) { + this.addEntry(node, Rules.RequiredPropertiesForFontFace); + } + + return true; + } + + private isCSSDeclaration(node: nodes.Node): boolean { + if (node instanceof nodes.Declaration) { + if (!(node).getValue()) { + return false; + } + let property = (node).getProperty(); + if (!property || property.getIdentifier().containsInterpolation()) { + return false; + } + return true; + } + return false; + } + + private visitUnknownNode(node: nodes.Node): boolean { + + // Rule: #eeff00 or #ef0 + if (node.type === nodes.NodeType.HexColorValue) { + let text = node.getText(); + if (text.length !== 7 && text.length !== 4) { + this.addEntry(node, Rules.HexColorLength); + } + } + return true; + } + + private visitFunction(node: nodes.Function): boolean { + + let fnName = node.getName().toLowerCase(); + let expectedAttrCount = -1; + let actualAttrCount = 0; + + switch (fnName) { + case 'rgb(': + case 'hsl(': + expectedAttrCount = 3; + break; + case 'rgba(': + case 'hsla(': + expectedAttrCount = 4; + break; + } + + if (expectedAttrCount !== -1) { + node.getArguments().accept(n => { + if (n instanceof nodes.BinaryExpression) { + actualAttrCount += 1; + return false; + } + return true; + }); + + if (actualAttrCount !== expectedAttrCount) { + this.addEntry(node, Rules.ArgsInColorFunction); + } + } + + return true; + } +} + + diff --git a/extensions/css/server/src/services/lintRules.ts b/extensions/css/server/src/services/lintRules.ts new file mode 100644 index 0000000000000000000000000000000000000000..2b7ce47f7ff2f86f163da53f3af2257d19f5ff5a --- /dev/null +++ b/extensions/css/server/src/services/lintRules.ts @@ -0,0 +1,66 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from '../parser/cssNodes'; + +import * as nls from 'vscode-nls'; +const localize = nls.loadMessageBundle(); + +let Warning = 'warning'; +let Error = 'error'; +let Ignore = 'ignore'; + +export class Rule implements nodes.IRule { + + public constructor(public id: string, public message: string, public defaultValue: string) { + // nothing to do + } +} +export let Rules = { + AllVendorPrefixes: new Rule('compatibleVendorPrefixes', localize('rule.vendorprefixes.all', "When using a vendor-specific prefix make sure to also include all other vendor-specific properties"), Ignore), + IncludeStandardPropertyWhenUsingVendorPrefix: new Rule('vendorPrefix', localize('rule.standardvendorprefix.all', "When using a vendor-specific prefix also include the standard property"), Warning), + DuplicateDeclarations: new Rule('duplicateProperties', localize('rule.duplicateDeclarations', "Do not use duplicate style definitions"), Ignore), + EmptyRuleSet: new Rule('emptyRules', localize('rule.emptyRuleSets', "Do not use empty rulesets"), Warning), + ImportStatemement: new Rule('importStatement', localize('rule.importDirective', "Import statements do not load in parallel"), Ignore), + NoWidthOrHeightWhenPaddingOrBorder: new Rule('boxModel', localize('rule.withHeightAndBorderPadding', "Do not use width or height when using padding or border"), Ignore), + UniversalSelector: new Rule('universalSelector', localize('rule.universalSelector', "The universal selector (*) is known to be slow"), Ignore), + ZeroWithUnit: new Rule('zeroUnits', localize('rule.zeroWidthUnit', "No unit for zero needed"), Ignore), + RequiredPropertiesForFontFace: new Rule('fontFaceProperties', localize('rule.fontFaceProperties', "@font-face rule must define 'src' and 'font-family' properties"), Warning), + HexColorLength: new Rule('hexColorLength', localize('rule.hexColor', "Hex colors must consist of three or six hex numbers"), Error), + ArgsInColorFunction: new Rule('argumentsInColorFunction', localize('rule.colorFunction', "Invalid number of parameters"), Error), + UnknownProperty: new Rule('unknownProperties', localize('rule.unknownProperty', "Unknown property."), Warning), + IEStarHack: new Rule('ieHack', localize('rule.ieHack', "IE hacks are only necessary when supporting IE7 and older"), Ignore), + UnknownVendorSpecificProperty: new Rule('unknownVendorSpecificProperties', localize('rule.unknownVendorSpecificProperty', "Unknown vendor specific property."), Ignore), + PropertyIgnoredDueToDisplay: new Rule('propertyIgnoredDueToDisplay', localize('rule.propertyIgnoredDueToDisplay', "Property is ignored due to the display. E.g. with 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect"), Warning), + AvoidImportant: new Rule('important', localize('rule.avoidImportant', "Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored."), Ignore), + AvoidFloat: new Rule('float', localize('rule.avoidFloat', "Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes."), Ignore), + AvoidIdSelector: new Rule('idSelector', localize('rule.avoidIdSelector', "Selectors should not contain IDs because these rules are too tightly coupled with the HTML."), Ignore), +}; + +export interface ILintConfigurationSettings { + [ruleId:string] : nodes.Level; +} + +export function sanitize(conf:any): ILintConfigurationSettings { + let settings: ILintConfigurationSettings = {}; + for (let ruleName in Rules) { + let rule = Rules[ruleName]; + let level = toLevel(conf[rule.id]); + if (level) { + settings[rule.id] = level; + } + } + return settings; +} + +export function toLevel(level: string):nodes.Level { + switch (level) { + case 'ignore': return nodes.Level.Ignore; + case 'warning': return nodes.Level.Warning; + case 'error': return nodes.Level.Error; + } + return null; +} diff --git a/extensions/css/server/src/services/selectorPrinting.ts b/extensions/css/server/src/services/selectorPrinting.ts new file mode 100644 index 0000000000000000000000000000000000000000..094fb9d6bb19e0d327d5fa8d316c1302a23494fe --- /dev/null +++ b/extensions/css/server/src/services/selectorPrinting.ts @@ -0,0 +1,369 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as nodes from '../parser/cssNodes'; +import {MarkedString} from 'vscode-languageserver'; + +export class Element { + + public name: string; + public parent: Element; + public children: Element[]; + public attributes: { [name: string]: string; }; + + public addChild(child: Element): void { + if (child instanceof Element) { + (child).parent = this; + } + if (!this.children) { + this.children = []; + } + this.children.push(child); + } + + public findRoot(): Element { + let curr: Element = this; + while (curr.parent && !(curr.parent instanceof RootElement)) { + curr = curr.parent; + } + return curr; + } + + public removeChild(child: Element): boolean { + if (this.children) { + let index = this.children.indexOf(child); + if (index !== -1) { + this.children.splice(index, 1); + return true; + } + } + return false; + } + + public addAttr(name: string, value: string): void { + if (!this.attributes) { + this.attributes = {}; + } + if (this.attributes.hasOwnProperty(name)) { + this.attributes[name] += ' ' + value; + } else { + this.attributes[name] = value; + } + } + + public clone(cloneChildren: boolean = true): Element { + let elem = new Element(); + elem.name = this.name; + if (this.attributes) { + elem.attributes = {}; + for (let key in this.attributes) { + elem.addAttr(key, this.attributes[key]); + } + } + if (cloneChildren && this.children) { + elem.children = []; + for (let index = 0; index < this.children.length; index++) { + elem.addChild(this.children[index].clone()); + } + } + return elem; + } + + public cloneWithParent(): Element { + let clone = this.clone(false); + if (this.parent && !(this.parent instanceof RootElement)) { + let parentClone = this.parent.cloneWithParent(); + parentClone.addChild(clone); + } + return clone; + } +} + +export class RootElement extends Element { + +} + +export class LabelElement extends Element { + + constructor(label: string) { + super(); + this.name = label; + } +} + +class MarkedStringPrinter { + + private result: MarkedString[]; + + constructor(public quote: string) { + // empty + } + + public print(element: Element): MarkedString[] { + this.result = []; + if (element instanceof RootElement) { + this.doPrint(element.children, 0); + } else { + this.doPrint([element], 0); + } + return this.result; + } + + private doPrint(elements: Element[], indent: number) { + for (let element of elements) { + this.doPrintElement(element, indent); + if (element.children) { + this.doPrint(element.children, indent + 1); + } + } + } + + private writeLine(level: number, content: string) { + let indent = new Array(level).join(' '); + this.result.push({ language: 'html', value: indent + content }); + } + + private doPrintElement(element: Element, indent: number) { + + // special case: a simple label + if (element instanceof LabelElement) { + this.writeLine(indent, element.name); + return; + } + + // the real deal + let content = ['<']; + + // element name + if (element.name) { + content.push(element.name); + } else { + content.push('element'); + } + + // attributes + if (element.attributes) { + Object.keys(element.attributes).forEach((attr) => { + + content.push(' '); + content.push(attr); + let value = element.attributes[attr]; + if (value) { + content.push('='); + content.push(quotes.ensure(value, this.quote)); + } + }); + } + content.push('>'); + + this.writeLine(indent, content.join('')); + } +} + + +namespace quotes { + + export function ensure(value: string, which: string): string { + return which + remove(value) + which; + } + + export function remove(value: string): string { + let match = value.match(/^['"](.*)["']$/); + if (match) { + return match[1]; + } + return value; + } +} + +export function toElement(node: nodes.SimpleSelector, parentElement?: Element): Element { + + let result = new Element(); + node.getChildren().forEach((child) => { + switch (child.type) { + case nodes.NodeType.SelectorCombinator: + if (parentElement) { + let segments = child.getText().split('&'); + if (segments.length === 1) { + // should not happen + result.name = segments[0]; + break; + } + result = parentElement.cloneWithParent(); + if (segments[0]) { + let root = result.findRoot(); + root.name = segments[0] + root.name; + } + for (let i = 1; i < segments.length; i++) { + if (i > 1) { + let clone = parentElement.cloneWithParent(); + result.addChild(clone.findRoot()); + result = clone; + } + result.name += segments[i]; + } + } + break; + case nodes.NodeType.SelectorPlaceholder: + case nodes.NodeType.ElementNameSelector: + let text = child.getText(); + result.name = text === '*' ? 'element' : text; + break; + case nodes.NodeType.ClassSelector: + result.addAttr('class', child.getText().substring(1)); + break; + case nodes.NodeType.IdentifierSelector: + result.addAttr('id', child.getText().substring(1)); + break; + case nodes.NodeType.MixinDeclaration: + result.addAttr('class', (child).getName()); + break; + case nodes.NodeType.PseudoSelector: + result.addAttr(child.getText(), ''); + break; + case nodes.NodeType.AttributeSelector: + let expr = child.getChildren()[0]; + if (expr) { + let value: string; + if (expr.getRight()) { + switch (expr.getOperator().getText()) { + case '|=': + // excatly or followed by -words + value = `${quotes.remove(expr.getRight().getText())}-\u2026`; + break; + case '^=': + // prefix + value = `${quotes.remove(expr.getRight().getText())}\u2026`; + break; + case '$=': + // suffix + value = `\u2026${quotes.remove(expr.getRight().getText())}`; + break; + case '~=': + // one of a list of words + value = ` \u2026 ${quotes.remove(expr.getRight().getText())} \u2026 `; + break; + case '*=': + // substring + value = `\u2026${quotes.remove(expr.getRight().getText())}\u2026`; + break; + default: + value = quotes.remove(expr.getRight().getText()); + break; + } + } + result.addAttr(expr.getLeft().getText(), value); + } + break; + } + }); + return result; +} + +export function selectorToMarkedString(node: nodes.Selector): MarkedString[] { + let root = selectorToElement(node); + return new MarkedStringPrinter('"').print(root); +} + +export function simpleSelectorToMarkedString(node: nodes.SimpleSelector): MarkedString[] { + let element = toElement(node); + return new MarkedStringPrinter('"').print(element); +} + +class SelectorElementBuilder { + + private prev: nodes.Node; + private element: Element; + + public constructor(element: Element) { + this.prev = null; + this.element = element; + } + + public processSelector(selector: nodes.Selector): void { + let parentElement: Element = null; + + if (!(this.element instanceof RootElement)) { + if (selector.getChildren().some((c) => c.hasChildren() && c.getChild(0).type === nodes.NodeType.SelectorCombinator)) { + let curr = this.element.findRoot(); + if (curr.parent instanceof RootElement) { + parentElement = this.element; + + this.element = curr.parent; + this.element.removeChild(curr); + this.prev = null; + } + } + } + + selector.getChildren().forEach((selectorChild) => { + if (selectorChild instanceof nodes.SimpleSelector) { + if (this.prev instanceof nodes.SimpleSelector) { + let labelElement = new LabelElement('\u2026'); + this.element.addChild(labelElement); + this.element = labelElement; + } else if (this.prev && (this.prev.matches('+') || this.prev.matches('~'))) { + this.element = this.element.parent; + } + + if (this.prev && this.prev.matches('~')) { + this.element.addChild(toElement(selectorChild)); + this.element.addChild(new LabelElement('\u22EE')); + } + + let thisElement = toElement(selectorChild, parentElement); + let root = thisElement.findRoot(); + + this.element.addChild(root); + this.element = thisElement; + } + + if (selectorChild instanceof nodes.SimpleSelector || + selectorChild.type === nodes.NodeType.SelectorCombinatorParent || + selectorChild.type === nodes.NodeType.SelectorCombinatorSibling || + selectorChild.type === nodes.NodeType.SelectorCombinatorAllSiblings) { + + this.prev = selectorChild; + } + }); + } +} + +function isNewSelectorContext(node: nodes.Node): boolean { + switch (node.type) { + case nodes.NodeType.MixinDeclaration: + case nodes.NodeType.Stylesheet: + return true; + } + return false; +} + +export function selectorToElement(node: nodes.Selector): Element { + let root: Element = new RootElement(); + let parentRuleSets: nodes.RuleSet[] = []; + + if (node.getParent() instanceof nodes.RuleSet) { + let parent = node.getParent().getParent(); // parent of the selector's ruleset + while (parent && !isNewSelectorContext(parent)) { + if (parent instanceof nodes.RuleSet) { + parentRuleSets.push(parent); + } + parent = parent.getParent(); + } + } + + let builder = new SelectorElementBuilder(root); + + for (let i = parentRuleSets.length - 1; i >= 0; i--) { + let selector = parentRuleSets[i].getSelectors().getChild(0); + if (selector) { + builder.processSelector(selector); + } + } + + builder.processSelector(node); + return root; +} diff --git a/extensions/css/server/src/test/codeActions.test.ts b/extensions/css/server/src/test/codeActions.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..5e2b1419e0627ac8bab6981bfb3fe8ee3eed02fd --- /dev/null +++ b/extensions/css/server/src/test/codeActions.test.ts @@ -0,0 +1,64 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as assert from 'assert'; +import {Parser} from '../parser/cssParser'; +import {CSSCompletion} from '../services/cssCompletion'; +import {CSSCodeActions} from '../services/cssCodeActions'; +import {CSSValidation} from '../services/cssValidation'; + +import {CompletionList, TextDocument, TextEdit, Position, Range, Command} from 'vscode-languageserver'; +import {applyEdits} from './textEditSupport'; + +suite('CSS - Code Actions', () => { + let testCodeActions = function (value: string, tokenBefore: string): Thenable<{ commands: Command[]; document: TextDocument; }> { + let document = TextDocument.create('test://test/test.css', 'css', 0, value); + let styleSheet = new Parser().parseStylesheet(document); + let offset = value.indexOf(tokenBefore); + let startPosition = document.positionAt(offset); + let endPosition = document.positionAt(offset + tokenBefore.length); + let range = Range.create(startPosition, endPosition); + let validation = new CSSValidation(); + validation.configure({ validate: true }); + + return validation.doValidation(document, styleSheet).then(diagnostics => { + return new CSSCodeActions().doCodeActions(document, range, { diagnostics }, styleSheet).then(commands => { + return { commands, document }; + }); + }); + }; + + let assertCodeAction = function (commands: Command[], document: TextDocument, expected: { title: string; content: string; }[]) { + let labels = commands.map(command => command.title); + + for (let exp of expected) { + let index = labels.indexOf(exp.title); + assert.ok(index !== -1, 'Quick fix not found: ' + exp.title + ' , found:' + labels.join(',')); + let command = commands[index]; + assert.equal(applyEdits(document, command.arguments[2]), exp.content); + assert.equal(command.arguments[0], document.uri); + assert.equal(command.arguments[1], document.version); + } + }; + + test('Unknown Properties', function (testDone): any { + Promise.all([ + testCodeActions('body { /*here*/displai: inline }', '/*here*/').then((result) => { + assertCodeAction(result.commands, result.document, [ + { title: 'Rename to \'display\'', content: 'body { /*here*/display: inline }' } + ]) + }), + + testCodeActions('body { /*here*/background-colar: red }', '/*here*/').then((result) => { + assertCodeAction(result.commands, result.document, [ + { title: 'Rename to \'background-color\'', content: 'body { /*here*/background-color: red }' }, + { title: 'Rename to \'background-clip\'', content: 'body { /*here*/background-clip: red }' }, + { title: 'Rename to \'background-image\'', content: 'body { /*here*/background-image: red }' } + ]) + }) + ]).then(() => testDone(), (error) => testDone(error)); + }); +}) diff --git a/extensions/css/server/src/test/completion.test.ts b/extensions/css/server/src/test/completion.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..b96139e881df5f704072b13d22402f940ffccd9b --- /dev/null +++ b/extensions/css/server/src/test/completion.test.ts @@ -0,0 +1,230 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as assert from 'assert'; +import {Parser} from '../parser/cssParser'; +import {CSSCompletion} from '../services/cssCompletion'; + +import {CompletionList, TextDocument, TextEdit, Position, CompletionItemKind} from 'vscode-languageserver'; +import {applyEdits} from './textEditSupport'; + +suite('CSS - Completion', () => { + + interface ItemDescription { + label: string; + documentation?: string; + kind?: CompletionItemKind; + resultText?: string; + } + + let assertCompletion = function (completions: CompletionList, expected: ItemDescription, document?: TextDocument) { + let matches = completions.items.filter(completion => { + return completion.label === expected.label; + }); + assert.equal(matches.length, 1, expected.label + " should only existing once: Actual: " + completions.items.map(c => c.label).join(', ')); + if (expected.documentation) { + assert.equal(matches[0].documentation, expected.documentation); + } + if (expected.kind) { + assert.equal(matches[0].kind, expected.kind); + } + if (document && expected.resultText) { + assert.equal(applyEdits(document, [matches[0].textEdit]), expected.resultText); + } + }; + + let testCompletionFor = function (value: string, stringBefore: string, expected: { count?: number, items?: ItemDescription[] }): Thenable { + let idx = stringBefore ? value.indexOf(stringBefore) + stringBefore.length : 0; + + let completionProvider = new CSSCompletion(); + + let document = TextDocument.create('test://test/test.css', 'css', 0, value); + let position = Position.create(0, idx); + let jsonDoc = new Parser().parseStylesheet(document); + let list = completionProvider.doComplete(document, position, jsonDoc); + if (expected.count) { + assert.equal(list.items, expected.count); + } + if (expected.items) { + for (let item of expected.items) { + assertCompletion(list, item, document); + } + } + return Promise.resolve(null); + }; + + test('sylesheet', function (testDone): any { + Promise.all([ + testCompletionFor(' ', null, { + items: [ + { label: '@import' }, + { label: '@keyframes' }, + { label: 'div' } + ] + }), + testCompletionFor(' body {', null, { + items: [ + { label: '@import' }, + { label: '@keyframes' }, + { label: 'html' } + ] + }), + testCompletionFor('@import url("something.css");', '@', { + count: 0 + }) + ]).then(() => testDone(), (error) => testDone(error)); + }); + test('properties', function (testDone): any { + Promise.all([ + testCompletionFor('body {', '{', { + items: [ + { label: 'display' }, + { label: 'background' } + ] + }), + testCompletionFor('body { ver', 'ver', { + items: [ + { label: 'vertical-align' } + ] + }), + testCompletionFor('body { vertical-align', 'vertical-ali', { + items: [ + { label: 'vertical-align' } + ] + }), + testCompletionFor('body { vertical-align', 'vertical-align', { + items: [ + { label: 'vertical-align' } + ] + }), + testCompletionFor('body { vertical-align: bottom;}', 'vertical-align', { + items: [ + { label: 'vertical-align' } + ] + }), + testCompletionFor('body { trans ', 'trans', { + items: [ + { label: 'transition' } + ] + }) + ]).then(() => testDone(), (error) => testDone(error)); + }); + test('values', function (testDone): any { + Promise.all([ + testCompletionFor('body { vertical-align: bottom;}', 'vertical-align:', { + items: [ + { label: 'bottom' }, + { label: '0cm' } + ] + }), + testCompletionFor('body { vertical-align: bottom;}', 'vertical-align: ', { + items: [ + { label: 'bottom' }, + { label: '0cm' } + ] + }), + testCompletionFor('body { vertical-align: bott', 'bott', { + items: [ + { label: 'bottom' } + ] + }), + testCompletionFor('body { vertical-align: bottom }', 'bott', { + items: [ + { label: 'bottom' } + ] + }), + testCompletionFor('body { vertical-align: bottom }', 'bottom', { + items: [ + { label: 'bottom' } + ] + }), + testCompletionFor('body { vertical-align: bottom; }', 'bottom', { + items: [ + { label: 'bottom' } + ] + }), + testCompletionFor('body { vertical-align: bottom; }', 'bottom;', { + count: 0 + }), + testCompletionFor('body { vertical-align: bottom; }', 'bottom; ', { + items: [ + { label: 'display' } + ] + }) + ]).then(() => testDone(), (error) => testDone(error)); + }); + test('units', function (testDone): any { + Promise.all([ + testCompletionFor('body { vertical-align: 9 }', '9', { + items: [ + { label: '9cm' } + ] + }), + testCompletionFor('body { vertical-align: 1.2 }', '1.2', { + items: [ + { label: '1.2em' } + ] + }), + testCompletionFor('body { vertical-align: 10 }', '1', { + items: [ + { label: '1cm' } + ] + }), + testCompletionFor('body { vertical-align: 10c }', '10c', { + items: [ + { label: '10cm' } + ] + }) + ]).then(() => testDone(), (error) => testDone(error)); + }); + test('unknown', function (testDone): any { + Promise.all([ + testCompletionFor('body { notexisting: ;}', 'notexisting: ', { + count: 0 + }), + testCompletionFor('.foo { unknown: foo; } .bar { unknown: }', '.bar { unknown:', { + items: [ + { label: 'foo', kind: CompletionItemKind.Value } + ] + }) + ]).then(() => testDone(), (error) => testDone(error)); + }); + test('colors', function (testDone): any { + Promise.all([ + testCompletionFor('body { border-right: ', 'right: ', { + items: [ + { label: 'cyan' }, + { label: 'dotted' }, + { label: '0em' } + ] + }), + testCompletionFor('body { border-right: cyan dotted 2em ', 'cyan', { + items: [ + { label: 'cyan' }, + { label: 'darkcyan' } + ] + }), + testCompletionFor('body { border-right: dotted 2em ', '2em ', { + items: [ + { label: 'cyan' } + ] + }), + testCompletionFor('.foo { background-color: #123456; } .bar { background-color: }', '.bar { background-color:', { + items: [ + { label: '#123456', kind: CompletionItemKind.Color } + ] + }), + testCompletionFor('.foo { background-color: r', 'background-color: r', { + items: [ + { label: 'rgb', kind: CompletionItemKind.Function }, + { label: 'rgba', kind: CompletionItemKind.Function }, + { label: 'red', kind: CompletionItemKind.Color } + ] + }) + ]).then(() => testDone(), (error) => testDone(error)); + }); +}); + diff --git a/extensions/css/server/src/test/languageFacts.test.ts b/extensions/css/server/src/test/languageFacts.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..e85096b1f4a848da3d9995d9632e88f275bae93a --- /dev/null +++ b/extensions/css/server/src/test/languageFacts.test.ts @@ -0,0 +1,60 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as assert from 'assert'; +import * as languageFacts from '../services/languageFacts'; +import {Parser} from '../parser/cssParser'; +import * as nodes from '../parser/cssNodes'; +import {TextDocument} from 'vscode-languageserver'; + +export function assertColor(parser: Parser, text: string, selection: string, isColor: boolean): void { + let document = TextDocument.create('test://test/test.css', 'css', 0, text); + let stylesheet = parser.parseStylesheet(document); + assert.equal(0, nodes.ParseErrorCollector.entries(stylesheet).length, 'compile errors'); + + let node = nodes.getNodeAtOffset(stylesheet, text.indexOf(selection)); + + assert.equal(isColor, languageFacts.isColorValue(node)); +} + +suite('CSS - Language Facts', () => { + + test('properties', function () { + let properties = languageFacts.getProperties(); + let alignLast = properties['text-align-last']; + + assert.ok(alignLast !== null); + assert.equal(alignLast.name, 'text-align-last'); + let b = alignLast.browsers; + assert.equal(b['FF'], '12'); + assert.equal(b['IE'], '5'); + assert.equal(b['E'], ''); + assert.equal(b['C'], void 0); + assert.equal(b['count'], 3); + + assert.equal(languageFacts.getBrowserLabel(alignLast.browsers), 'Edge, Firefox 12, IE 5'); + + let r = alignLast.restrictions; + + assert.equal(r.length, 1); + assert.equal(r[0], 'enum'); + + let v = alignLast.values; + assert.equal(v.length, 5); + assert.equal(v[0].name, 'auto'); + assert.equal(v[0].browsers.all, true); + assert.equal(v[0].browsers.count, Number.MAX_VALUE); + }); + + test('is color', function () { + let parser = new Parser(); + assertColor(parser, '#main { color: red }', 'red', true); + assertColor(parser, '#main { color: #231 }', '#231', true); + assertColor(parser, '#main { red: 1 }', 'red', false); + assertColor(parser, '#red { foo: 1 }', 'red', false); + }); +}); + diff --git a/extensions/css/server/src/test/lint.test.ts b/extensions/css/server/src/test/lint.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..371f492a8436ff8ea6f673cca658f7f689ed0270 --- /dev/null +++ b/extensions/css/server/src/test/lint.test.ts @@ -0,0 +1,129 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as assert from 'assert'; +import * as nodes from '../parser/cssNodes'; +import {Parser} from '../parser/cssParser'; +import {LintVisitor} from '../services/lint'; +import {Rule, Rules} from '../services/lintRules'; +import {TextDocument} from 'vscode-languageserver'; + +export function assertEntries(node: nodes.Node, rules: nodes.IRule[]): void { + + let visitor = new LintVisitor(); + node.accept(visitor); + + let entries = visitor.getEntries(nodes.Level.Error | nodes.Level.Warning | nodes.Level.Ignore); + assert.equal(entries.length, rules.length); + + for (let entry of entries) { + let idx = rules.indexOf(entry.getRule()); + rules.splice(idx, 1); + } + assert.equal(rules.length, 0); +} + +function assertStyleSheet(input: string, ...rules: Rule[]): void { + let p = new Parser(); + let document = TextDocument.create('test://test/test.css', 'css', 0, input); + let node = p.parseStylesheet(document); + + assertEntries(node, rules); +} + +function assertRuleSet(input: string, ...rules: Rule[]): void { + let p = new Parser(); + let node = p.internalParse(input, p._parseRuleset); + assertEntries(node, rules); +} + + +function assertFontFace(input: string, ...rules: Rule[]): void { + let p = new Parser(); + let node = p.internalParse(input, p._parseFontFace); + assertEntries(node, rules); +} + +suite('CSS - Lint', () => { + + test('universal selector, empty rule', function () { + assertRuleSet('* { color: perty }', Rules.UniversalSelector); + assertRuleSet('*, div { color: perty }', Rules.UniversalSelector); + assertRuleSet('div, * { color: perty }', Rules.UniversalSelector); + assertRuleSet('div > * { color: perty }', Rules.UniversalSelector); + assertRuleSet('div + * { color: perty }', Rules.UniversalSelector); + }); + + test('empty ruleset', function () { + assertRuleSet('selector {}', Rules.EmptyRuleSet); + }); + + test('properies ignored due to inline ', function () { + assertRuleSet('selector { display: inline; height: 100px; }', Rules.PropertyIgnoredDueToDisplay); + assertRuleSet('selector { display: inline; width: 100px; }', Rules.PropertyIgnoredDueToDisplay); + assertRuleSet('selector { display: inline; margin-top: 1em; }', Rules.PropertyIgnoredDueToDisplay); + assertRuleSet('selector { display: inline; margin-bottom: 1em; }', Rules.PropertyIgnoredDueToDisplay); + assertRuleSet('selector { display: inline; float: right; }', Rules.PropertyIgnoredDueToDisplay, Rules.AvoidFloat); + assertRuleSet('selector { display: inline-block; float: right; }', Rules.PropertyIgnoredDueToDisplay, Rules.AvoidFloat); + assertRuleSet('selector { display: block; vertical-align: center; }', Rules.PropertyIgnoredDueToDisplay); + }); + + test('avoid !important', function () { + assertRuleSet('selector { display: inline !important; }', Rules.AvoidImportant); + }); + + test('avoid float', function () { + assertRuleSet('selector { float: right; }', Rules.AvoidFloat); + }); + + test('avoid id selectors', function () { + assertRuleSet('#selector { display: inline; }', Rules.AvoidIdSelector); + }); + + test('zero with unit', function () { + // assertRuleSet('selector { width: 0px }', lint.Rules.ZeroWithUnit); + assertRuleSet('selector { width: 0% }'); + }); + + test('duplicate declarations', function () { + assertRuleSet('selector { color: perty; color: perty }', Rules.DuplicateDeclarations, Rules.DuplicateDeclarations); + assertRuleSet('selector { color: -o-perty; color: perty }'); + }); + + test('unknown properties', function () { + assertRuleSet('selector { -ms-property: "rest is missing" }', Rules.UnknownVendorSpecificProperty); + assertRuleSet('selector { -moz-box-shadow: "rest is missing" }', Rules.UnknownVendorSpecificProperty, Rules.IncludeStandardPropertyWhenUsingVendorPrefix); + assertRuleSet('selector { box-shadow: none }'); // no error + assertRuleSet('selector { box-property: "rest is missing" }', Rules.UnknownProperty); + + }); + + test('IE hacks', function () { + assertRuleSet('selector { display: inline-block; *display: inline; }', Rules.IEStarHack); + assertRuleSet('selector { background: #00f; /* all browsers including Mac IE */ *background: #f00; /* IE 7 and below */ _background: #f60; /* IE 6 and below */ }', Rules.IEStarHack, Rules.IEStarHack); + }); + + test('vendor specific prefixes', function () { + assertRuleSet('selector { -moz-animation: none }', Rules.AllVendorPrefixes, Rules.IncludeStandardPropertyWhenUsingVendorPrefix); + assertRuleSet('selector { -moz-transform: none; transform: none }', Rules.AllVendorPrefixes); + assertRuleSet('selector { transform: none; }'); + assertRuleSet('selector { -moz-transform: none; transform: none; -o-transform: none; -webkit-transform: none; -ms-transform: none; }'); + assertRuleSet('selector { --transform: none; }'); + }); + + test('font-face required properties', function () { + assertFontFace('@font-face { }', Rules.RequiredPropertiesForFontFace); + assertFontFace('@font-face { src: url(test.tff) }', Rules.RequiredPropertiesForFontFace); + assertFontFace('@font-face { font-family: \'name\' }', Rules.RequiredPropertiesForFontFace); + assertFontFace('@font-face { src: url(test.tff); font-family: \'name\' }'); // no error + }); + + test('keyframes', function () { + assertStyleSheet('@keyframes foo { }'); + assertStyleSheet('@keyframes foo { } @-moz-keyframes foo { }', Rules.AllVendorPrefixes); + assertStyleSheet('@-moz-keyframes foo { }', Rules.AllVendorPrefixes, Rules.IncludeStandardPropertyWhenUsingVendorPrefix); + }); +}); diff --git a/extensions/css/server/src/test/navigation.test.ts b/extensions/css/server/src/test/navigation.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..7b2189e7c5a85c0e7bd66d6cbc501c2ab5034074 --- /dev/null +++ b/extensions/css/server/src/test/navigation.test.ts @@ -0,0 +1,227 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as assert from 'assert'; +import {Scope, GlobalScope, ScopeBuilder} from '../parser/cssSymbolScope'; +import * as nodes from '../parser/cssNodes'; +import {Parser} from '../parser/cssParser'; +import {CSSNavigation} from '../services/cssNavigation'; + +import {TextDocument, DocumentHighlightKind} from 'vscode-languageserver'; + +export function assertScopesAndSymbols(p: Parser, input: string, expected: string): void { + let global = createScope(p, input); + assert.equal(scopeToString(global), expected); +} + +export function assertHighlights(p: Parser, input: string, marker: string, expectedMatches: number, expectedWrites: number): void { + let document = TextDocument.create('test://test/test.css', 'css', 0, input); + + let stylesheet = p.parseStylesheet(document); + assertNoErrors(stylesheet); + + let index = input.indexOf(marker) + marker.length; + let position = document.positionAt(index); + + let highlights = new CSSNavigation().findDocumentHighlights(document, position, stylesheet); + assert.equal(highlights.length, expectedMatches); + + let nWrites = 0; + for (let highlight of highlights) { + if (highlight.kind === DocumentHighlightKind.Write) { + nWrites++; + } + let range = highlight.range; + let start = document.offsetAt(range.start), end = document.offsetAt(range.end); + assert.equal(document.getText().substring(start, end), marker); + } + assert.equal(nWrites, expectedWrites); +} + + +export function assertSymbolsInScope(p: Parser, input: string, offset: number, ...selections: { name: string; type: nodes.ReferenceType }[]): void { + + let global = createScope(p, input); + + let scope = global.findScope(offset); + + let getErrorMessage = function (name: string) { + let all = 'symbol ' + name + ' not found. In scope: '; + scope.getSymbols().forEach((sym) => { all += (sym.name + ' '); }); + return all; + }; + + for (let i = 0; i < selections.length; i++) { + let selection = selections[i]; + let sym = scope.getSymbol(selection.name, selection.type) || global.getSymbol(selection.name, selection.type); + assert.ok(!!sym, getErrorMessage(selection.name)); + } +} + +export function assertScopeBuilding(p: Parser, input: string, ...scopes: { offset: number; length: number; }[]): void { + + let global = createScope(p, input); + + function assertChildren(scope: Scope): void { + + scope.children.forEach((scope) => { + + // check bounds + let expected = scopes.shift(); + assert.equal(scope.offset, expected.offset); + assert.equal(scope.length, expected.length); + + // recursive descent + assertChildren(scope); + }); + } + + assertChildren(global); + + assert.equal(scopes.length, 0, 'remainig scopes: ' + scopes.join()); +} + +function scopeToString(scope: Scope): string { + let str = ''; + let symbols = scope.getSymbols(); + for (let index = 0; index < symbols.length; index++) { + if (str.length > 0) { + str += ','; + } + str += symbols[index].name; + } + let scopes = scope.children; + for (let index = 0; index < scopes.length; index++) { + if (str.length > 0) { + str += ','; + } + str += ('[' + scopeToString(scopes[index]) + ']'); + } + return str; +} + +function assertNoErrors(node: nodes.Node): void { + let markers = nodes.ParseErrorCollector.entries(node); + if (markers.length > 0) { + assert.ok(false, 'node has errors: ' + markers[0].getMessage() + ', offset: ' + markers[0].getNode().offset); + } +} + +function createScope(p: Parser, input: string): Scope { + let document = TextDocument.create('test://test/test.css', 'css', 0, input); + + let styleSheet = p.parseStylesheet(document), + global = new GlobalScope(), + builder = new ScopeBuilder(global); + + assertNoErrors(styleSheet); + styleSheet.accept(builder); + return global; +} + +suite('CSS - Symbols', () => { + + test('scope creation', function () { + + let global = new GlobalScope(), + child1 = new Scope(10, 5), + child2 = new Scope(15, 5); + + global.addChild(child1); + global.addChild(child2); + + assert.equal(global.children.length, 2); + assert.ok(child1.parent === global); + assert.ok(child2.parent === global); + + // find children + assert.ok(global.findScope(-1) === null); + assert.ok(global.findScope(0) === global); + assert.ok(global.findScope(10) === child1); + assert.ok(global.findScope(14) === child1); + assert.ok(global.findScope(15) === child2); + assert.ok(global.findScope(19) === child2); + assert.ok(global.findScope(19).parent === global); + }); + + test('scope building', function () { + let p = new Parser(); + assertScopeBuilding(p, '.class {}', { offset: 7, length: 2 }); + assertScopeBuilding(p, '.class {} .class {}', { offset: 7, length: 2 }, { offset: 17, length: 2 }); + }); + + test('symbols in scopes', function () { + let p = new Parser(); + assertSymbolsInScope(p, '@keyframes animation {};', 0, { name: 'animation', type: nodes.ReferenceType.Keyframe }); + assertSymbolsInScope(p, ' .class1 {} .class2 {}', 0, { name: '.class1', type: nodes.ReferenceType.Rule }, { name: '.class2', type: nodes.ReferenceType.Rule }); + }); + + test('scopes and symbols', function () { + let p = new Parser(); + assertScopesAndSymbols(p, '.class {}', '.class,[]'); + assertScopesAndSymbols(p, '@keyframes animation {}; .class {}', 'animation,.class,[],[]'); + assertScopesAndSymbols(p, '@page :pseudo-class { margin:2in; }', '[]'); + assertScopesAndSymbols(p, '@media print { body { font-size: 10pt } }', '[body,[]]'); + assertScopesAndSymbols(p, '@-moz-keyframes identifier { 0% { top: 0; } 50% { top: 30px; left: 20px; }}', 'identifier,[[],[]]'); + assertScopesAndSymbols(p, '@font-face { font-family: "Bitstream Vera Serif Bold"; }', '[]'); + }); + + test('mark occurrences', function () { + let p = new Parser(); + assertHighlights(p, '@keyframes id {}; #main { animation: id 4s linear 0s infinite alternate; }', 'id', 2, 1); + assertHighlights(p, '@keyframes id {}; #main { animation-name: id; foo: id;}', 'id', 2, 1); + }); + + test('test variables in root scope', function () { + let p = new Parser(); + assertSymbolsInScope(p, ':root{ --var1: abc; --var2: def; }', 0, { name: '--var1', type: nodes.ReferenceType.Variable }, { name: '--var2', type: nodes.ReferenceType.Variable }); + }); + + test('test variables in local scope', function () { + let p = new Parser(); + assertSymbolsInScope(p, '.a{ --var1: abc; --var2: def; }', 2, { name: '--var1', type: nodes.ReferenceType.Variable }, { name: '--var2', type: nodes.ReferenceType.Variable }); + }); + + test('test variables in local scope get root variables too', function () { + let p = new Parser(); + assertSymbolsInScope(p, '.a{ --var1: abc; } :root{ --var2: abc;}', 2, { name: '--var1', type: nodes.ReferenceType.Variable }, { name: '--var2', type: nodes.ReferenceType.Variable }); + }); + + test('test variables in local scope get root variables and other local variables too', function () { + let p = new Parser(); + assertSymbolsInScope(p, '.a{ --var1: abc; } .b{ --var2: abc; } :root{ --var3: abc;}', 2, { name: '--var1', type: nodes.ReferenceType.Variable }, { name: '--var2', type: nodes.ReferenceType.Variable }, { name: '--var3', type: nodes.ReferenceType.Variable }); + }); + + test('mark occurrences for variable defined in root and used in a rule', function () { + let p = new Parser(); + assertHighlights(p, '.a{ background: let(--var1); } :root{ --var1: abc;}', '--var1', 2, 1); + }); + + test('mark occurrences for variable defined in a rule and used in a different rule', function () { + let p = new Parser(); + assertHighlights(p, '.a{ background: let(--var1); } :b{ --var1: abc;}', '--var1', 2, 1); + }); + + test('mark occurrences for property', function () { + let p = new Parser(); + assertHighlights(p, 'body { display: inline } #foo { display: inline }', 'display', 2, 0); + }); + + test('mark occurrences for value', function () { + let p = new Parser(); + assertHighlights(p, 'body { display: inline } #foo { display: inline }', 'inline', 2, 0); + }); + + test('mark occurrences for selector', function () { + let p = new Parser(); + assertHighlights(p, 'body { display: inline } #foo { display: inline }', 'body', 1, 1); + }); + + test('mark occurrences for comment', function () { + let p = new Parser(); + assertHighlights(p, '/* comment */body { display: inline } ', 'comment', 0, 0); + }); +}); \ No newline at end of file diff --git a/extensions/css/server/src/test/nodes.test.ts b/extensions/css/server/src/test/nodes.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..5ee5801107cf38970931feb0511ef96b9b6117e7 --- /dev/null +++ b/extensions/css/server/src/test/nodes.test.ts @@ -0,0 +1,118 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as assert from 'assert'; +import * as nodes from '../parser/cssNodes'; +import {Parser} from '../parser/cssParser'; + +export class PrintingVisitor implements nodes.IVisitor { + + public tree: string[] = []; + + public visitNode(node: nodes.Node): boolean { + this.tree.push(nodes.NodeType[node.type].toLowerCase()); + return true; + } +} + +export function assertNodes(fn: (input: string) => nodes.Node, input: string, expected: string): void { + let node = fn(input); + let visitor = new PrintingVisitor(); + + node.accept(visitor); + + let actual = visitor.tree.join(',') + ','; + let segments = expected.split(','); + let oldIndex: number = undefined; + let index = -1; + + while (segments.length > 0) { + let segment = segments.shift(); + if (segment === '...') { + continue; + } + index = actual.indexOf(segment + ',', oldIndex); + if (index <= oldIndex) { + assert.ok(false, segment + ' NOT found in ' + actual); + } + oldIndex = index + segment.length; + } + + assert.ok(true); +} + +suite('CSS - Nodes', () => { + + test('Test Node', function () { + + let node = new nodes.Node(); + assert.equal(node.offset, -1); + assert.equal(node.length, -1); + assert.equal(node.parent, null); + assert.equal(node.getChildren().length, 0); + + let c = 0; + node.accept((n: nodes.Node) => { + assert.ok(n === node); + c += 1; + return true; + }); + assert.equal(c, 1); + + let child = new nodes.Node(); + node.adoptChild(child); + + c = 0; + let expects = [node, child]; + node.accept((n: nodes.Node) => { + assert.ok(n === expects[c]); + c += 1; + return true; + }); + assert.equal(c, 2); + }); + + test('Test Adopting', function () { + + let child = new nodes.Node(); + let p1 = new nodes.Node(); + let p2 = new nodes.Node(); + + assert.ok(child.parent === null); + assert.equal(p1.getChildren().length, 0); + assert.equal(p2.getChildren().length, 0); + + p1.adoptChild(child); + assert.ok(child.parent === p1); + assert.equal(p1.getChildren().length, 1); + assert.equal(p2.getChildren().length, 0); + + p2.adoptChild(child); + assert.ok(child.parent === p2); + assert.equal(p1.getChildren().length, 0); + assert.equal(p2.getChildren().length, 1); + }); + + function ruleset(input: string): nodes.RuleSet { + let parser = new Parser(); + let node = parser.internalParse(input, parser._parseRuleset); + return node; + } + + test('RuleSet', function () { + assertNodes(ruleset, 'selector { prop: value }', 'ruleset,...,selector,...,declaration,...,property,...,expression'); + assertNodes(ruleset, 'selector { prop; }', 'ruleset,...,selector,...,selector'); + }); + + test('Keyframe', function () { + function fn(input: string): nodes.Node { + let parser = new Parser(); + let node = parser.internalParse(input, parser._parseKeyframe); + return node; + }; + assertNodes(fn, '@keyframes name { from { top: 0px} to { top: 100px } }', 'keyframe,identifier,keyframeselector,declaration,keyframeselector,declaration'); + }); +}); \ No newline at end of file diff --git a/extensions/css/server/src/test/parser.test.ts b/extensions/css/server/src/test/parser.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..c856c810a6619ab815b1399bbcd683424680f0b1 --- /dev/null +++ b/extensions/css/server/src/test/parser.test.ts @@ -0,0 +1,404 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as assert from 'assert'; +import {Parser} from '../parser/cssParser'; +import {TokenType} from '../parser/cssScanner'; +import * as nodes from '../parser/cssNodes'; +import {ParseError} from '../parser/cssErrors'; + +export function assertNode(text: string, parser: Parser, f: () => nodes.Node): nodes.Node { + let node = parser.internalParse(text, f); + assert.ok(node !== null, 'no node returned'); + let markers = nodes.ParseErrorCollector.entries(node); + if (markers.length > 0) { + assert.ok(false, 'node has errors: ' + markers[0].getMessage() + ', offset: ' + markers[0].getNode().offset); + } + assert.ok(parser.accept(TokenType.EOF), 'Expect scanner at EOF'); + return node; +} + +export function assertFunction(text: string, parser: Parser, f: () => nodes.Node): void { + assertNode(text, parser, f); +} + +export function assertNoNode(text: string, parser: Parser, f: () => nodes.Node): void { + let node = parser.internalParse(text, f); + assert.ok(node === null); +} + +export function assertError(text: string, parser: Parser, f: () => nodes.Node, error: nodes.IRule): void { + let node = parser.internalParse(text, f); + assert.ok(node !== null, 'no node returned'); + let markers = nodes.ParseErrorCollector.entries(node); + if (markers.length === 0) { + assert.ok(false, 'no errors but error expected: ' + error.message); + } else { + markers = markers.sort((a, b) => { return a.getOffset() - b.getOffset(); }); + assert.equal(markers[0].getRule().id, error.id); + } + +} + +suite('CSS - Parser', () => { + + test('Test stylesheet', function () { + let parser = new Parser(); + assertNode('@charset "demo" ;', parser, parser._parseStylesheet.bind(parser)); + assertNode('body { margin: 0px; padding: 3em, 6em; }', parser, parser._parseStylesheet.bind(parser)); + assertNode('--> @import "string"; ', parser, parser._parseStylesheet.bind(parser)); + assertNode('@media asdsa { } ', parser, parser._parseStylesheet.bind(parser)); + assertNode('@media screen, projection { }', parser, parser._parseStylesheet.bind(parser)); + assertNode('@media screen and (max-width: 400px) { @-ms-viewport { width: 320px; }}', parser, parser._parseStylesheet.bind(parser)); + assertNode('@-ms-viewport { width: 320px; height: 768px; }', parser, parser._parseStylesheet.bind(parser)); + assertNode('#boo, far {} \n.far boo {}', parser, parser._parseStylesheet.bind(parser)); + assertNode('@-moz-keyframes darkWordHighlight { from { background-color: inherit; } to { background-color: rgba(83, 83, 83, 0.7); } }', parser, parser._parseStylesheet.bind(parser)); + assertNode('@import "foo";', parser, parser._parseStylesheet.bind(parser)); + assertNode('@import url(/css/screen.css) screen, projection;', parser, parser._parseStylesheet.bind(parser)); + assertNode('@page { margin: 2.5cm; }', parser, parser._parseStylesheet.bind(parser)); + assertNode('@font-face { font-family: "Example Font"; }', parser, parser._parseStylesheet.bind(parser)); + assertNode('@namespace "http://www.w3.org/1999/xhtml";', parser, parser._parseStylesheet.bind(parser)); + assertNode('@namespace pref url(http://test);', parser, parser._parseStylesheet.bind(parser)); + assertNode('@-moz-document url(http://test), url-prefix(http://www.w3.org/Style/) { body { color: purple; background: yellow; } }', parser, parser._parseStylesheet.bind(parser)); + assertNode('E E[foo] E[foo="bar"] E[foo~="bar"] E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] E[foo|="en"] {}', parser, parser._parseStylesheet.bind(parser)); + assertNode('input[type=\"submit\"] {}', parser, parser._parseStylesheet.bind(parser)); + assertNode('E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:first-child E:last-child {}', parser, parser._parseStylesheet.bind(parser)); + assertNode('E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:link E:visited E:active E:hover E:focus E:target E:lang(fr) E:enabled E:disabled E:checked {}', parser, parser._parseStylesheet.bind(parser)); + assertNode('E::first-line E::first-letter E::before E::after {}', parser, parser._parseStylesheet.bind(parser)); + assertNode('E.warning E#myid E:not(s) {}', parser, parser._parseStylesheet.bind(parser)); + assertError('@namespace;', parser, parser._parseStylesheet.bind(parser), ParseError.URIExpected); + assertError('@namespace url(http://test)', parser, parser._parseStylesheet.bind(parser), ParseError.SemiColonExpected); + assertError('@mskeyframes darkWordHighlight { from { background-color: inherit; } to { background-color: rgba(83, 83, 83, 0.7); } }', parser, parser._parseStylesheet.bind(parser), ParseError.UnknownAtRule); + assertError('@charset;', parser, parser._parseStylesheet.bind(parser), ParseError.IdentifierExpected); + assertError('@charset \'utf8\'', parser, parser._parseStylesheet.bind(parser), ParseError.SemiColonExpected); + }); + + test('Stylesheet /Panic/', function () { + let parser = new Parser(); + assertError('#boo, far } \n.far boo {}', parser, parser._parseStylesheet.bind(parser), ParseError.LeftCurlyExpected); + assertError('#boo, far { far: 43px; \n.far boo {}', parser, parser._parseStylesheet.bind(parser), ParseError.RightCurlyExpected); + }); + + test('@font-face', function () { + let parser = new Parser(); + assertNode('@font-face {}', parser, parser._parseFontFace.bind(parser)); + assertNode('@font-face { src: url(http://test) }', parser, parser._parseFontFace.bind(parser)); + assertNode('@font-face { font-style: normal; font-stretch: normal; }', parser, parser._parseFontFace.bind(parser)); + assertError('@font-face { font-style: normal font-stretch: normal; }', parser, parser._parseFontFace.bind(parser), ParseError.SemiColonExpected); + }); + + test('@keyframe selector', function () { + let parser = new Parser(); + assertNode('from {}', parser, parser._parseKeyframeSelector.bind(parser)); + assertNode('to {}', parser, parser._parseKeyframeSelector.bind(parser)); + assertNode('0% {}', parser, parser._parseKeyframeSelector.bind(parser)); + assertNode('10% {}', parser, parser._parseKeyframeSelector.bind(parser)); + assertNode('100000% {}', parser, parser._parseKeyframeSelector.bind(parser)); + assertNode('from { width: 100% }', parser, parser._parseKeyframeSelector.bind(parser)); + assertNode('from { width: 100%; to: 10px; }', parser, parser._parseKeyframeSelector.bind(parser)); + }); + + test('@keyframe', function () { + let parser = new Parser(); + assertNode('@keyframes name {}', parser, parser._parseKeyframe.bind(parser)); + assertNode('@-webkit-keyframes name {}', parser, parser._parseKeyframe.bind(parser)); + assertNode('@-o-keyframes name {}', parser, parser._parseKeyframe.bind(parser)); + assertNode('@-moz-keyframes name {}', parser, parser._parseKeyframe.bind(parser)); + assertNode('@keyframes name { from {} to {}}', parser, parser._parseKeyframe.bind(parser)); + assertNode('@keyframes name { from {} 80% {} 100% {}}', parser, parser._parseKeyframe.bind(parser)); + assertNode('@keyframes name { from { top: 0px; } 80% { top: 100px; } 100% { top: 50px; }}', parser, parser._parseKeyframe.bind(parser)); + assertNode('@keyframes name { from { top: 0px; } 70%, 80% { top: 100px; } 100% { top: 50px; }}', parser, parser._parseKeyframe.bind(parser)); + assertNode('@keyframes name { from { top: 0px; left: 1px; right: 2px }}', parser, parser._parseKeyframe.bind(parser)); + assertError('@keyframes name { from { top: 0px; left: 1px, right: 2px }}', parser, parser._parseKeyframe.bind(parser), ParseError.SemiColonExpected); + assertError('@keyframes )', parser, parser._parseKeyframe.bind(parser), ParseError.IdentifierExpected); + assertError('@keyframes name { { top: 0px; } }', parser, parser._parseKeyframe.bind(parser), ParseError.RightCurlyExpected); + assertError('@keyframes name { from, #123', parser, parser._parseKeyframe.bind(parser), ParseError.PercentageExpected); + }); + + test('Test import', function () { + let parser = new Parser(); + assertNode('@import "asdasdsa"', parser, parser._parseImport.bind(parser)); + assertNode('@ImPort "asdsadsa"', parser, parser._parseImport.bind(parser)); + assertNode('@import "asdasd" dsfsdf', parser, parser._parseImport.bind(parser)); + assertError('@import', parser, parser._parseImport.bind(parser), ParseError.URIOrStringExpected); + }); + + test('Test media', function () { + let parser = new Parser(); + assertNode('@media asdsa { }', parser, parser._parseMedia.bind(parser)); + assertNode('@meDia sadd{} ', parser, parser._parseMedia.bind(parser)); + assertNode('@media somename, othername2 { }', parser, parser._parseMedia.bind(parser)); + assertNode('@media only screen and (max-width:850px) { }', parser, parser._parseMedia.bind(parser)); + assertNode('@media only screen and (max-width:850px) { }', parser, parser._parseMedia.bind(parser)); + assertNode('@media all and (min-width:500px) { }', parser, parser._parseMedia.bind(parser)); + assertNode('@media screen and (color), projection and (color) { }', parser, parser._parseMedia.bind(parser)); + assertNode('@media not screen and (device-aspect-ratio: 16/9) { }', parser, parser._parseMedia.bind(parser)); + assertNode('@media print and (min-resolution: 300dpi) { }', parser, parser._parseMedia.bind(parser)); + assertNode('@media print and (min-resolution: 118dpcm) { }', parser, parser._parseMedia.bind(parser)); + assertNode('@media print { @page { margin: 10% } blockquote, pre { page-break-inside: avoid } }', parser, parser._parseMedia.bind(parser)); + assertNode('@media print { body:before { } }', parser, parser._parseMedia.bind(parser)); + assertError('@media somename othername2 { }', parser, parser._parseMedia.bind(parser), ParseError.LeftCurlyExpected); + assertError('@media not, screen { }', parser, parser._parseMedia.bind(parser), ParseError.IdentifierExpected); + assertError('@media not screen and foo { }', parser, parser._parseMedia.bind(parser), ParseError.LeftParenthesisExpected); + assertError('@media not screen and () { }', parser, parser._parseMedia.bind(parser), ParseError.IdentifierExpected); + assertError('@media not screen and (color:) { }', parser, parser._parseMedia.bind(parser), ParseError.TermExpected); + assertError('@media not screen and (color:#234567 { }', parser, parser._parseMedia.bind(parser), ParseError.RightParenthesisExpected); + }); + + test('Test media_list', function () { + let parser = new Parser(); + assertNode('somename', parser, parser._parseMediaList.bind(parser)); + assertNode('somename, othername', parser, parser._parseMediaList.bind(parser)); + }); + + test('medium', function () { + let parser = new Parser(); + assertNode('somename', parser, parser._parseMedium.bind(parser)); + assertNode('-asdas', parser, parser._parseMedium.bind(parser)); + assertNode('-asda34s', parser, parser._parseMedium.bind(parser)); + }); + + test('page', function () { + let parser = new Parser(); + assertNode('@page : name{ }', parser, parser._parsePage.bind(parser)); + assertNode('@page :left, :right { }', parser, parser._parsePage.bind(parser)); + assertNode('@page : name{ some : "asdas" }', parser, parser._parsePage.bind(parser)); + assertNode('@page : name{ some : "asdas" !important }', parser, parser._parsePage.bind(parser)); + assertNode('@page : name{ some : "asdas" !important; some : "asdas" !important }', parser, parser._parsePage.bind(parser)); + assertNode('@page rotated { size : landscape }', parser, parser._parsePage.bind(parser)); + assertNode('@page :left { margin-left: 4cm; margin-right: 3cm; }', parser, parser._parsePage.bind(parser)); + assertNode('@page { @top-right-corner { content: url(foo.png); border: solid green; } }', parser, parser._parsePage.bind(parser)); + assertNode('@page { @top-left-corner { content: " "; border: solid green; } @bottom-right-corner { content: counter(page); border: solid green; } }', parser, parser._parsePage.bind(parser)); + assertError('@page { @top-left-corner foo { content: " "; border: solid green; } }', parser, parser._parsePage.bind(parser), ParseError.LeftCurlyExpected); + assertError('@page { @XY foo { content: " "; border: solid green; } }', parser, parser._parsePage.bind(parser), ParseError.UnknownAtRule); + assertError('@page :left { margin-left: 4cm margin-right: 3cm; }', parser, parser._parsePage.bind(parser), ParseError.SemiColonExpected); + assertError('@page : { }', parser, parser._parsePage.bind(parser), ParseError.IdentifierExpected); + assertError('@page :left, { }', parser, parser._parsePage.bind(parser), ParseError.IdentifierExpected); + }); + + test('pseudo page', function () { + let parser = new Parser(); + assertNode(': some ', parser, parser._parsePageSelector.bind(parser)); + }); + + test('operator', function () { + let parser = new Parser(); + assertNode('/', parser, parser._parseOperator.bind(parser)); + assertNode('*', parser, parser._parseOperator.bind(parser)); + assertNode('+', parser, parser._parseOperator.bind(parser)); + assertNode('-', parser, parser._parseOperator.bind(parser)); + }); + + test('combinator', function () { + let parser = new Parser(); + assertNode('+', parser, parser._parseCombinator.bind(parser)); + assertNode('+ ', parser, parser._parseCombinator.bind(parser)); + assertNode('> ', parser, parser._parseCombinator.bind(parser)); + assertNode('>', parser, parser._parseCombinator.bind(parser)); + }); + + test('unary_operator', function () { + let parser = new Parser(); + assertNode('-', parser, parser._parseUnaryOperator.bind(parser)); + assertNode('+', parser, parser._parseUnaryOperator.bind(parser)); + }); + + test('Property', function () { + let parser = new Parser(); + assertNode('asdsa', parser, parser._parseProperty.bind(parser)); + assertNode('asdsa334', parser, parser._parseProperty.bind(parser)); + + assertNode('--color', parser, parser._parseProperty.bind(parser)); + assertNode('--primary-font', parser, parser._parseProperty.bind(parser)); + assertNode('-color', parser, parser._parseProperty.bind(parser)); + assertNode('somevar', parser, parser._parseProperty.bind(parser)); + assertNode('some--let', parser, parser._parseProperty.bind(parser)); + assertNode('somevar--', parser, parser._parseProperty.bind(parser)); + }); + + test('Ruleset', function () { + let parser = new Parser(); + assertNode('name{ }', parser, parser._parseRuleset.bind(parser)); + assertNode(' name\n{ some : "asdas" }', parser, parser._parseRuleset.bind(parser)); + assertNode(' name{ some : "asdas" !important }', parser, parser._parseRuleset.bind(parser)); + assertNode('name{ \n some : "asdas" !important; some : "asdas" }', parser, parser._parseRuleset.bind(parser)); + assertNode('* {}', parser, parser._parseRuleset.bind(parser)); + assertNode('.far{}', parser, parser._parseRuleset.bind(parser)); + assertNode('boo {}', parser, parser._parseRuleset.bind(parser)); + assertNode('.far #boo {}', parser, parser._parseRuleset.bind(parser)); + assertNode('boo { prop: value }', parser, parser._parseRuleset.bind(parser)); + assertNode('boo { prop: value; }', parser, parser._parseRuleset.bind(parser)); + assertNode('boo { prop: value; prop: value }', parser, parser._parseRuleset.bind(parser)); + assertNode('boo { prop: value; prop: value; }', parser, parser._parseRuleset.bind(parser)); + }); + + test('Ruleset /Panic/', function () { + let parser = new Parser(); + // assertNode('boo { : value }', parser, parser._parseRuleset.bind(parser)); + assertError('boo { prop: ; }', parser, parser._parseRuleset.bind(parser), ParseError.PropertyValueExpected); + assertError('boo { prop }', parser, parser._parseRuleset.bind(parser), ParseError.ColonExpected); + assertError('boo { prop: ; far: 12em; }', parser, parser._parseRuleset.bind(parser), ParseError.PropertyValueExpected); + // assertNode('boo { prop: ; 1ar: 12em; }', parser, parser._parseRuleset.bind(parser)); + }); + + test('selector', function () { + let parser = new Parser(); + assertNode('asdsa', parser, parser._parseSelector.bind(parser)); + assertNode('asdsa + asdas', parser, parser._parseSelector.bind(parser)); + assertNode('asdsa + asdas + name', parser, parser._parseSelector.bind(parser)); + assertNode('asdsa + asdas + name', parser, parser._parseSelector.bind(parser)); + assertNode('name #id#anotherid', parser, parser._parseSelector.bind(parser)); + assertNode('name.far .boo', parser, parser._parseSelector.bind(parser)); + assertNode('name .name .zweitername', parser, parser._parseSelector.bind(parser)); + assertNode('*', parser, parser._parseSelector.bind(parser)); + assertNode('#id', parser, parser._parseSelector.bind(parser)); + assertNode('far.boo', parser, parser._parseSelector.bind(parser)); + }); + + test('simple selector', function () { + let parser = new Parser(); + assertNode('name', parser, parser._parseSimpleSelector.bind(parser)); + assertNode('#id#anotherid', parser, parser._parseSimpleSelector.bind(parser)); + assertNode('name.far', parser, parser._parseSimpleSelector.bind(parser)); + assertNode('name.erstername.zweitername', parser, parser._parseSimpleSelector.bind(parser)); + }); + + test('element name', function () { + let parser = new Parser(); + assertNode('name', parser, parser._parseElementName.bind(parser)); + assertNode('*', parser, parser._parseElementName.bind(parser)); + }); + + test('attrib', function () { + let parser = new Parser(); + assertNode('[name]', parser, parser._parseAttrib.bind(parser)); + assertNode('[name = name2]', parser, parser._parseAttrib.bind(parser)); + assertNode('[name ~= name3]', parser, parser._parseAttrib.bind(parser)); + assertNode('[name~=name3]', parser, parser._parseAttrib.bind(parser)); + assertNode('[name |= name3]', parser, parser._parseAttrib.bind(parser)); + assertNode('[name |= "this is a striiiing"]', parser, parser._parseAttrib.bind(parser)); + }); + + test('pseudo', function () { + let parser = new Parser(); + assertNode(':some', parser, parser._parsePseudo.bind(parser)); + assertNode(':some(thing)', parser, parser._parsePseudo.bind(parser)); + assertNode(':nth-child(12)', parser, parser._parsePseudo.bind(parser)); + assertNode(':lang(it)', parser, parser._parsePseudo.bind(parser)); + assertNode(':not(.class)', parser, parser._parsePseudo.bind(parser)); + assertNode(':not(:disabled)', parser, parser._parsePseudo.bind(parser)); + assertNode(':not(#foo)', parser, parser._parsePseudo.bind(parser)); + }); + + test('declaration', function () { + let parser = new Parser(); + assertNode('name : "this is a string" !important', parser, parser._parseDeclaration.bind(parser)); + assertNode('name : "this is a string"', parser, parser._parseDeclaration.bind(parser)); + assertNode('property:12', parser, parser._parseDeclaration.bind(parser)); + assertNode('-vendor-property: 12', parser, parser._parseDeclaration.bind(parser)); + assertNode('font-size: 12px', parser, parser._parseDeclaration.bind(parser)); + assertNode('color : #888 /4', parser, parser._parseDeclaration.bind(parser)); + assertNode('filter : progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=45)', parser, parser._parseDeclaration.bind(parser)); + assertNode('filter : progid: DXImageTransform.\nMicrosoft.\nDropShadow(\noffx=2, offy=1, color=#000000)', parser, parser._parseDeclaration.bind(parser)); + assertNode('font-size: 12px', parser, parser._parseDeclaration.bind(parser)); + assertNode('*background: #f00 /* IE 7 and below */', parser, parser._parseDeclaration.bind(parser)); + assertNode('_background: #f60 /* IE 6 and below */', parser, parser._parseDeclaration.bind(parser)); + assertNode('background-image: linear-gradient(to right, silver, white 50px, white calc(100% - 50px), silver)', parser, parser._parseDeclaration.bind(parser)); + + assertNode('--color: #F5F5F5', parser, parser._parseDeclaration.bind(parser)); + assertNode('--color: 0', parser, parser._parseDeclaration.bind(parser)); + assertNode('--color: 255', parser, parser._parseDeclaration.bind(parser)); + assertNode('--color: 25.5', parser, parser._parseDeclaration.bind(parser)); + assertNode('--color: 25px', parser, parser._parseDeclaration.bind(parser)); + assertNode('--color: 25.5px', parser, parser._parseDeclaration.bind(parser)); + assertNode('--primary-font: "wf_SegoeUI","Segoe UI","Segoe","Segoe WP"', parser, parser._parseDeclaration.bind(parser)); + assertError('--color : ', parser, parser._parseDeclaration.bind(parser), ParseError.PropertyValueExpected); + assertError('--color value', parser, parser._parseDeclaration.bind(parser), ParseError.ColonExpected); + }); + + + test('term', function () { + let parser = new Parser(); + assertNode('"asdasd"', parser, parser._parseTerm.bind(parser)); + assertNode('name', parser, parser._parseTerm.bind(parser)); + assertNode('#FFFFFF', parser, parser._parseTerm.bind(parser)); + assertNode('url("this is a url")', parser, parser._parseTerm.bind(parser)); + assertNode('+324', parser, parser._parseTerm.bind(parser)); + assertNode('-45', parser, parser._parseTerm.bind(parser)); + assertNode('+45', parser, parser._parseTerm.bind(parser)); + assertNode('-45%', parser, parser._parseTerm.bind(parser)); + assertNode('-45mm', parser, parser._parseTerm.bind(parser)); + assertNode('-45em', parser, parser._parseTerm.bind(parser)); + assertNode('"asdsa"', parser, parser._parseTerm.bind(parser)); + assertNode('faa', parser, parser._parseTerm.bind(parser)); + assertNode('url("this is a striiiiing")', parser, parser._parseTerm.bind(parser)); + assertNode('#FFFFFF', parser, parser._parseTerm.bind(parser)); + assertNode('name(asd)', parser, parser._parseTerm.bind(parser)); + assertNode('calc(50% + 20px)', parser, parser._parseTerm.bind(parser)); + assertNode('calc(50% + (100%/3 - 2*1em - 2*1px))', parser, parser._parseTerm.bind(parser)); + assertNoNode('%(\'repetitions: %S file: %S\', 1 + 2, "directory/file.less")', parser, parser._parseTerm.bind(parser)); // less syntax + assertNoNode('~"ms:alwaysHasItsOwnSyntax.For.Stuff()"', parser, parser._parseTerm.bind(parser)); // less syntax + }); + + test('function', function () { + let parser = new Parser(); + assertNode('name( "bla" )', parser, parser._parseFunction.bind(parser)); + assertNode('name( name )', parser, parser._parseFunction.bind(parser)); + assertNode('name( -500mm )', parser, parser._parseFunction.bind(parser)); + assertNode('\u060frf()', parser, parser._parseFunction.bind(parser)); + assertNode('über()', parser, parser._parseFunction.bind(parser)); + + assertNoNode('über ()', parser, parser._parseFunction.bind(parser)); + assertNoNode('%()', parser, parser._parseFunction.bind(parser)); + assertNoNode('% ()', parser, parser._parseFunction.bind(parser)); + + assertFunction('let(--color)', parser, parser._parseFunction.bind(parser)); + assertFunction('let(--color, somevalue)', parser, parser._parseFunction.bind(parser)); + assertFunction('let(--variable1, --variable2)', parser, parser._parseFunction.bind(parser)); + assertFunction('let(--variable1, let(--variable2))', parser, parser._parseFunction.bind(parser)); + assertFunction('fun(value1, value2)', parser, parser._parseFunction.bind(parser)); + }); + + test('Test Token prio', function () { + let parser = new Parser(); + assertNode('!important', parser, parser._parsePrio.bind(parser)); + assertNode('!/*demo*/important', parser, parser._parsePrio.bind(parser)); + assertNode('! /*demo*/ important', parser, parser._parsePrio.bind(parser)); + assertNode('! /*dem o*/ important', parser, parser._parsePrio.bind(parser)); + }); + + test('hexcolor', function () { + let parser = new Parser(); + assertNode('#FFF', parser, parser._parseHexColor.bind(parser)); + assertNode('#FFFFFF', parser, parser._parseHexColor.bind(parser)); + }); + + test('Test class', function () { + let parser = new Parser(); + assertNode('.faa', parser, parser._parseClass.bind(parser)); + assertNode('faa', parser, parser._parseElementName.bind(parser)); + assertNode('*', parser, parser._parseElementName.bind(parser)); + assertNode('.faa42', parser, parser._parseClass.bind(parser)); + }); + + + test('Prio', function () { + let parser = new Parser(); + assertNode('!important', parser, parser._parsePrio.bind(parser)); + }); + + test('Expr', function () { + let parser = new Parser(); + assertNode('45,5px', parser, parser._parseExpr.bind(parser)); + assertNode(' 45 , 5px ', parser, parser._parseExpr.bind(parser)); + assertNode('5/6', parser, parser._parseExpr.bind(parser)); + assertNode('36mm, -webkit-calc(100%-10px)', parser, parser._parseExpr.bind(parser)); + }); + +}); + diff --git a/extensions/css/server/src/test/scanner.test.ts b/extensions/css/server/src/test/scanner.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..3ccf839648879d67161b8fd862a1d18236e17ce9 --- /dev/null +++ b/extensions/css/server/src/test/scanner.test.ts @@ -0,0 +1,228 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as assert from 'assert'; +import {Scanner, TokenType} from '../parser/cssScanner'; + +suite('CSS - Scanner', () => { + + function assertSingleToken(scan: Scanner, source: string, len: number, offset: number, text: string, type: TokenType): void { + scan.setSource(source); + let token = scan.scan(); + assert.equal(token.len, len); + assert.equal(token.offset, offset); + assert.equal(token.text, text); + assert.equal(token.type, type); + } + + test('Whitespace', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, ' @', 1, 1, '@', TokenType.Delim); + assertSingleToken(scanner, ' /* comment*/ \n/*comment*/@', 1, 26, '@', TokenType.Delim); + + scanner = new Scanner(); + scanner.ignoreWhitespace = false; + assertSingleToken(scanner, ' @', 1, 0, ' ', TokenType.Whitespace); + assertSingleToken(scanner, '/*comment*/ @', 1, 11, ' ', TokenType.Whitespace); + + scanner = new Scanner(); + scanner.ignoreComment = false; + assertSingleToken(scanner, ' /*comment*/@', 11, 1, '/*comment*/', TokenType.Comment); + assertSingleToken(scanner, '/*comment*/ @', 11, 0, '/*comment*/', TokenType.Comment); + }); + + test('Token Ident', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '\u060frf', 3, 0, '\u060frf', TokenType.Ident); + assertSingleToken(scanner, 'über', 4, 0, 'über', TokenType.Ident); + assertSingleToken(scanner, '-bo', 3, 0, '-bo', TokenType.Ident); + assertSingleToken(scanner, '_bo', 3, 0, '_bo', TokenType.Ident); + assertSingleToken(scanner, 'boo', 3, 0, 'boo', TokenType.Ident); + assertSingleToken(scanner, 'Boo', 3, 0, 'Boo', TokenType.Ident); + assertSingleToken(scanner, 'red--', 5, 0, 'red--', TokenType.Ident); + assertSingleToken(scanner, 'red-->', 5, 0, 'red--', TokenType.Ident); + assertSingleToken(scanner, '--red', 5, 0, '--red', TokenType.Ident); + assertSingleToken(scanner, 'a\\.b', 4, 0, 'a\.b', TokenType.Ident); + assertSingleToken(scanner, '\\E9motion', 9, 0, 'émotion', TokenType.Ident); + assertSingleToken(scanner, '\\E9 dition', 10, 0, 'édition', TokenType.Ident); + assertSingleToken(scanner, '\\0000E9dition', 13, 0, 'édition', TokenType.Ident); + assertSingleToken(scanner, 'S\\0000e9f', 9, 0, 'Séf', TokenType.Ident); + }); + + test('Token Url', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, 'url(\'http://msft.com\')', 22, 0, 'url(\'http://msft.com\')', TokenType.URI); + assertSingleToken(scanner, 'url("http://msft.com")', 22, 0, 'url("http://msft.com")', TokenType.URI); + assertSingleToken(scanner, 'url( "http://msft.com")', 23, 0, 'url( "http://msft.com")', TokenType.URI); + assertSingleToken(scanner, 'url(\t"http://msft.com")', 23, 0, 'url(\t"http://msft.com")', TokenType.URI); + assertSingleToken(scanner, 'url(\n"http://msft.com")', 23, 0, 'url(\n"http://msft.com")', TokenType.URI); + assertSingleToken(scanner, 'url("http://msft.com"\n)', 23, 0, 'url("http://msft.com"\n)', TokenType.URI); + assertSingleToken(scanner, 'url("")', 7, 0, 'url("")', TokenType.URI); + assertSingleToken(scanner, 'uRL("")', 7, 0, 'uRL("")', TokenType.URI); + assertSingleToken(scanner, 'URL("")', 7, 0, 'URL("")', TokenType.URI); + assertSingleToken(scanner, 'url(http://msft.com)', 20, 0, 'url(http://msft.com)', TokenType.URI); + assertSingleToken(scanner, 'url()', 5, 0, 'url()', TokenType.URI); + assertSingleToken(scanner, 'url(\'http://msft.com\n)', 22, 0, 'url(\'http://msft.com\n)', TokenType.BadUri); + assertSingleToken(scanner, 'url("http://msft.com"', 21, 0, 'url("http://msft.com"', TokenType.BadUri); + assertSingleToken(scanner, 'url(http://msft.com\')', 21, 0, 'url(http://msft.com\')', TokenType.URI); + }); + + test('Token AtKeyword', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '@import', 7, 0, '@import', TokenType.AtKeyword); + assertSingleToken(scanner, '@importttt', 10, 0, '@importttt', TokenType.AtKeyword); + assertSingleToken(scanner, '@imp', 4, 0, '@imp', TokenType.AtKeyword); + assertSingleToken(scanner, '@5', 2, 0, '@5', TokenType.AtKeyword); + assertSingleToken(scanner, '@media', 6, 0, '@media', TokenType.AtKeyword); + assertSingleToken(scanner, '@page', 5, 0, '@page', TokenType.AtKeyword); + assertSingleToken(scanner, '@charset', 8, 0, '@charset', TokenType.Charset); + assertSingleToken(scanner, '@-mport', 7, 0, '@-mport', TokenType.AtKeyword); + assertSingleToken(scanner, '@\u00f0mport', 7, 0, '@\u00f0mport', TokenType.AtKeyword); + assertSingleToken(scanner, '@', 1, 0, '@', TokenType.Delim); + }); + + test('Token Number', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '1234', 4, 0, '1234', TokenType.Num); + assertSingleToken(scanner, '1.34', 4, 0, '1.34', TokenType.Num); + assertSingleToken(scanner, '.234', 4, 0, '.234', TokenType.Num); + assertSingleToken(scanner, '.234.', 4, 0, '.234', TokenType.Num); + assertSingleToken(scanner, '..234', 1, 0, '.', TokenType.Delim); + }); + + test('Token Delim', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '@', 1, 0, '@', TokenType.Delim); + assertSingleToken(scanner, '+', 1, 0, '+', TokenType.Delim); + assertSingleToken(scanner, '>', 1, 0, '>', TokenType.Delim); + assertSingleToken(scanner, '#', 1, 0, '#', TokenType.Delim); + assertSingleToken(scanner, '\'', 1, 0, '\'', TokenType.BadString); + assertSingleToken(scanner, '"', 1, 0, '"', TokenType.BadString); + }); + + test('Token Hash', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '#import', 7, 0, '#import', TokenType.Hash); + assertSingleToken(scanner, '#-mport', 7, 0, '#-mport', TokenType.Hash); + assertSingleToken(scanner, '#123', 4, 0, '#123', TokenType.Hash); + }); + + test('Token Dimension/Percentage', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '3em', 3, 0, '3em', TokenType.EMS); + assertSingleToken(scanner, '4.423ex', 7, 0, '4.423ex', TokenType.EXS); + assertSingleToken(scanner, '3423px', 6, 0, '3423px', TokenType.Length); + assertSingleToken(scanner, '4.423cm', 7, 0, '4.423cm', TokenType.Length); + assertSingleToken(scanner, '4.423mm', 7, 0, '4.423mm', TokenType.Length); + assertSingleToken(scanner, '4.423in', 7, 0, '4.423in', TokenType.Length); + assertSingleToken(scanner, '4.423pt', 7, 0, '4.423pt', TokenType.Length); + assertSingleToken(scanner, '4.423pc', 7, 0, '4.423pc', TokenType.Length); + assertSingleToken(scanner, '4.423deg', 8, 0, '4.423deg', TokenType.Angle); + assertSingleToken(scanner, '4.423rad', 8, 0, '4.423rad', TokenType.Angle); + assertSingleToken(scanner, '4.423grad', 9, 0, '4.423grad', TokenType.Angle); + assertSingleToken(scanner, '4.423ms', 7, 0, '4.423ms', TokenType.Time); + assertSingleToken(scanner, '4.423s', 6, 0, '4.423s', TokenType.Time); + assertSingleToken(scanner, '4.423hz', 7, 0, '4.423hz', TokenType.Freq); + assertSingleToken(scanner, '.423khz', 7, 0, '.423khz', TokenType.Freq); + assertSingleToken(scanner, '3.423%', 6, 0, '3.423%', TokenType.Percentage); + assertSingleToken(scanner, '.423%', 5, 0, '.423%', TokenType.Percentage); + assertSingleToken(scanner, '.423ft', 6, 0, '.423ft', TokenType.Dimension); + assertSingleToken(scanner, '200dpi', 6, 0, '200dpi', TokenType.Resolution); + assertSingleToken(scanner, '123dpcm', 7, 0, '123dpcm', TokenType.Resolution); + }); + + test('Token String', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '\'farboo\'', 8, 0, '\'farboo\'', TokenType.String); + assertSingleToken(scanner, '"farboo"', 8, 0, '"farboo"', TokenType.String); + assertSingleToken(scanner, '"farbo\u00f0"', 8, 0, '"farbo\u00f0"', TokenType.String); + assertSingleToken(scanner, '"far\\\"oo"', 9, 0, '"far\"oo"', TokenType.String); + assertSingleToken(scanner, '"fa\\\noo"', 8, 0, '"fa\noo"', TokenType.String); + assertSingleToken(scanner, '"fa\\\roo"', 8, 0, '"fa\roo"', TokenType.String); + assertSingleToken(scanner, '"fa\\\foo"', 8, 0, '"fa\foo"', TokenType.String); + assertSingleToken(scanner, '\'farboo"', 8, 0, '\'farboo"', TokenType.BadString); + assertSingleToken(scanner, '\'farboo', 7, 0, '\'farboo', TokenType.BadString); + assertSingleToken(scanner, '\'', 1, 0, '\'', TokenType.BadString); + assertSingleToken(scanner, '"', 1, 0, '"', TokenType.BadString); + }); + + test('Token CDO', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '', 3, 0, '-->', TokenType.CDC); + assertSingleToken(scanner, '--y>', 3, 0, '--y', TokenType.Ident); + assertSingleToken(scanner, '--<', 1, 0, '-', TokenType.Delim); + }); + + test('Token singletokens ;:{}[]()', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, ': ', 1, 0, ':', TokenType.Colon); + assertSingleToken(scanner, '; ', 1, 0, ';', TokenType.SemiColon); + assertSingleToken(scanner, '{ ', 1, 0, '{', TokenType.CurlyL); + assertSingleToken(scanner, '} ', 1, 0, '}', TokenType.CurlyR); + assertSingleToken(scanner, '[ ', 1, 0, '[', TokenType.BracketL); + assertSingleToken(scanner, '] ', 1, 0, ']', TokenType.BracketR); + assertSingleToken(scanner, '( ', 1, 0, '(', TokenType.ParenthesisL); + assertSingleToken(scanner, ') ', 1, 0, ')', TokenType.ParenthesisR); + }); + + test('Token dashmatch & includes', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '~=', 2, 0, '~=', TokenType.Includes); + assertSingleToken(scanner, '~', 1, 0, '~', TokenType.Delim); + assertSingleToken(scanner, '|=', 2, 0, '|=', TokenType.Dashmatch); + assertSingleToken(scanner, '|', 1, 0, '|', TokenType.Delim); + assertSingleToken(scanner, '^=', 2, 0, '^=', TokenType.PrefixOperator); + assertSingleToken(scanner, '$=', 2, 0, '$=', TokenType.SuffixOperator); + assertSingleToken(scanner, '*=', 2, 0, '*=', TokenType.SubstringOperator); + }); + + test('Comments', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, '/* */', 0, 10, '', TokenType.EOF); + assertSingleToken(scanner, '/* abcd*/', 0, 14, '', TokenType.EOF); + assertSingleToken(scanner, '/*abcd */', 0, 10, '', TokenType.EOF); + assertSingleToken(scanner, '/* ab- .-cd */', 0, 15, '', TokenType.EOF); + }); + + test('Whitespaces', function () { + let scanner = new Scanner(); + assertSingleToken(scanner, ' ', 0, 1, '', TokenType.EOF); + assertSingleToken(scanner, ' ', 0, 6, '', TokenType.EOF); + }); +}); + +suite('CSS - Token Sequences', () => { + + function assertTokenSequence(scan: Scanner, source: string, ...tokens: TokenType[]): void { + scan.setSource(source); + let token = scan.scan(); + let i = 0; + while (tokens.length > i) { + assert.equal(token.type, tokens[i]); + token = scan.scan(); + i++; + } + } + + // tests with skipping comments + test('Token Sequence', function () { + let scanner = new Scanner(); + assertTokenSequence(scanner, '5 5 5 5', TokenType.Num, TokenType.Num, TokenType.Num, TokenType.Num); + assertTokenSequence(scanner, '/* 5 4 */-->', TokenType.CDC); + assertTokenSequence(scanner, '/* 5 4 */ -->', TokenType.CDC); + assertTokenSequence(scanner, '/* "adaasd" */ -->', TokenType.CDC); + assertTokenSequence(scanner, '/* ', TokenType.CDC); + assertTokenSequence(scanner, 'red-->', TokenType.Ident, TokenType.Delim); + assertTokenSequence(scanner, '@ import', TokenType.Delim, TokenType.Ident); + }); + +}); diff --git a/extensions/css/server/src/test/selectorPrinting.test.ts b/extensions/css/server/src/test/selectorPrinting.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..5709e5b10593de6c31aa744f6f08ff6a8871c879 --- /dev/null +++ b/extensions/css/server/src/test/selectorPrinting.test.ts @@ -0,0 +1,106 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import * as assert from 'assert'; +import {Parser} from '../parser/cssParser'; +import * as nodes from '../parser/cssNodes'; +import * as selectorPrinter from '../services/selectorPrinting'; +import {TextDocument} from 'vscode-languageserver'; + +function elementToString(element: selectorPrinter.Element): string { + let label = element.name || ''; + if (element.attributes) { + label = label + '['; + let needsSeparator = false; + for (let key in element.attributes) { + if (needsSeparator) { + label = label + '|'; + } + needsSeparator = true; + label = label + key + '=' + element.attributes[key]; + } + label = label + ']'; + } + + + if (element.children) { + label = label + '{'; + for (let index = 0; index < element.children.length; index++) { + if (index > 0) { + label = label + '|'; + } + label = label + elementToString(element.children[index]); + } + label = label + '}'; + } + return label; +} + +export function parseSelector(p: Parser, input: string, selectorName: string, expected: string): void { + let document = TextDocument.create('test://test/test.css', 'css', 0, input); + let styleSheet = p.parseStylesheet(document); + + let node = nodes.getNodeAtOffset(styleSheet, input.indexOf(selectorName)); + let selector = node.findParent(nodes.NodeType.Selector); + + let element = selectorPrinter.selectorToElement(selector); + assert.equal(elementToString(element), expected); +} + +export interface ExpectedElement { + name?: string; + attributes?: { [name: string]: string; }; +} + +export function assertElement(p: Parser, input: string, element: ExpectedElement): void { + let node = p.internalParse(input, p._parseSimpleSelector); + + let actual = selectorPrinter.toElement(node); + + assert.equal(actual.name, element.name); + assert.deepEqual(actual.attributes, element.attributes); +} + + +suite('CSS - Selector Printing', () => { + + test('class/hash/elementname/attr', function () { + let p = new Parser(); + assertElement(p, 'element', { name: 'element' }); + assertElement(p, '.div', { attributes: { class: 'div' } }); + assertElement(p, '#first', { attributes: { id: 'first' } }); + assertElement(p, 'element.on', { name: 'element', attributes: { class: 'on' } }); + assertElement(p, 'element.on#first', { name: 'element', attributes: { class: 'on', id: 'first' } }); + assertElement(p, '.on#first', { attributes: { class: 'on', id: 'first' } }); + + assertElement(p, '[lang=\'de\']', { attributes: { lang: 'de' } }); + assertElement(p, '[enabled]', { attributes: { enabled: undefined } }); + + }); + + test('simple selector', function () { + let p = new Parser(); + parseSelector(p, 'element { }', 'element', '{element}'); + parseSelector(p, 'element.div { }', 'element', '{element[class=div]}'); + parseSelector(p, 'element.on#first { }', 'element', '{element[class=on|id=first]}'); + parseSelector(p, 'element:hover { }', 'element', '{element[:hover=]}'); + parseSelector(p, 'element[lang=\'de\'] { }', 'element', '{element[lang=de]}'); + parseSelector(p, 'element[enabled] { }', 'element', '{element[enabled=undefined]}'); + parseSelector(p, 'element[foo~="warning"] { }', 'element', '{element[foo= … warning … ]}'); + parseSelector(p, 'element[lang|="en"] { }', 'element', '{element[lang=en-…]}'); + parseSelector(p, '* { }', '*', '{element}'); + }); + + test('selector', function () { + let p = new Parser(); + parseSelector(p, 'e1 e2 { }', 'e1', '{e1{…{e2}}}'); + parseSelector(p, 'e1 .div { }', 'e1', '{e1{…{[class=div]}}}'); + parseSelector(p, 'e1 > e2 { }', 'e2', '{e1{e2}}'); + parseSelector(p, 'e1, e2 { }', 'e1', '{e1}'); + parseSelector(p, 'e1 + e2 { }', 'e2', '{e1|e2}'); + parseSelector(p, 'e1 ~ e2 { }', 'e2', '{e1|e2|⋮|e2}'); + }); +}); \ No newline at end of file diff --git a/extensions/css/server/src/test/textEditSupport.ts b/extensions/css/server/src/test/textEditSupport.ts new file mode 100644 index 0000000000000000000000000000000000000000..a99940131e21613ee2e527a2f8b6f058f7885492 --- /dev/null +++ b/extensions/css/server/src/test/textEditSupport.ts @@ -0,0 +1,23 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +import {TextDocument, TextEdit} from 'vscode-languageserver'; +import * as assert from 'assert'; + +export function applyEdits(document: TextDocument, edits: TextEdit[]): string { + let text = document.getText(); + let sortedEdits = edits.sort((a, b) => document.offsetAt(b.range.start) - document.offsetAt(a.range.start)); + let lastOffset = text.length; + sortedEdits.forEach(e => { + let startOffset = document.offsetAt(e.range.start); + let endOffset = document.offsetAt(e.range.end); + assert.ok(startOffset <= endOffset); + assert.ok(endOffset <= lastOffset); + text = text.substring(0, startOffset) + e.newText + text.substring(endOffset, text.length); + lastOffset = startOffset; + }); + return text; +} \ No newline at end of file diff --git a/extensions/css/server/src/typings/promise.d.ts b/extensions/css/server/src/typings/promise.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..31b97cb9580a394a199dd37c6f71f70dc1fc28d2 --- /dev/null +++ b/extensions/css/server/src/typings/promise.d.ts @@ -0,0 +1,112 @@ +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. All rights reserved. +Licensed under the Apache License, Version 2.0 (the "License"); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at http://www.apache.org/licenses/LICENSE-2.0 + +THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED +WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, +MERCHANTABLITY OR NON-INFRINGEMENT. + +See the Apache Version 2.0 License for specific language governing permissions +and limitations under the License. +***************************************************************************** */ + +/** + * The Thenable (E.g. PromiseLike) and Promise declarions are taken from TypeScript's + * lib.core.es6.d.ts file. See above Copyright notice. + */ + +/** + * Thenable is a common denominator between ES6 promises, Q, jquery.Deferred, WinJS.Promise, + * and others. This API makes no assumption about what promise libary is being used which + * enables reusing existing code without migrating to a specific promise implementation. Still, + * we recommand the use of native promises which are available in VS Code. + */ +interface Thenable { + /** + * Attaches callbacks for the resolution and/or rejection of the Promise. + * @param onfulfilled The callback to execute when the Promise is resolved. + * @param onrejected The callback to execute when the Promise is rejected. + * @returns A Promise for the completion of which ever callback is executed. + */ + then(onfulfilled?: (value: R) => TResult | Thenable, onrejected?: (reason: any) => TResult | Thenable): Thenable; + then(onfulfilled?: (value: R) => TResult | Thenable, onrejected?: (reason: any) => void): Thenable; +} + +/** + * Represents the completion of an asynchronous operation + */ +interface Promise extends Thenable { + /** + * Attaches callbacks for the resolution and/or rejection of the Promise. + * @param onfulfilled The callback to execute when the Promise is resolved. + * @param onrejected The callback to execute when the Promise is rejected. + * @returns A Promise for the completion of which ever callback is executed. + */ + then(onfulfilled?: (value: T) => TResult | Thenable, onrejected?: (reason: any) => TResult | Thenable): Promise; + then(onfulfilled?: (value: T) => TResult | Thenable, onrejected?: (reason: any) => void): Promise; + + /** + * Attaches a callback for only the rejection of the Promise. + * @param onrejected The callback to execute when the Promise is rejected. + * @returns A Promise for the completion of the callback. + */ + catch(onrejected?: (reason: any) => T | Thenable): Promise; +} + +interface PromiseConstructor { + /** + * Creates a new Promise. + * @param executor A callback used to initialize the promise. This callback is passed two arguments: + * a resolve callback used resolve the promise with a value or the result of another promise, + * and a reject callback used to reject the promise with a provided reason or error. + */ + new (executor: (resolve: (value?: T | Thenable) => void, reject: (reason?: any) => void) => void): Promise; + + /** + * Creates a Promise that is resolved with an array of results when all of the provided Promises + * resolve, or rejected when any Promise is rejected. + * @param values An array of Promises. + * @returns A new Promise. + */ + all(values: Array>): Promise; + + /** + * Creates a Promise that is resolved or rejected when any of the provided Promises are resolved + * or rejected. + * @param values An array of Promises. + * @returns A new Promise. + */ + race(values: Array>): Promise; + + /** + * Creates a new rejected promise for the provided reason. + * @param reason The reason the promise was rejected. + * @returns A new rejected Promise. + */ + reject(reason: any): Promise; + + /** + * Creates a new rejected promise for the provided reason. + * @param reason The reason the promise was rejected. + * @returns A new rejected Promise. + */ + reject(reason: any): Promise; + + /** + * Creates a new resolved promise for the provided value. + * @param value A promise. + * @returns A promise whose internal state matches the provided promise. + */ + resolve(value: T | Thenable): Promise; + + /** + * Creates a new resolved promise . + * @returns A resolved promise. + */ + resolve(): Promise; +} + +declare var Promise: PromiseConstructor; diff --git a/extensions/css/server/src/typings/ref.d.ts b/extensions/css/server/src/typings/ref.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..c55bcba02fcb5e5d282b9186cdd05ba42eca94d9 --- /dev/null +++ b/extensions/css/server/src/typings/ref.d.ts @@ -0,0 +1,8 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +/// +/// +/// +/// \ No newline at end of file diff --git a/extensions/css/server/src/utils/arrays.ts b/extensions/css/server/src/utils/arrays.ts new file mode 100644 index 0000000000000000000000000000000000000000..292145e6fea5e4ddc113b2a0ce4eac916d45c068 --- /dev/null +++ b/extensions/css/server/src/utils/arrays.ts @@ -0,0 +1,26 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +/** + * Takes a sorted array and a function p. The array is sorted in such a way that all elements where p(x) is false + * are located before all elements where p(x) is true. + * @returns the least x for which p(x) is true or array.length if no element fullfills the given function. + */ +export function findFirst(array: T[], p: (x: T) => boolean): number { + let low = 0, high = array.length; + if (high === 0) { + return 0; // no children + } + while (low < high) { + let mid = Math.floor((low + high) / 2); + if (p(array[mid])) { + high = mid; + } else { + low = mid + 1; + } + } + return low; +} diff --git a/extensions/css/server/src/utils/strings.ts b/extensions/css/server/src/utils/strings.ts new file mode 100644 index 0000000000000000000000000000000000000000..2d1f0ee6a414b97ea6ebcb19a248fff905953b4a --- /dev/null +++ b/extensions/css/server/src/utils/strings.ts @@ -0,0 +1,71 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +export function startsWith(haystack: string, needle: string): boolean { + if (haystack.length < needle.length) { + return false; + } + + for (let i = 0; i < needle.length; i++) { + if (haystack[i] !== needle[i]) { + return false; + } + } + + return true; +} + +/** + * Determines if haystack ends with needle. + */ +export function endsWith(haystack: string, needle: string): boolean { + let diff = haystack.length - needle.length; + if (diff > 0) { + return haystack.lastIndexOf(needle) === diff; + } else if (diff === 0) { + return haystack === needle; + } else { + return false; + } +} + +/** + * Computes the difference score for two strings. More similar strings have a higher score. + * We use largest common subsequence dynamic programming approach but penalize in the end for length differences. + * Strings that have a large length difference will get a bad default score 0. + * Complexity - both time and space O(first.length * second.length) + * Dynamic programming LCS computation http://en.wikipedia.org/wiki/Longest_common_subsequence_problem + * + * @param first a string + * @param second a string + */ +export function difference(first: string, second: string, maxLenDelta: number = 4): number { + let lengthDifference = Math.abs(first.length - second.length); + // We only compute score if length of the currentWord and length of entry.name are similar. + if (lengthDifference > maxLenDelta) { + return 0; + } + // Initialize LCS (largest common subsequence) matrix. + let LCS: number[][] = []; + let zeroArray: number[] = []; + let i: number, j: number; + for (i = 0; i < second.length + 1; ++i) { + zeroArray.push(0); + } + for (i = 0; i < first.length + 1; ++i) { + LCS.push(zeroArray); + } + for (i = 1; i < first.length + 1; ++i) { + for (j = 1; j < second.length + 1; ++j) { + if (first[i - 1] === second[j - 1]) { + LCS[i][j] = LCS[i - 1][j - 1] + 1; + } else { + LCS[i][j] = Math.max(LCS[i - 1][j], LCS[i][j - 1]); + } + } + } + return LCS[first.length][second.length] - Math.sqrt(lengthDifference); +} diff --git a/extensions/css/server/test/mocha.opts b/extensions/css/server/test/mocha.opts new file mode 100644 index 0000000000000000000000000000000000000000..710cf36a9f069ef49ff4fa091e5153a58aeb688d --- /dev/null +++ b/extensions/css/server/test/mocha.opts @@ -0,0 +1,3 @@ +--ui tdd +--useColors true +./out/test diff --git a/extensions/css/server/tsconfig.json b/extensions/css/server/tsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..b37b37e55dc751780972ed3c3d8401a1ea879f3e --- /dev/null +++ b/extensions/css/server/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "noLib": true, + "target": "es5", + "module": "commonjs", + "sourceMap": true, + "sourceRoot": "../src", + "outDir": "./out" + }, + "exclude": [ + "node_modules" + ] +} \ No newline at end of file diff --git a/src/vs/languages/languages.main.ts b/src/vs/languages/languages.main.ts index 4f184f5eab9a98f93cdb5c27509cc71cfe9cb83a..11c18fe1adfeab001460998d067f89d177ba05b2 100644 --- a/src/vs/languages/languages.main.ts +++ b/src/vs/languages/languages.main.ts @@ -5,10 +5,11 @@ 'use strict'; -import 'vs/languages/css/common/css.contribution'; + import 'vs/languages/handlebars/common/handlebars.contribution'; import 'vs/languages/html/common/html.contribution'; import 'vs/languages/markdown/common/markdown.contribution'; import 'vs/languages/razor/common/razor.contribution'; -import 'vs/languages/less/common/less.contribution'; -import 'vs/languages/sass/common/sass.contribution'; +//import 'vs/languages/less/common/less.contribution'; +//import 'vs/languages/sass/common/sass.contribution'; +//import 'vs/languages/css/common/css.contribution';