| Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/layout/style/test/ (Browser von der Mozilla Stiftung Version 136.0.1©) Datei vom 10.2.2025 mit Größe 394 kB |
|
Impressum property_database.js Sprache: JAVA |
|||||||||||||||
|
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ /* eslint-disable dot-notation */ /* vim: set ts=2 sw=2 sts=2 et: */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ // Utility function. Returns true if the given boolean pref... // (a) exists and (b) is set to true. // Otherwise, returns false. // // This function also reports a test failure if the pref isn't set at all. This // ensures that we remove pref-checks from mochitests (instead of accidentally // disabling the tests that are controlled by that check) when we remove a // mature feature's pref from the rest of the codebase. function IsCSSPropertyPrefEnabled(prefName) { try { if (SpecialPowers.getBoolPref(prefName)) { return true; } } catch (ex) { ok( false, "Failed to look up property-controlling pref '" + prefName + "' (" + ex + ")" ); } return false; } // True longhand properties. const CSS_TYPE_LONGHAND = 0; // True shorthand properties. const CSS_TYPE_TRUE_SHORTHAND = 1; // Properties that we handle as shorthands but were longhands either in // the current spec or earlier versions of the spec. const CSS_TYPE_SHORTHAND_AND_LONGHAND = 2; // Legacy shorthand properties, that behave mostly like an alias // (CSS_TYPE_SHORTHAND_AND_LONGHAND) but not quite because their syntax may not // match, plus they shouldn't serialize in cssText. const CSS_TYPE_LEGACY_SHORTHAND = 3; // Each property has the following fields: // domProp: The name of the relevant member of nsIDOM[NS]CSS2Properties // inherited: Whether the property is inherited by default (stated as // yes or no in the property header in all CSS specs) // type: see above // alias_for: optional, indicates that the property is an alias for // some other property that is the preferred serialization. (Type // must not be CSS_TYPE_LONGHAND.) // logical: optional, indicates that the property is a logical directional // property. (Type must be CSS_TYPE_LONGHAND.) // axis: optional, indicates that the property is an axis-related logical // directional property. (Type must be CSS_TYPE_LONGHAND and 'logical' // must be true.) // initial_values: Values whose computed value should be the same as the // computed value for the property's initial value. // other_values: Values whose computed value should be different from the // computed value for the property's initial value. // XXX Should have a third field for values whose computed value may or // may not be the same as for the property's initial value. // invalid_values: Things that are not values for the property and // should be rejected, but which are balanced and should not absorb // what follows // quirks_values: Values that should be accepted in quirks mode only, // mapped to the values they are equivalent to. // unbalanced_values: Things that are not values for the property and // should be rejected, and which also contain unbalanced constructs // that should absorb what follows // // Note: By default, an alias is assumed to accept/reject the same values as // the property that it aliases, and to have the same prerequisites. So, if // "alias_for" is set, the "*_values" and "prerequisites" fields can simply // be omitted, and they'll be populated automatically to match the aliased // property's fields. // Helper functions used to construct gCSSProperties. function initial_font_family_is_sans_serif() { // The initial value of 'font-family' might be 'serif' or // 'sans-serif'. const meta = document.createElement("meta"); meta.setAttribute("style", "font: initial;"); document.documentElement.appendChild(meta); const family = getComputedStyle(meta).fontFamily; meta.remove(); return family == "sans-serif"; } var gInitialFontFamilyIsSansSerif = initial_font_family_is_sans_serif(); // shared by background-image and border-image-source var validNonUrlImageValues = [ "-moz-element(#a)", "-moz-element( #a )", "-moz-element(#a-1)", "-moz-element(#a\\:1)", /* gradient torture test */ "linear-gradient(red, blue)", "linear-gradient(red, yellow, blue)", "linear-gradient(red 1px, yellow 20%, blue 24em, green)", "linear-gradient(red, yellow, green, blue 50%)", "linear-gradient(red -50%, yellow -25%, green, blue)", "linear-gradient(red -99px, yellow, green, blue 120%)", "linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))", "linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)", "linear-gradient(red, green calc(50% + 20px), blue)", "linear-gradient(180deg, red, blue)", "linear-gradient(to top, red, blue)", "linear-gradient(to bottom, red, blue)", "linear-gradient(to left, red, blue)", "linear-gradient(to right, red, blue)", "linear-gradient(to top left, red, blue)", "linear-gradient(to top right, red, blue)", "linear-gradient(to bottom left, red, blue)", "linear-gradient(to bottom right, red, blue)", "linear-gradient(to left top, red, blue)", "linear-gradient(to left bottom, red, blue)", "linear-gradient(to right top, red, blue)", "linear-gradient(to right bottom, red, blue)", "linear-gradient(-33deg, red, blue)", "linear-gradient(30grad, red, blue)", "linear-gradient(10deg, red, blue)", "linear-gradient(1turn, red, blue)", "linear-gradient(.414rad, red, blue)", "linear-gradient(.414rad, red, 50%, blue)", "linear-gradient(.414rad, red, 0%, blue)", "linear-gradient(.414rad, red, 100%, blue)", "linear-gradient(.414rad, red 50%, 50%, blue 50%)", "linear-gradient(.414rad, red 50%, 20%, blue 50%)", "linear-gradient(.414rad, red 50%, 30%, blue 10%)", "linear-gradient(to right bottom, red, 20%, green 50%, 65%, blue)", "linear-gradient(to right bottom, red, 20%, green 10%, blue)", "linear-gradient(to right bottom, red, 50%, green 50%, 50%, blue)", "linear-gradient(to right bottom, red, 0%, green 50%, 100%, blue)", "linear-gradient(red 0% 100%)", "linear-gradient(red 0% 50%, blue 50%)", "linear-gradient(red 0% 50%, blue 50% 100%)", "linear-gradient(red 0% 50%, 0%, blue 50%)", "linear-gradient(red 0% 50%, 0%, blue 50% 100%)", /* Unitless 0 is valid as an <angle> */ "linear-gradient(0, red, blue)", "radial-gradient(red, blue)", "radial-gradient(red, yellow, blue)", "radial-gradient(red 1px, yellow 20%, blue 24em, green)", "radial-gradient(red, yellow, green, blue 50%)", "radial-gradient(red -50%, yellow -25%, green, blue)", "radial-gradient(red -99px, yellow, green, blue 120%)", "radial-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))", "radial-gradient(0 0, red, blue)", "radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)", "radial-gradient(at top left, red, blue)", "radial-gradient(at 20% bottom, red, blue)", "radial-gradient(at center 20%, red, blue)", "radial-gradient(at left 35px, red, blue)", "radial-gradient(at 10% 10em, red, blue)", "radial-gradient(at 44px top, red, blue)", "radial-gradient(at 0 0, red, blue)", "radial-gradient(farthest-corner, red, blue)", "radial-gradient(circle, red, blue)", "radial-gradient(ellipse closest-corner, red, blue)", "radial-gradient(closest-corner ellipse, red, blue)", "radial-gradient(farthest-side circle, red, blue)", "radial-gradient(at 43px, red, blue)", "radial-gradient(at 43px 43px, red, blue)", "radial-gradient(at 50% 50%, red, blue)", "radial-gradient(at 43px 50%, red, blue)", "radial-gradient(at 50% 43px, red, blue)", "radial-gradient(circle 43px, red, blue)", "radial-gradient(43px circle, red, blue)", "radial-gradient(ellipse 43px 43px, red, blue)", "radial-gradient(ellipse 50% 50%, red, blue)", "radial-gradient(ellipse 43px 50%, red, blue)", "radial-gradient(ellipse 50% 43px, red, blue)", "radial-gradient(50% 43px ellipse, red, blue)", "radial-gradient(farthest-corner at top left, red, blue)", "radial-gradient(ellipse closest-corner at 45px, red, blue)", "radial-gradient(circle farthest-side at 45px, red, blue)", "radial-gradient(closest-side ellipse at 50%, red, blue)", "radial-gradient(farthest-corner circle at 4em, red, blue)", "radial-gradient(30% 40% at top left, red, blue)", "radial-gradient(50px 60px at 15% 20%, red, blue)", "radial-gradient(7em 8em at 45px, red, blue)", "radial-gradient(circle at 15% 20%, red, blue)", "radial-gradient(red 0% 100%)", "radial-gradient(red 0% 50%, blue 50%)", "radial-gradient(red 0% 50%, blue 50% 100%)", "radial-gradient(red 0% 50%, 0%, blue 50%)", "radial-gradient(red 0% 50%, 0%, blue 50% 100%)", "repeating-radial-gradient(red, blue)", "repeating-radial-gradient(red, yellow, blue)", "repeating-radial-gradient(red 1px, yellow 20%, blue 24em, green)", "repeating-radial-gradient(red, yellow, green, blue 50%)", "repeating-radial-gradient(red -50%, yellow -25%, green, blue)", "repeating-radial-gradient(red -99px, yellow, green, blue 120%)", "repeating-radial-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))", "repeating-radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)", "repeating-radial-gradient(at top left, red, blue)", "repeating-radial-gradient(at 0 0, red, blue)", "repeating-radial-gradient(at 20% bottom, red, blue)", "repeating-radial-gradient(at center 20%, red, blue)", "repeating-radial-gradient(at left 35px, red, blue)", "repeating-radial-gradient(at 10% 10em, red, blue)", "repeating-radial-gradient(at 44px top, red, blue)", "repeating-radial-gradient(farthest-corner at top left, red, blue)", "repeating-radial-gradient(closest-corner ellipse at 45px, red, blue)", "repeating-radial-gradient(farthest-side circle at 45px, red, blue)", "repeating-radial-gradient(ellipse closest-side at 50%, red, blue)", "repeating-radial-gradient(circle farthest-corner at 4em, red, blue)", "repeating-radial-gradient(30% 40% at top left, red, blue)", "repeating-radial-gradient(50px 60px at 15% 20%, red, blue)", "repeating-radial-gradient(7em 8em at 45px, red, blue)", // When that happens this should be moved to the `invalid` list. "repeating-radial-gradient(circle closest-side at left 0px bottom 7in, hsl(2,2%, "radial-gradient(at calc(25%) top, red, blue)", "radial-gradient(at left calc(25%), red, blue)", "radial-gradient(at calc(25px) top, red, blue)", "radial-gradient(at left calc(25px), red, blue)", "radial-gradient(at calc(-25%) top, red, blue)", "radial-gradient(at left calc(-25%), red, blue)", "radial-gradient(at calc(-25px) top, red, blue)", "radial-gradient(at left calc(-25px), red, blue)", "radial-gradient(at calc(100px + -25%) top, red, blue)", "radial-gradient(at left calc(100px + -25%), red, blue)", "radial-gradient(at calc(100px + -25px) top, red, blue)", "radial-gradient(at left calc(100px + -25px), red, blue)", "image-set(linear-gradient(green, green) 1x, url(foobar.png) 2x)", "image-set(linear-gradient(red, red), url(foobar.png) 2x)", "image-set(url(foobar.png) 2x)", "image-set(url(foobar.png) 1x, url(bar.png) 2x, url(baz.png) 3x)", "image-set('foobar.png', 'bar.png' 2x, url(baz.png) 3x)", "image-set(url(foobar.png) type('image/png'))", "image-set(url(foobar.png) 1x type('image/png'))", "image-set(url(foobar.png) type('image/png') 1x)", ...(IsCSSPropertyPrefEnabled("layout.css.cross-fade.enabled") ? [ "cross-fade(red, blue)", "cross-fade(red)", "cross-fade(red 50%)", // see: <https://github.com/w3c/csswg-drafts/issues/5333>. This // may become invalid depending on how discussion on that issue // goes. "cross-fade(red -50%, blue 150%)", "cross-fade(red -50%, url(www.example.com))", "cross-fade(url(http://placekitten.com/200/300), 55% linear-gradient(red, blue)) "cross-fade(cross-fade(red, white), cross-fade(blue))", "cross-fade(gold 77%, 60% blue)", "cross-fade(url(http://placekitten.com/200/300), url(http://placekitten.com/200/ "cross-fade(#F0F8FF, rgb(0, 0, 0), rgba(0, 255, 0, 1) 25%)", ] : []), // Conic gradient "conic-gradient(red, blue)", "conic-gradient(red,blue,yellow)", "conic-gradient( red , blue, yellow)", "conic-gradient(red 0, blue 50deg)", "conic-gradient(red 10%, blue 50%)", "conic-gradient(red -50deg, blue 50deg)", "conic-gradient(red 50deg, blue 0.3turn, yellow 200grad, orange 60% 5rad)", "conic-gradient(red 0 100%)", "conic-gradient(red 0 50%, blue 50%)", "conic-gradient(red 0 50deg, blue 50% 100%)", "conic-gradient(red 0 50%, 0deg, blue 50%)", "conic-gradient(red 0deg 50%, 0%, blue 50% 100%)", "conic-gradient(from 0, red, blue)", "conic-gradient(from 40deg, red, blue)", "conic-gradient(from 0.4turn, red, blue)", "conic-gradient(from 200grad, red, blue)", "conic-gradient(from 5rad, red, blue)", "conic-gradient(at top, red, blue)", "conic-gradient(at top left, red, blue)", "conic-gradient(at left top, red, blue)", "conic-gradient(at center center, red, blue)", "conic-gradient(at 20% bottom, red, blue)", "conic-gradient(at center 20%, red, blue)", "conic-gradient(at left 35px, red, blue)", "conic-gradient(at 10% 10em, red, blue)", "conic-gradient(at 44px top, red, blue)", "conic-gradient(at 0 0, red, blue)", "conic-gradient(at 10px, red, blue)", "conic-gradient(at calc(25%) top, red, blue)", "conic-gradient(at left calc(25%), red, blue)", "conic-gradient(at calc(25px) top, red, blue)", "conic-gradient(at left calc(25px), red, blue)", "conic-gradient(at calc(-25%) top, red, blue)", "conic-gradient(at left calc(-25%), red, blue)", "conic-gradient(at calc(-25px) top, red, blue)", "conic-gradient(at left calc(-25px), red, blue)", "conic-gradient(at calc(100px + -25%) top, red, blue)", "conic-gradient(at left calc(100px + -25%), red, blue)", "conic-gradient(at calc(100px + -25px) top, red, blue)", "conic-gradient(at left calc(100px + -25px), red, blue)", "conic-gradient(from 0 at 0 0, red, blue)", "conic-gradient(from 40deg at 50%, red, blue)", "conic-gradient(from 0.4turn at left 30%, red, blue)", "conic-gradient(from 200grad at calc(100px + -25%) top, red, blue)", "conic-gradient(from 5rad at 10px, red, blue)", "repeating-conic-gradient(red, blue)", "repeating-conic-gradient(red, yellow, blue)", "repeating-conic-gradient(red 1deg, yellow 20%, blue 5rad, green)", "repeating-conic-gradient(red, yellow, green, blue 50%)", "repeating-conic-gradient(red -50%, yellow -25%, green, blue)", "repeating-conic-gradient(red -99deg, yellow, green, blue 120%)", "repeating-conic-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))", "repeating-conic-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)", "repeating-conic-gradient(from 0, red, blue)", "repeating-conic-gradient(from 40deg, red, blue)", "repeating-conic-gradient(from 0.4turn, red, blue)", "repeating-conic-gradient(from 200grad, red, blue)", "repeating-conic-gradient(from 5rad, red, blue)", "repeating-conic-gradient(at top left, red, blue)", "repeating-conic-gradient(at 0 0, red, blue)", "repeating-conic-gradient(at 20% bottom, red, blue)", "repeating-conic-gradient(at center 20%, red, blue)", "repeating-conic-gradient(at left 35px, red, blue)", "repeating-conic-gradient(at 10% 10em, red, blue)", "repeating-conic-gradient(at 44px top, red, blue)", "repeating-conic-gradient(from 0 at 0 0, red, blue)", "repeating-conic-gradient(from 40deg at 50%, red, blue)", "repeating-conic-gradient(from 0.4turn at left 30%, red, blue)", "repeating-conic-gradient(from 200grad at calc(100px + -25%) top, red, blue)", "repeating-conic-gradient(from 5rad at 10px, red, blue)", // 2008 GRADIENTS: -webkit-gradient() // ---------------------------------- // linear w/ no color stops (valid) and a variety of position values: "-webkit-gradient(linear, 1 2, 3 4)", "-webkit-gradient(linear,1 2,3 4)", // (no extra space) "-webkit-gradient(linear , 1 2 , 3 4 )", // (lots of extra space) "-webkit-gradient(linear, 1 10% , 0% 4)", // percentages "-webkit-gradient(linear, +1.0 -2%, +5.3% -0)", // (+/- & decimals are valid) "-webkit-gradient(linear, left top, right bottom)", // keywords "-webkit-gradient(linear, right center, center top)", "-webkit-gradient(linear, center center, center center)", "-webkit-gradient(linear, center 5%, 30 top)", // keywords mixed w/ nums // linear w/ just 1 color stop: "-webkit-gradient(linear, 1 2, 3 4, from(lime))", "-webkit-gradient(linear, 1 2, 3 4, to(lime))", // * testing the various allowable stop values (<number> & <percent>): "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(-0, lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(-30, lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(+9999, lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(-.1, lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(0%, lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(100%, lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(9999%, lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(-.5%, lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(+0%, lime))", // * testing the various color values: "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, transparent))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, rgb(1,2,3)))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, #00ff00))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, #00f))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, hsla(240, 30%, 50%, 0.8)))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, rgba(255, 230, 10, 0.5)))", // linear w/ multiple color stops: // * using from()/to() -- note that out-of-order is OK: "-webkit-gradient(linear, 1 2, 3 4, from(lime), from(blue))", "-webkit-gradient(linear, 1 2, 3 4, to(lime), to(blue))", "-webkit-gradient(linear, 1 2, 3 4, from(lime), to(blue))", "-webkit-gradient(linear, 1 2, 3 4, to(lime), from(blue))", "-webkit-gradient(linear, 1 2, 3 4, from(lime), to(blue), from(purple))", // * using color-stop(): "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, lime), color-stop(30%, blue))" "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, lime), color-stop(30%, blue), // * using color-stop() intermixed with from()/to() functions: "-webkit-gradient(linear, 1 2, 3 4, from(lime), color-stop(30%, blue))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(30%, blue), to(lime))", // * overshooting endpoints (0 & 1.0) "-webkit-gradient(linear, 1 2, 3 4, color-stop(-30%, lime), color-stop(.4, blue) // * repeating a stop position (valid) "-webkit-gradient(linear, 1 2, 3 4, color-stop(30%, lime), color-stop(30%, blue) // * stops out of order (valid) "-webkit-gradient(linear, 1 2, 3 4, color-stop(70%, lime), color-stop(20%, blue) // radial w/ no color stops (valid) and a several different radius values: "-webkit-gradient(radial, 1 2, 8, 3 4, 9)", "-webkit-gradient(radial, 0 0, 10, 0 0, 5)", // radial w/ color stops // (mostly leaning on more-robust 'linear' tests above; just testing a few // examples w/ radial as a sanity-check): "-webkit-gradient(radial, 1 2, 8, 3 4, 9, from(lime))", "-webkit-gradient(radial, 1 2, 8, 3 4, 9, to(blue))", "-webkit-gradient(radial, 1 2, 8, 3 4, 9, color-stop(0.5, #00f), color-stop(0.8, // 2011 GRADIENTS: -webkit-linear-gradient(), -webkit-radial -gradient() // --------------------------------------------------------------------- // Basic linear-gradient syntax (valid when prefixed or unprefixed): "-webkit-linear-gradient(red, green, blue)", // Angled linear-gradients (valid when prefixed or unprefixed): "-webkit-linear-gradient(135deg, red, blue)", "-webkit-linear-gradient( 135deg , red , blue )", "-webkit-linear-gradient(280deg, red 60%, blue)", // Linear-gradient with unitless-0 <angle> (normally invalid for <angle> // but accepted here for better webkit emulation): "-webkit-linear-gradient(0, red, blue)", // Linear-gradient with calc expression (bug 1363349) "-webkit-gradient(linear, calc(5 + 5) top, calc(10 + 10) top, from(blue), to(lim "-webkit-gradient(linear, calc(5 - 5) top, calc(10 + 10) top, from(blue), to(lim "-webkit-gradient(linear, calc(5 * 5) top, calc(10 + 10) top, from(blue), to(lim "-webkit-gradient(linear, calc(5 / 5) top, calc(10 + 10) top, from(blue), to(lim "-webkit-gradient(linear, left calc(25% - 10%), right calc(75% + 10%), from(blue "-webkit-gradient(linear, calc(1) 2, 3 4)", // Radial-gradient with calc expression (bug 1363349) "-webkit-gradient(radial, 1 2, 0, 3 4, calc(1 + 5), from(blue), to(lime))", "-webkit-gradient(radial, 1 2, calc(1 + 2), 3 4, calc(1 + 5), from(blue), to(lim "-webkit-gradient(radial, 1 2, calc(1 - 2), 3 4, calc(1 + 5), from(blue), to(lim "-webkit-gradient(radial, 1 2, calc(1 * 2), 3 4, calc(1 + 5), from(blue), to(lim "-webkit-gradient(radial, 1 2, calc(1 / 2), 3 4, calc(1 + 5), from(blue), to(lim "-webkit-gradient(radial, calc(0 + 1) calc(1 + 1), calc(1 + 2), calc(1 + 2) 4, c "-webkit-gradient(radial, 1 2, calc(8), 3 4, 9)", // Basic radial-gradient syntax (valid when prefixed or unprefixed): "-webkit-radial-gradient(circle, white, black)", "-webkit-radial-gradient(circle, white, black)", "-webkit-radial-gradient(ellipse closest-side, white, black)", "-webkit-radial-gradient(circle farthest-corner, white, black)", // Contain/cover keywords (valid only for -moz/-webkit prefixed): "-webkit-radial-gradient(cover, red, blue)", "-webkit-radial-gradient(cover circle, red, blue)", "-webkit-radial-gradient(contain, red, blue)", "-webkit-radial-gradient(contain ellipse, red, blue)", // Initial side/corner/point (valid only for -moz/-webkit prefixed): "-webkit-linear-gradient(top, red, blue)", "-webkit-linear-gradient(left, red, blue)", "-webkit-linear-gradient(bottom, red, blue)", "-webkit-linear-gradient(right top, red, blue)", "-webkit-linear-gradient(top right, red, blue)", "-webkit-radial-gradient(right, red, blue)", "-webkit-radial-gradient(left bottom, red, blue)", "-webkit-radial-gradient(bottom left, red, blue)", "-webkit-radial-gradient(center, red, blue)", "-webkit-radial-gradient(center right, red, blue)", "-webkit-radial-gradient(center center, red, blue)", "-webkit-radial-gradient(center top, red, blue)", "-webkit-radial-gradient(left 50%, red, blue)", "-webkit-radial-gradient(20px top, red, blue)", "-webkit-radial-gradient(20em 30%, red, blue)", // Point + keyword-sized shape (valid only for -moz/-webkit prefixed): "-webkit-radial-gradient(center, circle closest-corner, red, blue)", "-webkit-radial-gradient(10px 20px, cover circle, red, blue)", "-webkit-radial-gradient(5em 50%, ellipse contain, red, blue)", // Repeating examples: "-webkit-repeating-linear-gradient(red 10%, blue 30%)", "-webkit-repeating-linear-gradient(30deg, pink 20px, orange 70px)", "-webkit-repeating-linear-gradient(left, red, blue)", "-webkit-repeating-linear-gradient(left, red 10%, blue 30%)", "-webkit-repeating-radial-gradient(circle, red, blue 10%, red 20%)", "-webkit-repeating-radial-gradient(circle farthest-corner, gray 10px, yellow 20p "-webkit-repeating-radial-gradient(top left, circle, red, blue 4%, red 8%)", ]; var invalidNonUrlImageValues = [ "-moz-element(#a:1)", "-moz-element(a#a)", "-moz-element(#a a)", "-moz-element(#a+a)", "-moz-element(#a())", /* no quirks mode colors */ "linear-gradient(red, ff00ff)", /* no quirks mode colors */ "radial-gradient(at 10% bottom, ffffff, black) scroll no-repeat", /* no quirks mode lengths */ "linear-gradient(red -99, yellow, green, blue 120%)", /* Unitless nonzero numbers are valid as an <angle> */ "linear-gradient(30, red, blue)", /* There must be a comma between gradient-line (e.g. <angle>) and colors */ "linear-gradient(30deg red, blue)", "linear-gradient(to top left red, blue)", "linear-gradient(to right red, blue)", /* Invalid color or calc() function */ "linear-gradient(red, rgb(0, rubbish, 0) 50%, red)", "linear-gradient(red, red calc(50% + rubbish), red)", "linear-gradient(to top calc(50% + rubbish), red, blue)", "radial-gradient(circle 175px 20px, black, white)", "radial-gradient(175px 20px circle, black, white)", "radial-gradient(ellipse 175px, black, white)", "radial-gradient(175px ellipse, black, white)", "radial-gradient(50%, red, blue)", "radial-gradient(circle 50%, red, blue)", "radial-gradient(50% circle, red, blue)", /* Invalid units */ "conic-gradient(red, blue 50px, yellow 30px)", "repeating-conic-gradient(red 1deg, yellow 20%, blue 24em, green)", "conic-gradient(from 0%, black, white)", "conic-gradient(from 60%, black, white)", "conic-gradient(from 40px, black, white)", "conic-gradient(from 50, black, white)", "conic-gradient(at 50deg, black, white)", "conic-gradient(from 40deg at 50deg, black, white)", "conic-gradient(from 40deg at 50deg 60deg, black, white)", /* Invalid keywords (or ordering) */ "conic-gradient(at 40% from 50deg, black, white)", "conic-gradient(to 50deg, black, white)", /* Used to be valid only when prefixed */ "linear-gradient(top left, red, blue)", "linear-gradient(0 0, red, blue)", "linear-gradient(20% bottom, red, blue)", "linear-gradient(center 20%, red, blue)", "linear-gradient(left 35px, red, blue)", "linear-gradient(10% 10em, red, blue)", "linear-gradient(44px top, red, blue)", "linear-gradient(top left 45deg, red, blue)", "linear-gradient(20% bottom -300deg, red, blue)", "linear-gradient(center 20% 1.95929rad, red, blue)", "linear-gradient(left 35px 30grad, red, blue)", "linear-gradient(left 35px 0.1turn, red, blue)", "linear-gradient(10% 10em 99999deg, red, blue)", "linear-gradient(44px top -33deg, red, blue)", "linear-gradient(30grad left 35px, red, blue)", "linear-gradient(10deg 20px, red, blue)", "linear-gradient(1turn 20px, red, blue)", "linear-gradient(.414rad bottom, red, blue)", "linear-gradient(to top, 0%, blue)", "linear-gradient(to top, red, 100%)", "linear-gradient(to top, red, 45%, 56%, blue)", "linear-gradient(to top, red,, blue)", "linear-gradient(to top, red, green 35%, 15%, 54%, blue)", "linear-gradient(unset, 10px 10px, from(blue))", "linear-gradient(unset, 10px 10px, blue 0)", "repeating-linear-gradient(unset, 10px 10px, blue 0)", "radial-gradient(top left 45deg, red, blue)", "radial-gradient(20% bottom -300deg, red, blue)", "radial-gradient(center 20% 1.95929rad, red, blue)", "radial-gradient(left 35px 30grad, red, blue)", "radial-gradient(10% 10em 99999deg, red, blue)", "radial-gradient(44px top -33deg, red, blue)", "radial-gradient(-33deg, red, blue)", "radial-gradient(30grad left 35px, red, blue)", "radial-gradient(10deg 20px, red, blue)", "radial-gradient(.414rad bottom, red, blue)", "radial-gradient(cover, red, blue)", "radial-gradient(ellipse contain, red, blue)", "radial-gradient(cover circle, red, blue)", "radial-gradient(top left, cover, red, blue)", "radial-gradient(15% 20%, circle, red, blue)", "radial-gradient(45px, ellipse closest-corner, red, blue)", "radial-gradient(45px, farthest-side circle, red, blue)", "radial-gradient(99deg, cover, red, blue)", "radial-gradient(-1.2345rad, circle, red, blue)", "radial-gradient(399grad, ellipse closest-corner, red, blue)", "radial-gradient(399grad, farthest-side circle, red, blue)", "radial-gradient(top left 99deg, cover, red, blue)", "radial-gradient(15% 20% -1.2345rad, circle, red, blue)", "radial-gradient(45px 399grad, ellipse closest-corner, red, blue)", "radial-gradient(45px 399grad, farthest-side circle, red, blue)", "radial-gradient(circle red, blue)", /* don't allow more than two positions with multi-position syntax */ "linear-gradient(red 0% 50% 100%)", "linear-gradient(red 0% 50% 75%, blue 75%)", "linear-gradient(to bottom, red 0% 50% 100%)", "linear-gradient(to bottom, red 0% 50% 75%, blue 75%)", "radial-gradient(red 0% 50% 100%)", "radial-gradient(red 0% 50% 75%, blue 75%)", "radial-gradient(center, red 0% 50% 100%)", "radial-gradient(center, red 0% 50% 75%, blue 75%)", "conic-gradient(red 0% 50% 100%)", "conic-gradient(red 0% 50% 75%, blue 75%)", "conic-gradient(center, red 0% 50% 100%)", "conic-gradient(center, red 0% 50% 75%, blue 75%)", // missing color in color stop "conic-gradient(red 50deg, blue 0.3turn, yellow 200grad, orange 60%, 5rad)", "-moz-linear-gradient(unset, 10px 10px, from(blue))", "-moz-linear-gradient(unset, 10px 10px, blue 0)", "-moz-repeating-linear-gradient(unset, 10px 10px, blue 0)", // 2008 GRADIENTS: -webkit-gradient() // https://www.webkit.org/blog/175/introducing-css-gradients/ // ---------------------------------- // Mostly-empty expressions (missing most required pieces): "-webkit-gradient()", "-webkit-gradient( )", "-webkit-gradient(,)", "-webkit-gradient(bogus)", "-webkit-gradient(linear)", "-webkit-gradient(linear,)", "-webkit-gradient(,linear)", "-webkit-gradient(radial)", "-webkit-gradient(radial,)", // linear w/ partial/missing <point> expression(s) "-webkit-gradient(linear, 1)", // Incomplete <point> "-webkit-gradient(linear, left)", // Incomplete <point> "-webkit-gradient(linear, center)", // Incomplete <point> "-webkit-gradient(linear, top)", // Incomplete <point> "-webkit-gradient(linear, 5%)", // Incomplete <point> "-webkit-gradient(linear, 1 2)", // Missing 2nd <point> "-webkit-gradient(linear, 1, 3)", // 2 incomplete <point>s "-webkit-gradient(linear, 1, 3 4)", // Incomplete 1st <point> "-webkit-gradient(linear, 1 2, 3)", // Incomplete 2nd <point> "-webkit-gradient(linear, 1 2, 3, 4)", // Comma inside <point> "-webkit-gradient(linear, 1, 2, 3 4)", // Comma inside <point> "-webkit-gradient(linear, 1, 2, 3, 4)", // Comma inside <point> // linear w/ invalid units in <point> expression "-webkit-gradient(linear, 1px 2, 3 4)", "-webkit-gradient(linear, 1 2, 3 4px)", "-webkit-gradient(linear, 1px 2px, 3px 4px)", "-webkit-gradient(linear, 1 2em, 3 4)", // linear w/ <radius> (only valid for radial) "-webkit-gradient(linear, 1 2, 8, 3 4, 9)", // linear w/ out-of-order position keywords in <point> expression // (horizontal keyword is supposed to come first, for "x" coord) "-webkit-gradient(linear, 0 0, top right)", "-webkit-gradient(linear, bottom center, 0 0)", "-webkit-gradient(linear, top bottom, 0 0)", "-webkit-gradient(linear, bottom top, 0 0)", "-webkit-gradient(linear, bottom top, 0 0)", // linear w/ trailing comma (which implies missing color-stops): "-webkit-gradient(linear, 1 2, 3 4,)", // linear w/ invalid color values: "-webkit-gradient(linear, 1 2, 3 4, from(invalidcolorname))", "-webkit-gradient(linear, 1 2, 3 4, from(inherit))", "-webkit-gradient(linear, 1 2, 3 4, from(initial))", "-webkit-gradient(linear, 1 2, 3 4, from(currentColor))", "-webkit-gradient(linear, 1 2, 3 4, from(00ff00))", "-webkit-gradient(linear, 1 2, 3 4, from(##00ff00))", "-webkit-gradient(linear, 1 2, 3 4, from(#00fff))", // wrong num hex digits "-webkit-gradient(linear, 1 2, 3 4, from(xyz(0,0,0)))", // bogus color func // Mixing <number> and <percentage> is invalid. "-webkit-gradient(linear, 1 2, 3 4, from(rgb(100, 100%, 30)))", // linear w/ color stops that have comma issues "-webkit-gradient(linear, 1 2, 3 4 from(lime))", "-webkit-gradient(linear, 1 2, 3 4, from(lime,))", "-webkit-gradient(linear, 1 2, 3 4, from(lime),)", "-webkit-gradient(linear, 1 2, 3 4, from(lime) to(blue))", "-webkit-gradient(linear, 1 2, 3 4, from(lime),, to(blue))", "-webkit-gradient(linear, 1 2, 3 4, from(rbg(0, 0, 0,)))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(0 lime))", "-webkit-gradient(linear, 1 2, 3 4, color-stop(0,, lime))", // radial w/ broken <point>/radius expression(s) "-webkit-gradient(radial, 1)", // Incomplete <point> "-webkit-gradient(radial, 1 2)", // Missing radius + 2nd <point> "-webkit-gradient(radial, 1 2, 8)", // Missing 2nd <point> "-webkit-gradient(radial, 1 2, 8, 3)", // Incomplete 2nd <point> "-webkit-gradient(radial, 1 2, 8, 3 4)", // Missing 2nd radius "-webkit-gradient(radial, 1 2, 3 4, 9)", // Missing 1st radius "-webkit-gradient(radial, 1 2, -1.5, center center, +99999.9999)", // Negative radi // radial w/ incorrect units on radius (invalid; expecting <number>) "-webkit-gradient(radial, 1 2, 8%, 3 4, 9)", "-webkit-gradient(radial, 1 2, 8px, 3 4, 9)", "-webkit-gradient(radial, 1 2, 8em, 3 4, 9)", "-webkit-gradient(radial, 1 2, top, 3 4, 9)", // radial w/ trailing comma (which implies missing color-stops): "-webkit-gradient(linear, 1 2, 8, 3 4, 9,)", // radial w/ invalid color value (mostly leaning on 'linear' test above): "-webkit-gradient(radial, 1 2, 8, 3 4, 9, from(invalidcolorname))", // 2011 GRADIENTS: -webkit-linear-gradient(), -webkit-radial -gradient() // --------------------------------------------------------------------- // Syntax that's invalid for all types of gradients: // * empty gradient expressions: "-webkit-linear-gradient()", "-webkit-radial-gradient()", "-webkit-repeating-linear-gradient()", "-webkit-repeating-radial-gradient()", // * missing comma between <legacy-gradient-line> and color list: "-webkit-linear-gradient(0 red, blue)", "-webkit-linear-gradient(30deg red, blue)", "-webkit-linear-gradient(top right red, blue)", "-webkit-linear-gradient(bottom red, blue)", // Linear-gradient with calc expression containing mixed units // (bug 1363349) "-webkit-gradient(linear, calc(5 + 5%) top, calc(10 + 10) top, from(blue), to(li "-webkit-gradient(linear, left calc(25 - 10%), right calc(75% + 10%), from(blue) // Radial-gradient with calc expression containing mixed units, or a // percentage in the radius (bug 1363349) "-webkit-gradient(radial, 1 2, 0, 3 4, calc(1% + 5%), from(blue), to(lime))", "-webkit-gradient(radial, 1 2, calc(1 + 2), 3 4, calc(1 + 5%), from(blue), to(li "-webkit-gradient(radial, calc(0 + 1) calc(1 + 1), calc(1% + 2%), calc(1 + 2) 4, // Linear syntax that's invalid for both -webkit & unprefixed, but valid // for -moz: // * initial <legacy-gradient-line> which includes a length: "-webkit-linear-gradient(10px, red, blue)", "-webkit-linear-gradient(10px top, red, blue)", // * initial <legacy-gradient-line> which includes a side *and* an angle: "-webkit-linear-gradient(bottom 30deg, red, blue)", "-webkit-linear-gradient(30deg bottom, red, blue)", "-webkit-linear-gradient(10px top 50deg, red, blue)", "-webkit-linear-gradient(50deg 10px top, red, blue)", // * initial <legacy-gradient-line> which includes explicit "center": "-webkit-linear-gradient(center, red, blue)", "-webkit-linear-gradient(left center, red, blue)", "-webkit-linear-gradient(top center, red, blue)", "-webkit-linear-gradient(center top, red, blue)", // Linear syntax that's invalid for -webkit, but valid for -moz & unprefixed: // * "to" syntax: "-webkit-linear-gradient(to top, red, blue)", // * <shape> followed by angle: "-webkit-radial-gradient(circle 10deg, red, blue)", // Radial syntax that's invalid for both -webkit & -moz, but valid for // unprefixed: // * "<shape> at <position>" syntax: "-webkit-radial-gradient(circle at left bottom, red, blue)", // * explicitly-sized shape: "-webkit-radial-gradient(circle 10px, red, blue)", "-webkit-radial-gradient(ellipse 40px 20px, red, blue)", // Radial syntax that's invalid for both -webkit & unprefixed, but valid // for -moz: // * initial angle "-webkit-radial-gradient(30deg, red, blue)", // * initial angle/position combo "-webkit-radial-gradient(top 30deg, red, blue)", "-webkit-radial-gradient(left top 30deg, red, blue)", "-webkit-radial-gradient(10px 20px 30deg, red, blue)", // Conic gradients should not support prefixed syntax "-webkit-gradient(conic, 1 2, 3 4, color-stop(0, lime))", "-webkit-conic-gradient(red, blue)", "-moz-conic-gradient(red, blue)", "-webkit-repeating-conic-gradient(red, blue)", "-moz-repeating-conic-gradient(red, blue)", "image-set(url(foobar.png) 1x, none)", "image-set(garbage)", "image-set(image-set('foobar.png', 'bar.png' 2x) 1x, url(baz.png) 3x)", // Nested i "image-set(image-set(garbage))", "image-set()", "image-set(type('image/png') url(foobar.png) 1x)", "image-set(url(foobar.png) type('image/png') 1x type('image/png'))", "image-set(url(foobar.png) type('image/png') type('image/png'))", "image-set(url(foobar.png) type(image/png))", "image-set(url(foobar.png) epyt('image/png'))", ...(IsCSSPropertyPrefEnabled("layout.css.cross-fade.enabled") ? [ "cross-fade(red blue)", "cross-fade()", "cross-fade(50%, blue 50%)", // Old syntax "cross-fade(red, white, 50%)", // see: <https://github.com/w3c/csswg-drafts/issues/5333>. This // may become invalid depending on how discussion on that issue // goes. "cross-fade(red, 150%, blue)", "cross-fade(red auto, blue 10%)", // nested invalidity should propagate. "cross-fade(url(http://placekitten.com/200/300), 55% linear-gradient(center, red "cross-fade(cross-fade(red, white, 50%), cross-fade(blue))", "cross-fade(url(http://placekitten.com/200/300) url(http://placekitten.com/200/3 "cross-fade(#F0F8FF, rgb(0, 0, 0), rgba(0, 255, 0, 1), 25%)", ] : []), ]; var unbalancedGradientAndElementValues = ["-moz-element(#a()"]; var basicShapeSVGBoxValues = [ "fill-box", "stroke-box", "view-box", "polygon(evenodd, 20pt 20cm) fill-box", "polygon(evenodd, 20ex 20pc) stroke-box", "polygon(evenodd, 20rem 20in) view-box", ]; var basicShapeOtherValues = [ "polygon(20px 20px)", "polygon(20px 20%)", "polygon(20% 20%)", "polygon(20rem 20em)", "polygon(20cm 20mm)", "polygon(20px 20px, 30px 30px)", "polygon(20px 20px, 30% 30%, 30px 30px)", "content-box", "padding-box", "border-box", "polygon(0 0) content-box", "border-box polygon(0 0)", "padding-box polygon( 0 20px , 30px 20% ) ", "circle()", "circle(at center)", "circle(at top 0px left 20px)", "circle(at bottom right)", "circle(20%)", "circle(300px)", "circle(calc(20px + 30px))", "circle(farthest-side)", "circle(closest-side)", "circle(closest-side at center)", "circle(farthest-side at top)", "circle(20px at top right)", "circle(40% at 50% 100%)", "circle(calc(20% + 20%) at right bottom)", "circle() padding-box", "ellipse()", "ellipse(at center)", "ellipse(at top 0px left 20px)", "ellipse(at bottom right)", "ellipse(20% 20%)", "ellipse(300px 50%)", "ellipse(calc(20px + 30px) 10%)", "ellipse(farthest-side closest-side)", "ellipse(closest-side farthest-side)", "ellipse(farthest-side farthest-side)", "ellipse(closest-side closest-side)", "ellipse(closest-side closest-side at center)", "ellipse(20% farthest-side at top)", "ellipse(20px 50% at top right)", "ellipse(closest-side 40% at 50% 100%)", "ellipse(calc(20% + 20%) calc(20px + 20cm) at right bottom)", "inset(1px)", "inset(20% -20px)", "inset(20em 4rem calc(20% + 20px))", "inset(20vh 20vw 20pt 3%)", "inset(5px round 3px)", "inset(1px 2px round 3px / 3px)", "inset(1px 2px 3px round 3px 2em / 20%)", "inset(1px 2px 3px 4px round 3px 2vw 20% / 20px 3em 2vh 20%)", ]; var basicShapeOtherValuesWithFillRule = [ "polygon(nonzero, 20px 20px, 30% 30%, 30px 30px)", "polygon(evenodd, 20px 20px, 30% 30%, 30px 30px)", "polygon(evenodd, 20% 20em) content-box", "polygon(evenodd, 20vh 20em) padding-box", "polygon(evenodd, 20vh calc(20% + 20em)) border-box", "polygon(evenodd, 20vh 20vw) margin-box", ]; var basicShapeInvalidValues = [ "url(#test) url(#tes2)", "polygon (0 0)", "polygon(20px, 40px)", "border-box content-box", "polygon(0 0) polygon(0 0)", "polygon(nonzero 0 0)", "polygon(evenodd 20px 20px)", "polygon(20px 20px, evenodd)", "polygon(20px 20px, nonzero)", "polygon(0 0) conten-box content-box", "content-box polygon(0 0) conten-box", "padding-box polygon(0 0) conten-box", "polygon(0 0) polygon(0 0) content-box", "polygon(0 0) content-box polygon(0 0)", "polygon(0 0), content-box", "polygon(0 0), polygon(0 0)", "content-box polygon(0 0) polygon(0 0)", "content-box polygon(0 0) none", "none content-box polygon(0 0)", "inherit content-box polygon(0 0)", "initial polygon(0 0)", "polygon(0 0) farthest-side", "farthest-corner polygon(0 0)", "polygon(0 0) farthest-corner", "polygon(0 0) conten-box", "polygon(0 0) polygon(0 0) farthest-corner", "polygon(0 0) polygon(0 0) polygon(0 0)", "border-box polygon(0, 0)", "border-box padding-box", "margin-box farthest-side", "nonsense() border-box", "border-box nonsense()", "circle(at)", "circle(at 20% 20% 30%)", "circle(20px 2px at center)", "circle(2at center)", "circle(closest-corner)", "circle(at center top closest-side)", "circle(-20px)", "circle(farthest-side closest-side)", "circle(20% 20%)", "circle(at farthest-side)", "circle(calc(20px + rubbish))", "circle(at top left 20px)", "ellipse(at)", "ellipse(at 20% 20% 30%)", "ellipse(20px at center)", "ellipse(-20px 20px)", "ellipse(closest-corner farthest-corner)", "ellipse(20px -20px)", "ellipse(-20px -20px)", "ellipse(farthest-side)", "ellipse(20%)", "ellipse(at farthest-side farthest-side)", "ellipse(at top left calc(20px + rubbish))", "ellipse(at top left 20px)", "polygon(at)", "polygon(at 20% 20% 30%)", "polygon(20px at center)", "polygon(2px 2at center)", "polygon(closest-corner farthest-corner)", "polygon(at center top closest-side closest-side)", "polygon(40% at 50% 100%)", "polygon(40% farthest-side 20px at 50% 100%)", "inset()", "inset(round)", "inset(round 3px)", "inset(1px round 1px 2px 3px 4px 5px)", "inset(1px 2px 3px 4px 5px)", "inset(1px, round 3px)", "inset(1px, 2px)", "inset(1px 2px, 3px)", "inset(1px at 3px)", "inset(1px round 1px // 2px)", "inset(1px round)", "inset(1px calc(2px + rubbish))", "inset(1px round 2px calc(3px + rubbish))", ]; var basicShapeUnbalancedValues = [ "polygon(30% 30%", "polygon(nonzero, 20% 20px", "polygon(evenodd, 20px 20px", "circle(", "circle(40% at 50% 100%", "ellipse(", "ellipse(40% at 50% 100%", "inset(1px", "inset(1px 2px", "inset(1px 2px 3px", "inset(1px 2px 3px 4px", "inset(1px 2px 3px 4px round 5px", "inset(1px 2px 3px 4px round 5px / 6px", ]; var basicShapeXywhRectValues = []; if (IsCSSPropertyPrefEnabled("layout.css.basic-shape-xywh.enabled")) { basicShapeXywhRectValues.push( "xywh(1px 2% 3px 4em)", "xywh(1px 2% 3px 4em round 0px)", "xywh(1px 2% 3px 4em round 0px 1%)", "xywh(1px 2% 3px 4em round 0px 1% 2px)", "xywh(1px 2% 3px 4em round 0px 1% 2px 3em)" ); } if (IsCSSPropertyPrefEnabled("layout.css.basic-shape-rect.enabled")) { basicShapeXywhRectValues.push( "rect(auto auto auto auto)", "rect(1px 2% auto 4em)", "rect(1px 2% auto 4em round 0px)", "rect(1px 2% auto 4em round 0px 1%)", "rect(1px 2% auto 4em round 0px 1% 2px)", "rect(1px 2% auto 4em round 0px 1% 2px 3em)" ); } var basicShapeShapeValues = []; var basicShapeShapeValuesWithFillRule = []; if (IsCSSPropertyPrefEnabled("layout.css.basic-shape-shape.enabled")) { basicShapeShapeValuesWithFillRule.push( "shape(evenodd from 0px 0px, line to 10px 10px)", "shape(nonzero from 0px 0px, line to 10px 10px)" ); basicShapeShapeValues.push( "shape(from 0px 0%, line to 10px 10%)", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)", "shape(from 10px 10px, hline by 10px, vline to 5rem)", "shape(from 10px 10px, vline by 5%, hline to 1vw)", "shape(from 10px 10px, curve to 50px 20px via 10rem 1%)", "shape(from 10px 10px, smooth to 50px 20px via 10rem 1%)", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)" ); // It's fine to include this for properties which don't support shape(), // e.g. shape-outside, because they must reject these values. basicShapeInvalidValues.push( "shape()", "shape(evenodd, from 0px 0px)", "shape(from 0px 0px line to 10px 10px)", "shape(from 0px 0px)", "shape(close)", "shape(nonzero, close)" ); } if (/* mozGradientsEnabled */ true) { // Maybe one day :( // Extend gradient lists with valid/invalid moz-prefixed expressions: validNonUrlImageValues.push( "-moz-linear-gradient(red, blue)", "-moz-linear-gradient(red, yellow, blue)", "-moz-linear-gradient(red 1px, yellow 20%, blue 24em, green)", "-moz-linear-gradient(red, yellow, green, blue 50%)", "-moz-linear-gradient(red -50%, yellow -25%, green, blue)", "-moz-linear-gradient(red -99px, yellow, green, blue 120%)", "-moz-linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))", "-moz-linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)", "-moz-linear-gradient(top, red, blue)", "-moz-linear-gradient(to top, red, blue)", "-moz-linear-gradient(to bottom, red, blue)", "-moz-linear-gradient(to left, red, blue)", "-moz-linear-gradient(to right, red, blue)", "-moz-linear-gradient(to top left, red, blue)", "-moz-linear-gradient(to top right, red, blue)", "-moz-linear-gradient(to bottom left, red, blue)", "-moz-linear-gradient(to bottom right, red, blue)", "-moz-linear-gradient(to left top, red, blue)", "-moz-linear-gradient(to left bottom, red, blue)", "-moz-linear-gradient(to right top, red, blue)", "-moz-linear-gradient(to right bottom, red, blue)", "-moz-linear-gradient(top left, red, blue)", "-moz-linear-gradient(left, red, blue)", "-moz-linear-gradient(bottom, red, blue)", "-moz-linear-gradient(0, red, blue)", "-moz-linear-gradient(-33deg, red, blue)", "-moz-linear-gradient(blue calc(0px) ,green calc(25%) ,red calc(40px) ,blue calc "-moz-linear-gradient(-33deg, blue calc(-25%) ,red 40px)", "-moz-linear-gradient(10deg, blue calc(100px + -25%),red calc(40px))", "-moz-linear-gradient(10deg, blue calc(-25px),red calc(100%))", "-moz-linear-gradient(.414rad, blue calc(100px + -25px) ,green calc(100px + -25p "-moz-linear-gradient(1turn, blue calc(-25%) ,green calc(25px) ,red calc(25%),bl "-moz-radial-gradient(red, blue)", "-moz-radial-gradient(red, yellow, blue)", "-moz-radial-gradient(red 1px, yellow 20%, blue 24em, green)", "-moz-radial-gradient(red, yellow, green, blue 50%)", "-moz-radial-gradient(red -50%, yellow -25%, green, blue)", "-moz-radial-gradient(red -99px, yellow, green, blue 120%)", "-moz-radial-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))", "-moz-radial-gradient(top left, red, blue)", "-moz-radial-gradient(20% bottom, red, blue)", "-moz-radial-gradient(center 20%, red, blue)", "-moz-radial-gradient(left 35px, red, blue)", "-moz-radial-gradient(10% 10em, red, blue)", "-moz-radial-gradient(44px top, red, blue)", "-moz-radial-gradient(0 0, red, blue)", "-moz-radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)", "-moz-radial-gradient(cover, red, blue)", "-moz-radial-gradient(cover circle, red, blue)", "-moz-radial-gradient(contain, red, blue)", "-moz-radial-gradient(contain ellipse, red, blue)", "-moz-radial-gradient(circle, red, blue)", "-moz-radial-gradient(ellipse closest-corner, red, blue)", "-moz-radial-gradient(farthest-side circle, red, blue)", "-moz-radial-gradient(top left, cover, red, blue)", "-moz-radial-gradient(15% 20%, circle, red, blue)", "-moz-radial-gradient(45px, ellipse closest-corner, red, blue)", "-moz-radial-gradient(45px, farthest-side circle, red, blue)", "-moz-repeating-linear-gradient(red, blue)", "-moz-repeating-linear-gradient(red, yellow, blue)", "-moz-repeating-linear-gradient(red 1px, yellow 20%, blue 24em, green)", "-moz-repeating-linear-gradient(red, yellow, green, blue 50%)", "-moz-repeating-linear-gradient(red -50%, yellow -25%, green, blue)", "-moz-repeating-linear-gradient(red -99px, yellow, green, blue 120%)", "-moz-repeating-linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))", "-moz-repeating-linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)", "-moz-repeating-linear-gradient(to top, red, blue)", "-moz-repeating-linear-gradient(to bottom, red, blue)", "-moz-repeating-linear-gradient(to left, red, blue)", "-moz-repeating-linear-gradient(to right, red, blue)", "-moz-repeating-linear-gradient(to top left, red, blue)", "-moz-repeating-linear-gradient(to top right, red, blue)", "-moz-repeating-linear-gradient(to bottom left, red, blue)", "-moz-repeating-linear-gradient(to bottom right, red, blue)", "-moz-repeating-linear-gradient(to left top, red, blue)", "-moz-repeating-linear-gradient(to left bottom, red, blue)", "-moz-repeating-linear-gradient(to right top, red, blue)", "-moz-repeating-linear-gradient(to right bottom, red, blue)", "-moz-repeating-linear-gradient(top left, red, blue)", "-moz-repeating-radial-gradient(red, blue)", "-moz-repeating-radial-gradient(red, yellow, blue)", "-moz-repeating-radial-gradient(red 1px, yellow 20%, blue 24em, green)", "-moz-repeating-radial-gradient(red, yellow, green, blue 50%)", "-moz-repeating-radial-gradient(red -50%, yellow -25%, green, blue)", "-moz-repeating-radial-gradient(red -99px, yellow, green, blue 120%)", "-moz-repeating-radial-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))", "-moz-repeating-radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)", "-moz-repeating-radial-gradient(farthest-corner, red, blue)", "-moz-repeating-radial-gradient(circle, red, blue)", "-moz-repeating-radial-gradient(ellipse closest-corner, red, blue)", "-moz-radial-gradient(calc(25%) top, red, blue)", "-moz-radial-gradient(left calc(25%), red, blue)", "-moz-radial-gradient(calc(25px) top, red, blue)", "-moz-radial-gradient(left calc(25px), red, blue)", "-moz-radial-gradient(calc(-25%) top, red, blue)", "-moz-radial-gradient(left calc(-25%), red, blue)", "-moz-radial-gradient(calc(-25px) top, red, blue)", "-moz-radial-gradient(left calc(-25px), red, blue)", "-moz-radial-gradient(calc(100px + -25%) top, red, blue)", "-moz-radial-gradient(left calc(100px + -25%), red, blue)", "-moz-radial-gradient(calc(100px + -25px) top, red, blue)", "-moz-radial-gradient(left calc(100px + -25px), red, blue)" ); invalidNonUrlImageValues.push( // The entries in this block used to be valid with the older more-complex // -moz prefixed gradient syntax, but we've since simplified the syntax for // consistency with -webkit prefixed gradients, in a way that makes these // invalid now. "-moz-linear-gradient(center 0%, red, blue)", "-moz-linear-gradient(50% top, red, blue)", "-moz-linear-gradient(50% 0%, red, blue)", "-moz-linear-gradient(0 0, red, blue)", "-moz-linear-gradient(20% bottom, red, blue)", "-moz-linear-gradient(center 20%, red, blue)", "-moz-linear-gradient(left 35px, red, blue)", "-moz-linear-gradient(10% 10em, red, blue)", "-moz-linear-gradient(44px top, red, blue)", "-moz-linear-gradient(0px, red, blue)", "-moz-linear-gradient(top left 45deg, red, blue)", "-moz-linear-gradient(20% bottom -300deg, red, blue)", "-moz-linear-gradient(center 20% 1.95929rad, red, blue)", "-moz-linear-gradient(left 35px 30grad, red, blue)", "-moz-linear-gradient(left 35px 0.1turn, red, blue)", "-moz-linear-gradient(10% 10em 99999deg, red, blue)", "-moz-linear-gradient(44px top -33deg, red, blue)", "-moz-linear-gradient(30grad left 35px, red, blue)", "-moz-linear-gradient(10deg 20px, red, blue)", "-moz-linear-gradient(1turn 20px, red, blue)", "-moz-linear-gradient(.414rad bottom, red, blue)", "-moz-radial-gradient(top left 45deg, red, blue)", "-moz-radial-gradient(20% bottom -300deg, red, blue)", "-moz-radial-gradient(center 20% 1.95929rad, red, blue)", "-moz-radial-gradient(left 35px 30grad, red, blue)", "-moz-radial-gradient(10% 10em 99999deg, red, blue)", "-moz-radial-gradient(44px top -33deg, red, blue)", "-moz-radial-gradient(-33deg, red, blue)", "-moz-radial-gradient(30grad left 35px, red, blue)", "-moz-radial-gradient(10deg 20px, red, blue)", "-moz-radial-gradient(.414rad bottom, red, blue)", "-moz-radial-gradient(99deg, cover, red, blue)", "-moz-radial-gradient(-1.2345rad, circle, red, blue)", "-moz-radial-gradient(399grad, ellipse closest-corner, red, blue)", "-moz-radial-gradient(399grad, farthest-side circle, red, blue)", "-moz-radial-gradient(top left 99deg, cover, red, blue)", "-moz-radial-gradient(15% 20% -1.2345rad, circle, red, blue)", "-moz-radial-gradient(45px 399grad, ellipse closest-corner, red, blue)", "-moz-radial-gradient(45px 399grad, farthest-side circle, red, blue)", "-moz-repeating-linear-gradient(0 0, red, blue)", "-moz-repeating-linear-gradient(20% bottom, red, blue)", "-moz-repeating-linear-gradient(center 20%, red, blue)", "-moz-repeating-linear-gradient(left 35px, red, blue)", "-moz-repeating-linear-gradient(10% 10em, red, blue)", "-moz-repeating-linear-gradient(44px top, red, blue)", "-moz-repeating-linear-gradient(top left 45deg, red, blue)", "-moz-repeating-linear-gradient(20% bottom -300deg, red, blue)", "-moz-repeating-linear-gradient(center 20% 1.95929rad, red, blue)", "-moz-repeating-linear-gradient(left 35px 30grad, red, blue)", "-moz-repeating-linear-gradient(10% 10em 99999deg, red, blue)", "-moz-repeating-linear-gradient(44px top -33deg, red, blue)", "-moz-repeating-linear-gradient(30grad left 35px, red, blue)", "-moz-repeating-linear-gradient(10deg 20px, red, blue)", "-moz-repeating-linear-gradient(.414rad bottom, red, blue)", /* Negative radii */ "-moz-radial-gradient(40%, -100px -10%, red, blue)", /* no quirks mode colors */ "-moz-radial-gradient(10% bottom, ffffff, black) scroll no-repeat", /* no quirks mode lengths */ "-moz-linear-gradient(10 10px -45deg, red, blue) repeat", "-moz-linear-gradient(10px 10 -45deg, red, blue) repeat", /* Unitless 0 is invalid as an <angle> */ "-moz-linear-gradient(top left 0, red, blue)", "-moz-linear-gradient(5px 5px 0, red, blue)", /* There must be a comma between gradient-line (e.g. <angle>) and colors */ "-moz-linear-gradient(30deg red, blue)", "-moz-linear-gradient(5px 5px 30deg red, blue)", "-moz-linear-gradient(5px 5px red, blue)", "-moz-linear-gradient(top left 30deg red, blue)", /* Old syntax */ "-moz-linear-gradient(10px 10px, 20px, 30px 30px, 40px, from(blue), to(red))", "-moz-radial-gradient(20px 20px, 10px 10px, from(green), to(#ff00ff))", "-moz-radial-gradient(10px 10px, 20%, 40px 40px, 10px, from(green), to(#ff00ff)) "-moz-linear-gradient(10px, 20px, 30px, 40px, color-stop(0.5, #00ccff))", "-moz-linear-gradient(20px 20px, from(blue), to(red))", "-moz-linear-gradient(40px 40px, 10px 10px, from(blue) to(red) color-stop(10%, f "-moz-linear-gradient(20px 20px 30px, 10px 10px, from(red), to(#ff0000))", "-moz-radial-gradient(left top, center, 20px 20px, 10px, from(blue), to(red))", "-moz-linear-gradient(left left, top top, from(blue))", "-moz-linear-gradient(inherit, 10px 10px, from(blue))", /* New syntax */ "-moz-linear-gradient(10px 10px, 20px, 30px 30px, 40px, blue 0, red 100%)", "-moz-radial-gradient(20px 20px, 10px 10px, from(green), to(#ff00ff))", "-moz-radial-gradient(10px 10px, 20%, 40px 40px, 10px, from(green), to(#ff00ff)) "-moz-linear-gradient(10px, 20px, 30px, 40px, #00ccff 50%)", "-moz-linear-gradient(40px 40px, 10px 10px, blue 0 fuchsia 10% red 100%)", "-moz-linear-gradient(20px 20px 30px, 10px 10px, red 0, #ff0000 100%)", "-moz-radial-gradient(left top, center, 20px 20px, 10px, from(blue), to(red))", "-moz-linear-gradient(left left, top top, blue 0)", "-moz-linear-gradient(inherit, 10px 10px, blue 0)", "-moz-linear-gradient(left left blue red)", "-moz-linear-gradient(left left blue, red)", "-moz-linear-gradient()", "-moz-linear-gradient(cover, red, blue)", "-moz-linear-gradient(auto, red, blue)", "-moz-linear-gradient(22 top, red, blue)", "-moz-linear-gradient(10% red blue)", "-moz-linear-gradient(10%, red blue)", "-moz-linear-gradient(10%,, red, blue)", "-moz-linear-gradient(45px, center, red, blue)", "-moz-linear-gradient(45px, center red, blue)", "-moz-radial-gradient(contain, ellipse, red, blue)", "-moz-radial-gradient(10deg contain, red, blue)", "-moz-radial-gradient(10deg, contain,, red, blue)", "-moz-radial-gradient(contain contain, red, blue)", "-moz-radial-gradient(ellipse circle, red, blue)", "-moz-radial-gradient(to top left, red, blue)", "-moz-radial-gradient(center, 10%, red, blue)", "-moz-radial-gradient(5rad, 20px, red, blue)", "-moz-radial-gradient(at top left to cover, red, blue)", "-moz-radial-gradient(at 15% 20% circle, red, blue)", "-moz-radial-gradient(to cover, red, blue)", "-moz-radial-gradient(to contain, red, blue)", "-moz-radial-gradient(to closest-side circle, red, blue)", "-moz-radial-gradient(to farthest-corner ellipse, red, blue)", "-moz-radial-gradient(ellipse at 45px closest-corner, red, blue)", "-moz-radial-gradient(circle at 45px farthest-side, red, blue)", "-moz-radial-gradient(ellipse 45px, closest-side, red, blue)", "-moz-radial-gradient(circle 45px, farthest-corner, red, blue)", "-moz-radial-gradient(ellipse, ellipse closest-side, red, blue)", "-moz-radial-gradient(circle, circle farthest-corner, red, blue)", "-moz-radial-gradient(99deg to farthest-corner, red, blue)", "-moz-radial-gradient(-1.2345rad circle, red, blue)", "-moz-radial-gradient(ellipse 399grad to closest-corner, red, blue)", "-moz-radial-gradient(circle 399grad to farthest-side, red, blue)", "-moz-radial-gradient(at top left 99deg, to farthest-corner, red, blue)", "-moz-radial-gradient(circle at 15% 20% -1.2345rad, red, blue)", "-moz-radial-gradient(to top left at 30% 40%, red, blue)", "-moz-radial-gradient(ellipse at 45px 399grad, to closest-corner, red, blue)", "-moz-radial-gradient(at 45px 399grad to farthest-side circle, red, blue)", "-moz-radial-gradient(to 50%, red, blue)", "-moz-radial-gradient(circle to 50%, red, blue)", "-moz-radial-gradient(circle to 43px 43px, red, blue)", "-moz-radial-gradient(circle to 50% 50%, red, blue)", "-moz-radial-gradient(circle to 43px 50%, red, blue)", "-moz-radial-gradient(circle to 50% 43px, red, blue)", "-moz-radial-gradient(ellipse to 43px, red, blue)", "-moz-radial-gradient(ellipse to 50%, red, blue)", "-moz-linear-gradient(to 0 0, red, blue)", "-moz-linear-gradient(to 20% bottom, red, blue)", "-moz-linear-gradient(to center 20%, red, blue)", "-moz-linear-gradient(to left 35px, red, blue)", "-moz-linear-gradient(to 10% 10em, red, blue)", "-moz-linear-gradient(to 44px top, red, blue)", "-moz-linear-gradient(to top left 45deg, red, blue)", "-moz-linear-gradient(to 20% bottom -300deg, red, blue)", "-moz-linear-gradient(to center 20% 1.95929rad, red, blue)", "-moz-linear-gradient(to left 35px 30grad, red, blue)", "-moz-linear-gradient(to 10% 10em 99999deg, red, blue)", "-moz-linear-gradient(to 44px top -33deg, red, blue)", "-moz-linear-gradient(to -33deg, red, blue)", "-moz-linear-gradient(to 30grad left 35px, red, blue)", "-moz-linear-gradient(to 10deg 20px, red, blue)", "-moz-linear-gradient(to .414rad bottom, red, blue)", "-moz-linear-gradient(to top top, red, blue)", "-moz-linear-gradient(to bottom bottom, red, blue)", "-moz-linear-gradient(to left left, red, blue)", "-moz-linear-gradient(to right right, red, blue)", "-moz-repeating-linear-gradient(10px 10px, 20px, 30px 30px, 40px, blue 0, red 10 "-moz-repeating-radial-gradient(20px 20px, 10px 10px, from(green), to(#ff00ff))" "-moz-repeating-radial-gradient(10px 10px, 20%, 40px 40px, 10px, from(green), to "-moz-repeating-linear-gradient(10px, 20px, 30px, 40px, #00ccff 50%)", "-moz-repeating-linear-gradient(40px 40px, 10px 10px, blue 0 fuchsia 10% red 100 "-moz-repeating-linear-gradient(20px 20px 30px, 10px 10px, red 0, #ff0000 100%)" "-moz-repeating-radial-gradient(left top, center, 20px 20px, 10px, from(blue), t "-moz-repeating-linear-gradient(left left, top top, blue 0)", "-moz-repeating-linear-gradient(inherit, 10px 10px, blue 0)", "-moz-repeating-linear-gradient(left left blue red)", "-moz-repeating-linear-gradient()", "-moz-repeating-linear-gradient(to 0 0, red, blue)", "-moz-repeating-linear-gradient(to 20% bottom, red, blue)", "-moz-repeating-linear-gradient(to center 20%, red, blue)", "-moz-repeating-linear-gradient(to left 35px, red, blue)", "-moz-repeating-linear-gradient(to 10% 10em, red, blue)", "-moz-repeating-linear-gradient(to 44px top, red, blue)", "-moz-repeating-linear-gradient(to top left 45deg, red, blue)", "-moz-repeating-linear-gradient(to 20% bottom -300deg, red, blue)", "-moz-repeating-linear-gradient(to center 20% 1.95929rad, red, blue)", "-moz-repeating-linear-gradient(to left 35px 30grad, red, blue)", "-moz-repeating-linear-gradient(to 10% 10em 99999deg, red, blue)", "-moz-repeating-linear-gradient(to 44px top -33deg, red, blue)", "-moz-repeating-linear-gradient(to -33deg, red, blue)", "-moz-repeating-linear-gradient(to 30grad left 35px, red, blue)", "-moz-repeating-linear-gradient(to 10deg 20px, red, blue)", "-moz-repeating-linear-gradient(to .414rad bottom, red, blue)", "-moz-repeating-linear-gradient(to top top, red, blue)", "-moz-repeating-linear-gradient(to bottom bottom, red, blue)", "-moz-repeating-linear-gradient(to left left, red, blue)", "-moz-repeating-linear-gradient(to right right, red, blue)", "-moz-repeating-radial-gradient(to top left at 30% 40%, red, blue)", "-moz-repeating-radial-gradient(ellipse at 45px closest-corner, red, blue)", "-moz-repeating-radial-gradient(circle at 45px farthest-side, red, blue)", /* Valid only when unprefixed */ "-moz-radial-gradient(at top left, red, blue)", "-moz-radial-gradient(at 20% bottom, red, blue)", "-moz-radial-gradient(at center 20%, red, blue)", "-moz-radial-gradient(at left 35px, red, blue)", "-moz-radial-gradient(at 10% 10em, red, blue)", "-moz-radial-gradient(at 44px top, red, blue)", "-moz-radial-gradient(at 0 0, red, blue)", "-moz-radial-gradient(circle 43px, red, blue)", "-moz-radial-gradient(ellipse 43px 43px, red, blue)", "-moz-radial-gradient(ellipse 50% 50%, red, blue)", "-moz-radial-gradient(ellipse 43px 50%, red, blue)", "-moz-radial-gradient(ellipse 50% 43px, red, blue)", "-moz-radial-gradient(farthest-corner at top left, red, blue)", "-moz-radial-gradient(ellipse closest-corner at 45px, red, blue)", "-moz-radial-gradient(circle farthest-side at 45px, red, blue)", "-moz-radial-gradient(closest-side ellipse at 50%, red, blue)", "-moz-radial-gradient(farthest-corner circle at 4em, red, blue)", "-moz-radial-gradient(30% 40% at top left, red, blue)", "-moz-radial-gradient(50px 60px at 15% 20%, red, blue)", "-moz-radial-gradient(7em 8em at 45px, red, blue)" ); } const pathValues = { other_values: [ "path('M 10 10 20 20 H 90 V 90 Z')", "path('M10 10 20,20H90V90Z')", "path('M 10 10 C 20 20, 40 20, 50 10')", "path('M 10 80 C 40 10, 65 10, 95 80 S 1.5e2 150, 180 80')", "path('M 10 80 Q 95 10 180 80')", "path('M 10 80 Q 52.5 10, 95 80 T 180 80')", "path('M 80 80 A 45 45, 0, 0, 0, 1.25e2 1.25e2 L 125 80 Z')", "path('M100-200h20z')", "path('M10,10L20.6.5z')", ], invalid_values: [ "path()", "path(a)", "path('M 10 Z')", "path('M 10-10 20')", "path('M 10 10 C 20 20 40 20')", ], }; var gCSSProperties = { animation: { domProp: "animation", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, applies_to_marker: true, subproperties: [ --> -------------------- --> maximum size reached --> --------------------
¤ Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.0.41Bemerkung: (vorverarbeitet) ¤*Bot Zugriff |
|
||||||||||||||
2026-04-04