diff --git a/.eslintrc.js b/.eslintrc.js index 0dc9da6b1ac0..9ca7e9cc8480 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -45,7 +45,6 @@ module.exports = { "overrides": [{ "files": [ "devtools/**", - "layout/**", "media/**", "memory/**", "mfbt/**", diff --git a/.prettierignore b/.prettierignore index 76b1ca17b6fd..b3ff6d6161db 100644 --- a/.prettierignore +++ b/.prettierignore @@ -40,7 +40,6 @@ toolkit/components/telemetry/datareporting-prefs.js toolkit/components/telemetry/healthreport-prefs.js # Ignore all top-level directories for now. -layout/** media/** memory/** mfbt/** diff --git a/layout/base/tests/browser_bug617076.js b/layout/base/tests/browser_bug617076.js index 4bb2c46591f8..ff8020d8c807 100644 --- a/layout/base/tests/browser_bug617076.js +++ b/layout/base/tests/browser_bug617076.js @@ -11,7 +11,10 @@ add_task(async function test() { // Open the test tab - let testTab = await BrowserTestUtils.openNewForegroundTab(gBrowser, "about:addons"); + let testTab = await BrowserTestUtils.openNewForegroundTab( + gBrowser, + "about:addons" + ); // insert button into test page content await ContentTask.spawn(gBrowser.selectedBrowser, null, async function() { @@ -24,7 +27,11 @@ add_task(async function test() { }); // open a second tab and select it - let tab2 = await BrowserTestUtils.openNewForegroundTab(gBrowser, "about:blank", true); + let tab2 = await BrowserTestUtils.openNewForegroundTab( + gBrowser, + "about:blank", + true + ); gBrowser.selectedTab = tab2; // Select the testTab then perform mouse events on inserted button @@ -32,9 +39,27 @@ add_task(async function test() { let browser = gBrowser.selectedBrowser; EventUtils.disableNonTestMouseEvents(true); try { - await BrowserTestUtils.synthesizeMouse("#test-button", 1, 1, { type: "mouseover" }, browser); - await BrowserTestUtils.synthesizeMouse("#test-button", 2, 6, { type: "mousemove" }, browser); - await BrowserTestUtils.synthesizeMouse("#test-button", 2, 4, { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#test-button", + 1, + 1, + { type: "mouseover" }, + browser + ); + await BrowserTestUtils.synthesizeMouse( + "#test-button", + 2, + 6, + { type: "mousemove" }, + browser + ); + await BrowserTestUtils.synthesizeMouse( + "#test-button", + 2, + 4, + { type: "mousemove" }, + browser + ); } finally { EventUtils.disableNonTestMouseEvents(false); } diff --git a/layout/base/tests/browser_disableDialogs_onbeforeunload.js b/layout/base/tests/browser_disableDialogs_onbeforeunload.js index e301e2700ab1..0af198aa1570 100644 --- a/layout/base/tests/browser_disableDialogs_onbeforeunload.js +++ b/layout/base/tests/browser_disableDialogs_onbeforeunload.js @@ -1,15 +1,22 @@ function pageScript() { - window.addEventListener("beforeunload", function (event) { - var str = "Some text that causes the beforeunload dialog to be shown"; - event.returnValue = str; - return str; - }, true); + window.addEventListener( + "beforeunload", + function(event) { + var str = "Some text that causes the beforeunload dialog to be shown"; + event.returnValue = str; + return str; + }, + true + ); } -SpecialPowers.pushPrefEnv({"set": [["dom.require_user_interaction_for_beforeunload", false]]}); +SpecialPowers.pushPrefEnv({ + set: [["dom.require_user_interaction_for_beforeunload", false]], +}); const PAGE_URL = - "data:text/html," + encodeURIComponent(""); + "data:text/html," + + encodeURIComponent(""); add_task(async function enableDialogs() { // The onbeforeunload dialog should appear. @@ -34,22 +41,27 @@ add_task(async function disableDialogs() { async function openPage(enableDialogs) { // Open about:blank in a new tab. - await BrowserTestUtils.withNewTab({ gBrowser, url: "about:blank" }, async function(browser) { - // Load the content script in the frame. - let methodName = enableDialogs ? "enableDialogs" : "disableDialogs"; - await ContentTask.spawn(browser, methodName, async function(name) { - const {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm"); - Services.obs.addObserver(doc => { - if (content && doc == content.document) { - content.windowUtils[name](); - } - }, "document-element-inserted"); - }); - // Load the page. - await BrowserTestUtils.loadURI(browser, PAGE_URL); - await BrowserTestUtils.browserLoaded(browser); - // And then navigate away. - await BrowserTestUtils.loadURI(browser, "http://example.com/"); - await BrowserTestUtils.browserLoaded(browser); - }); + await BrowserTestUtils.withNewTab( + { gBrowser, url: "about:blank" }, + async function(browser) { + // Load the content script in the frame. + let methodName = enableDialogs ? "enableDialogs" : "disableDialogs"; + await ContentTask.spawn(browser, methodName, async function(name) { + const { Services } = ChromeUtils.import( + "resource://gre/modules/Services.jsm" + ); + Services.obs.addObserver(doc => { + if (content && doc == content.document) { + content.windowUtils[name](); + } + }, "document-element-inserted"); + }); + // Load the page. + await BrowserTestUtils.loadURI(browser, PAGE_URL); + await BrowserTestUtils.browserLoaded(browser); + // And then navigate away. + await BrowserTestUtils.loadURI(browser, "http://example.com/"); + await BrowserTestUtils.browserLoaded(browser); + } + ); } diff --git a/layout/base/tests/browser_onbeforeunload_only_after_interaction.js b/layout/base/tests/browser_onbeforeunload_only_after_interaction.js index a3c111b7fbd2..00cd9b1955ea 100644 --- a/layout/base/tests/browser_onbeforeunload_only_after_interaction.js +++ b/layout/base/tests/browser_onbeforeunload_only_after_interaction.js @@ -1,15 +1,22 @@ function pageScript() { - window.addEventListener("beforeunload", function (event) { - var str = "Some text that causes the beforeunload dialog to be shown"; - event.returnValue = str; - return str; - }, true); + window.addEventListener( + "beforeunload", + function(event) { + var str = "Some text that causes the beforeunload dialog to be shown"; + event.returnValue = str; + return str; + }, + true + ); } -SpecialPowers.pushPrefEnv({"set": [["dom.require_user_interaction_for_beforeunload", true]]}); +SpecialPowers.pushPrefEnv({ + set: [["dom.require_user_interaction_for_beforeunload", true]], +}); const PAGE_URL = - "data:text/html," + encodeURIComponent(""); + "data:text/html," + + encodeURIComponent(""); add_task(async function doClick() { // The onbeforeunload dialog should appear. @@ -34,20 +41,27 @@ add_task(async function noClick() { async function openPage(shouldClick) { // Open about:blank in a new tab. - await BrowserTestUtils.withNewTab({ gBrowser, url: "about:blank" }, async function(browser) { - // Load the page. - await BrowserTestUtils.loadURI(browser, PAGE_URL); - await BrowserTestUtils.browserLoaded(browser); + await BrowserTestUtils.withNewTab( + { gBrowser, url: "about:blank" }, + async function(browser) { + // Load the page. + await BrowserTestUtils.loadURI(browser, PAGE_URL); + await BrowserTestUtils.browserLoaded(browser); - if (shouldClick) { - await BrowserTestUtils.synthesizeMouse("body", 2, 2, {}, browser); + if (shouldClick) { + await BrowserTestUtils.synthesizeMouse("body", 2, 2, {}, browser); + } + let hasInteractedWith = await ContentTask.spawn(browser, "", function() { + return content.document.userHasInteracted; + }); + is( + shouldClick, + hasInteractedWith, + "Click should update document interactivity state" + ); + // And then navigate away. + await BrowserTestUtils.loadURI(browser, "http://example.com/"); + await BrowserTestUtils.browserLoaded(browser); } - let hasInteractedWith = await ContentTask.spawn(browser, "", function() { - return content.document.userHasInteracted; - }); - is(shouldClick, hasInteractedWith, "Click should update document interactivity state"); - // And then navigate away. - await BrowserTestUtils.loadURI(browser, "http://example.com/"); - await BrowserTestUtils.browserLoaded(browser); - }); + ); } diff --git a/layout/base/tests/browser_onbeforeunload_only_after_interaction_in_frame.js b/layout/base/tests/browser_onbeforeunload_only_after_interaction_in_frame.js index 4c43e7b662de..95620e46d42f 100644 --- a/layout/base/tests/browser_onbeforeunload_only_after_interaction_in_frame.js +++ b/layout/base/tests/browser_onbeforeunload_only_after_interaction_in_frame.js @@ -1,19 +1,34 @@ function pageScript() { - window.addEventListener("beforeunload", function (event) { - var str = "Some text that causes the beforeunload dialog to be shown"; - event.returnValue = str; - return str; - }, true); + window.addEventListener( + "beforeunload", + function(event) { + var str = "Some text that causes the beforeunload dialog to be shown"; + event.returnValue = str; + return str; + }, + true + ); } -SpecialPowers.pushPrefEnv({"set": [["dom.require_user_interaction_for_beforeunload", true], - ["security.allow_eval_with_system_principal", true]]}); +SpecialPowers.pushPrefEnv({ + set: [ + ["dom.require_user_interaction_for_beforeunload", true], + ["security.allow_eval_with_system_principal", true], + ], +}); const FRAME_URL = "data:text/html," + encodeURIComponent("Just a frame"); const PAGE_URL = - "data:text/html," + encodeURIComponent(""); + "data:text/html," + + encodeURIComponent( + "" + ); add_task(async function doClick() { // The onbeforeunload dialog should appear. @@ -38,23 +53,43 @@ add_task(async function noClick() { async function openPage(shouldClick) { // Open about:blank in a new tab. - await BrowserTestUtils.withNewTab({ gBrowser, url: "about:blank" }, async function(browser) { - // Load the page. - await BrowserTestUtils.loadURI(browser, PAGE_URL); - await BrowserTestUtils.browserLoaded(browser); + await BrowserTestUtils.withNewTab( + { gBrowser, url: "about:blank" }, + async function(browser) { + // Load the page. + await BrowserTestUtils.loadURI(browser, PAGE_URL); + await BrowserTestUtils.browserLoaded(browser); - if (shouldClick) { - await BrowserTestUtils.synthesizeMouse(function() { - return content.frames[0].document.body; - }, 2, 2, {}, browser); + if (shouldClick) { + await BrowserTestUtils.synthesizeMouse( + function() { + return content.frames[0].document.body; + }, + 2, + 2, + {}, + browser + ); + } + let hasInteractedWith = await ContentTask.spawn(browser, "", function() { + return [ + content.document.userHasInteracted, + content.frames[0].document.userHasInteracted, + ]; + }); + is( + shouldClick, + hasInteractedWith[0], + "Click should update parent interactivity state" + ); + is( + shouldClick, + hasInteractedWith[1], + "Click should update frame interactivity state" + ); + // And then navigate away. + await BrowserTestUtils.loadURI(browser, "http://example.com/"); + await BrowserTestUtils.browserLoaded(browser); } - let hasInteractedWith = await ContentTask.spawn(browser, "", function() { - return [content.document.userHasInteracted, content.frames[0].document.userHasInteracted]; - }); - is(shouldClick, hasInteractedWith[0], "Click should update parent interactivity state"); - is(shouldClick, hasInteractedWith[1], "Click should update frame interactivity state"); - // And then navigate away. - await BrowserTestUtils.loadURI(browser, "http://example.com/"); - await BrowserTestUtils.browserLoaded(browser); - }); + ); } diff --git a/layout/base/tests/selection-utils.js b/layout/base/tests/selection-utils.js index a14ff0d8170c..bcd5f7ad142b 100644 --- a/layout/base/tests/selection-utils.js +++ b/layout/base/tests/selection-utils.js @@ -1,20 +1,24 @@ // -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; js-indent-level: 2 -*- // vim: set ts=2 sw=2 et tw=78: -function clearSelection(w) -{ +function clearSelection(w) { var sel = (w ? w : window).getSelection(); sel.removeAllRanges(); } -function getNode(e, index) { - if (!(typeof index==='number')) return index; - if (index >= 0) return e.childNodes[index]; - while (++index != 0) e = e.parentNode; +function getNode(e, index) { + if (!(typeof index === "number")) { + return index; + } + if (index >= 0) { + return e.childNodes[index]; + } + while (++index != 0) { + e = e.parentNode; + } return e; } -function dragSelectPointsWithData() -{ +function dragSelectPointsWithData() { var event = arguments[0]; var e = arguments[1]; var x1 = arguments[2]; @@ -22,111 +26,111 @@ function dragSelectPointsWithData() var x2 = arguments[4]; var y2 = arguments[5]; dir = x2 > x1 ? 1 : -1; - event['type'] = "mousedown"; + event["type"] = "mousedown"; synthesizeMouse(e, x1, y1, event); - event['type'] = "mousemove"; + event["type"] = "mousemove"; synthesizeMouse(e, x1 + dir, y1, event); - for (var i = 6; i < arguments.length; ++i) + for (var i = 6; i < arguments.length; ++i) { synthesizeMouse(e, arguments[i], y1, event); + } synthesizeMouse(e, x2 - dir, y2, event); - event['type'] = "mouseup"; + event["type"] = "mouseup"; synthesizeMouse(e, x2, y2, event); } -function dragSelectPoints() -{ +function dragSelectPoints() { var args = Array.prototype.slice.call(arguments); dragSelectPointsWithData.apply(this, [{}].concat(args)); } -function dragSelect() -{ +function dragSelect() { var args = Array.prototype.slice.call(arguments); var e = args.shift(); var x1 = args.shift(); var x2 = args.shift(); - dragSelectPointsWithData.apply(this, [{},e,x1,5,x2,5].concat(args)); + dragSelectPointsWithData.apply(this, [{}, e, x1, 5, x2, 5].concat(args)); } -function accelDragSelect() -{ +function accelDragSelect() { var args = Array.prototype.slice.call(arguments); var e = args.shift(); var x1 = args.shift(); var x2 = args.shift(); var y = args.length != 0 ? args.shift() : 5; - dragSelectPointsWithData.apply(this, [{accelKey: true},e,x1,y,x2,y].concat(args)); + dragSelectPointsWithData.apply( + this, + [{ accelKey: true }, e, x1, y, x2, y].concat(args) + ); } -function shiftClick(e, x, y) -{ - function pos(p) { return (typeof p === "undefined") ? 5 : p } +function shiftClick(e, x, y) { + function pos(p) { + return typeof p === "undefined" ? 5 : p; + } synthesizeMouse(e, pos(x), pos(y), { shiftKey: true }); } -function keyRepeat(key,data,repeat) -{ - while (repeat-- > 0) +function keyRepeat(key, data, repeat) { + while (repeat-- > 0) { synthesizeKey(key, data); + } } -function keyRight(data) -{ +function keyRight(data) { var repeat = arguments.length > 1 ? arguments[1] : 1; keyRepeat("VK_RIGHT", data, repeat); } -function keyLeft(data) -{ +function keyLeft(data) { var repeat = arguments.length > 1 ? arguments[1] : 1; keyRepeat("VK_LEFT", data, repeat); } -function shiftAccelClick(e, x, y) -{ - function pos(p) { return (typeof p === "undefined") ? 5 : p } +function shiftAccelClick(e, x, y) { + function pos(p) { + return typeof p === "undefined" ? 5 : p; + } synthesizeMouse(e, pos(x), pos(y), { shiftKey: true, accelKey: true }); } -function accelClick(e, x, y) -{ - function pos(p) { return (typeof p === "undefined") ? 5 : p } +function accelClick(e, x, y) { + function pos(p) { + return typeof p === "undefined" ? 5 : p; + } synthesizeMouse(e, pos(x), pos(y), { accelKey: true }); } -function addChildRanges(arr, e) -{ +function addChildRanges(arr, e) { var sel = window.getSelection(); for (i = 0; i < arr.length; ++i) { var data = arr[i]; - var r = new Range() + var r = new Range(); r.setStart(getNode(e, data[0]), data[1]); r.setEnd(getNode(e, data[2]), data[3]); sel.addRange(r); } } -function checkText(text, e) -{ +function checkText(text, e) { var sel = window.getSelection(); - is(sel.toString(), text, e.id + ": selected text") + is(sel.toString(), text, e.id + ": selected text"); } -function checkRangeText(text, index) -{ +function checkRangeText(text, index) { var r = window.getSelection().getRangeAt(index); - is(r.toString(), text, e.id + ": range["+index+"].toString()") + is(r.toString(), text, e.id + ": range[" + index + "].toString()"); } -function checkRangeCount(n, e) -{ +function checkRangeCount(n, e) { var sel = window.getSelection(); is(sel.rangeCount, n, e.id + ": Selection range count"); } function checkRangePoints(i, expected, e) { var sel = window.getSelection(); - if (i >= sel.rangeCount) return; + if (i >= sel.rangeCount) { + return; + } var r = sel.getRangeAt(i); is(r.startContainer, expected[0], e.id + ": range.startContainer"); is(r.startOffset, expected[1], e.id + ": range.startOffset"); @@ -136,16 +140,25 @@ function checkRangePoints(i, expected, e) { function checkRange(i, expected, e) { var sel = window.getSelection(); - if (i >= sel.rangeCount) return; + if (i >= sel.rangeCount) { + return; + } var r = sel.getRangeAt(i); - is(r.startContainer, getNode(e, expected[0]), e.id + ": range["+i+"].startContainer"); - is(r.startOffset, expected[1], e.id + ": range["+i+"].startOffset"); - is(r.endContainer, getNode(e, expected[2]), e.id + ": range["+i+"].endContainer"); - is(r.endOffset, expected[3], e.id + ": range["+i+"].endOffset"); + is( + r.startContainer, + getNode(e, expected[0]), + e.id + ": range[" + i + "].startContainer" + ); + is(r.startOffset, expected[1], e.id + ": range[" + i + "].startOffset"); + is( + r.endContainer, + getNode(e, expected[2]), + e.id + ": range[" + i + "].endContainer" + ); + is(r.endOffset, expected[3], e.id + ": range[" + i + "].endOffset"); } -function checkRanges(arr, e) -{ +function checkRanges(arr, e) { checkRangeCount(arr.length, e); for (i = 0; i < arr.length; ++i) { var expected = arr[i]; diff --git a/layout/generic/test/plugin_clipping_lib.js b/layout/generic/test/plugin_clipping_lib.js index ee6deedb9187..df367d801db0 100644 --- a/layout/generic/test/plugin_clipping_lib.js +++ b/layout/generic/test/plugin_clipping_lib.js @@ -1,163 +1,191 @@ var checkClipRegion, checkClipRegionForFrame, checkClipRegionNoBounds; (function() { -var windowFrameX, windowFrameY; + var windowFrameX, windowFrameY; -// Import test API -var is = window.opener.is; -var ok = window.opener.ok; -var todo = window.opener.todo; -var finish = window.opener.SimpleTest.finish; -window.onerror = function (event) { window.opener.onerror(event); window.close(); }; + // Import test API + var is = window.opener.is; + var ok = window.opener.ok; + var todo = window.opener.todo; + var finish = window.opener.SimpleTest.finish; + window.onerror = function(event) { + window.opener.onerror(event); + window.close(); + }; -function dumpRect(r) { - return "{" + r.join(",") + "}"; -} - -function dumpRegion(rects) { - var s = []; - for (var i = 0; i < rects.length; ++i) { - var r = rects[i]; - s.push(dumpRect(r)); + function dumpRect(r) { + return "{" + r.join(",") + "}"; } - return s.join(", "); -} -function generateSpan(coords) { - coords.sort(function(a,b) { return a - b; }); - var result = [coords[0]]; - for (var i = 1; i < coords.length; ++i) { - if (coords[i] != coords[i - 1]) { - result.push(coords[i]); + function dumpRegion(rects) { + var s = []; + for (var i = 0; i < rects.length; ++i) { + var r = rects[i]; + s.push(dumpRect(r)); } + return s.join(", "); } - return result; -} -function containsRect(r1, r2) { - return r1[0] <= r2[0] && r1[2] >= r2[2] && - r1[1] <= r2[1] && r1[3] >= r2[3]; -} + function generateSpan(coords) { + coords.sort(function(a, b) { + return a - b; + }); + var result = [coords[0]]; + for (var i = 1; i < coords.length; ++i) { + if (coords[i] != coords[i - 1]) { + result.push(coords[i]); + } + } + return result; + } -function subtractRect(r1, r2, rlist) { - var spanX = generateSpan([r1[0], r1[2], r2[0], r2[2]]); - var spanY = generateSpan([r1[1], r1[3], r2[1], r2[3]]); - for (var i = 1; i < spanX.length; ++i) { - for (var j = 1; j < spanY.length; ++j) { - var subrect = [spanX[i - 1], spanY[j - 1], spanX[i], spanY[j]]; - if (containsRect(r1, subrect) && !containsRect(r2, subrect)) { - rlist.push(subrect); + function containsRect(r1, r2) { + return r1[0] <= r2[0] && r1[2] >= r2[2] && r1[1] <= r2[1] && r1[3] >= r2[3]; + } + + function subtractRect(r1, r2, rlist) { + var spanX = generateSpan([r1[0], r1[2], r2[0], r2[2]]); + var spanY = generateSpan([r1[1], r1[3], r2[1], r2[3]]); + for (var i = 1; i < spanX.length; ++i) { + for (var j = 1; j < spanY.length; ++j) { + var subrect = [spanX[i - 1], spanY[j - 1], spanX[i], spanY[j]]; + if (containsRect(r1, subrect) && !containsRect(r2, subrect)) { + rlist.push(subrect); + } } } } -} -function regionContainsRect(rs, r) { - var rectList = [r]; - for (var i = 0; i < rs.length; ++i) { - var newList = []; - for (var j = 0; j < rectList.length; ++j) { - subtractRect(rectList[j], rs[i], newList); + function regionContainsRect(rs, r) { + var rectList = [r]; + for (var i = 0; i < rs.length; ++i) { + var newList = []; + for (var j = 0; j < rectList.length; ++j) { + subtractRect(rectList[j], rs[i], newList); + } + if (newList.length == 0) { + return true; + } + rectList = newList; } - if (newList.length == 0) - return true; - rectList = newList; - } - return false; -} - -function regionContains(r1s, r2s) { - for (var i = 0; i < r2s.length; ++i) { - if (!regionContainsRect(r1s, r2s[i])) - return false; - } - return true; -} - -function equalRegions(r1s, r2s) { - return regionContains(r1s, r2s) && regionContains(r2s, r1s); -} - -// Checks that a plugin's clip region equals the specified rectangle list. -// The rectangles are given relative to the plugin's top-left. They are in -// [left, top, right, bottom] format. -function checkClipRegionWithDoc(doc, offsetX, offsetY, id, rects, checkBounds) { - var p = doc.getElementById(id); - var bounds = p.getBoundingClientRect(); - var pX = p.getEdge(0); - var pY = p.getEdge(1); - - if (checkBounds) { - var pWidth = p.getEdge(2) - pX; - var pHeight = p.getEdge(3) - pY; - - is(pX, windowFrameX + bounds.left + offsetX, id + " plugin X"); - is(pY, windowFrameY + bounds.top + offsetY, id + " plugin Y"); - is(pWidth, bounds.width, id + " plugin width"); - is(pHeight, bounds.height, id + " plugin height"); + return false; } - // Now check clip region. 'rects' is relative to the plugin's top-left. - var clipRects = []; - var n = p.getClipRegionRectCount(); - for (var i = 0; i < n; ++i) { - // Convert the clip rect to be relative to the plugin's top-left. - clipRects[i] = [ - p.getClipRegionRectEdge(i, 0) - pX, - p.getClipRegionRectEdge(i, 1) - pY, - p.getClipRegionRectEdge(i, 2) - pX, - p.getClipRegionRectEdge(i, 3) - pY - ]; + function regionContains(r1s, r2s) { + for (var i = 0; i < r2s.length; ++i) { + if (!regionContainsRect(r1s, r2s[i])) { + return false; + } + } + return true; } - ok(equalRegions(clipRects, rects), "Matching regions for '" + id + - "': expected " + dumpRegion(rects) + ", got " + dumpRegion(clipRects)); -} - -checkClipRegion = function(id, rects) { - checkClipRegionWithDoc(document, 0, 0, id, rects, true); -} - -checkClipRegionForFrame = function(fid, id, rects) { - var f = document.getElementById(fid); - var bounds = f.getBoundingClientRect(); - checkClipRegionWithDoc(f.contentDocument, bounds.left, bounds.top, id, rects, true); -} - -checkClipRegionNoBounds = function(id, rects) { - checkClipRegionWithDoc(document, 0, 0, id, rects, false); -} - -function loaded() { - var h1 = document.getElementById("h1"); - var h2 = document.getElementById("h2"); - var hwidth = h2.screenX - h1.screenX; - if (hwidth != 100) { - // Maybe it's a DPI issue - todo(false, "Unexpected DPI?"); - finish(); - window.close(); - return; + function equalRegions(r1s, r2s) { + return regionContains(r1s, r2s) && regionContains(r2s, r1s); } - if (!document.getElementById("p1").identifierToStringTest) { - todo(false, "Test plugin not available"); - finish(); - window.close(); - return; + // Checks that a plugin's clip region equals the specified rectangle list. + // The rectangles are given relative to the plugin's top-left. They are in + // [left, top, right, bottom] format. + function checkClipRegionWithDoc( + doc, + offsetX, + offsetY, + id, + rects, + checkBounds + ) { + var p = doc.getElementById(id); + var bounds = p.getBoundingClientRect(); + var pX = p.getEdge(0); + var pY = p.getEdge(1); + + if (checkBounds) { + var pWidth = p.getEdge(2) - pX; + var pHeight = p.getEdge(3) - pY; + + is(pX, windowFrameX + bounds.left + offsetX, id + " plugin X"); + is(pY, windowFrameY + bounds.top + offsetY, id + " plugin Y"); + is(pWidth, bounds.width, id + " plugin width"); + is(pHeight, bounds.height, id + " plugin height"); + } + + // Now check clip region. 'rects' is relative to the plugin's top-left. + var clipRects = []; + var n = p.getClipRegionRectCount(); + for (var i = 0; i < n; ++i) { + // Convert the clip rect to be relative to the plugin's top-left. + clipRects[i] = [ + p.getClipRegionRectEdge(i, 0) - pX, + p.getClipRegionRectEdge(i, 1) - pY, + p.getClipRegionRectEdge(i, 2) - pX, + p.getClipRegionRectEdge(i, 3) - pY, + ]; + } + + ok( + equalRegions(clipRects, rects), + "Matching regions for '" + + id + + "': expected " + + dumpRegion(rects) + + ", got " + + dumpRegion(clipRects) + ); } - var bounds = h1.getBoundingClientRect(); - windowFrameX = h1.screenX - bounds.left - window.screenX; - windowFrameY = h1.screenY - bounds.top - window.screenY; + checkClipRegion = function(id, rects) { + checkClipRegionWithDoc(document, 0, 0, id, rects, true); + }; - // Run actual test code - runTests(); -} + checkClipRegionForFrame = function(fid, id, rects) { + var f = document.getElementById(fid); + var bounds = f.getBoundingClientRect(); + checkClipRegionWithDoc( + f.contentDocument, + bounds.left, + bounds.top, + id, + rects, + true + ); + }; -// Need to run 'loaded' after painting is unsuppressed, or we'll set clip -// regions to empty. The timeout must be non-zero on X11 so that -// gtk_container_idle_sizer runs after the GtkSocket gets the plug_window. -window.addEventListener("load", - function () { setTimeout(loaded, 1000); }); + checkClipRegionNoBounds = function(id, rects) { + checkClipRegionWithDoc(document, 0, 0, id, rects, false); + }; + + function loaded() { + var h1 = document.getElementById("h1"); + var h2 = document.getElementById("h2"); + var hwidth = h2.screenX - h1.screenX; + if (hwidth != 100) { + // Maybe it's a DPI issue + todo(false, "Unexpected DPI?"); + finish(); + window.close(); + return; + } + + if (!document.getElementById("p1").identifierToStringTest) { + todo(false, "Test plugin not available"); + finish(); + window.close(); + return; + } + + var bounds = h1.getBoundingClientRect(); + windowFrameX = h1.screenX - bounds.left - window.screenX; + windowFrameY = h1.screenY - bounds.top - window.screenY; + + // Run actual test code + runTests(); + } + + // Need to run 'loaded' after painting is unsuppressed, or we'll set clip + // regions to empty. The timeout must be non-zero on X11 so that + // gtk_container_idle_sizer runs after the GtkSocket gets the plug_window. + window.addEventListener("load", function() { + setTimeout(loaded, 1000); + }); })(); diff --git a/layout/mathml/tests/stretchy-and-large-operators.js b/layout/mathml/tests/stretchy-and-large-operators.js index 775e02840838..113363b554b0 100644 --- a/layout/mathml/tests/stretchy-and-large-operators.js +++ b/layout/mathml/tests/stretchy-and-large-operators.js @@ -1,2 +1,289 @@ // This file is automatically generated. Do not edit. -var stretchy_and_large_operators = [['\\u2194.infix: ', '\u2194','h','infix'],['\\u222E.prefix: ', '\u222E','l','prefix'],['\\u2A11.prefix: ', '\u2A11','l','prefix'],['\\u007E.infix: ', '\u007E','h','infix'],['\\u27F8.infix: ', '\u27F8','h','infix'],['\\u02CD.postfix: ', '\u02CD','h','postfix'],['\\u0028.prefix: ', '\u0028','v','prefix'],['\\u220F.prefix: ', '\u220F','l','prefix'],['\\u2225.postfix: ', '\u2225','v','postfix'],['\\u2A13.prefix: ', '\u2A13','l','prefix'],['\\u007C\u007C.infix: ', '\u007C\u007C','v','infix'],['\\u203E.postfix: ', '\u203E','h','postfix'],['\\u27EE.prefix: ', '\u27EE','v','prefix'],['\\u007C.prefix: ', '\u007C','v','prefix'],['\\u2A00.prefix: ', '\u2A00','l','prefix'],['\\u295A.infix: ', '\u295A','h','infix'],['\\u02C6.postfix: ', '\u02C6','h','postfix'],['\\u21E2.infix: ', '\u21E2','h','infix'],['\\u2961.infix: ', '\u2961','v','infix'],['\\u2998.postfix: ', '\u2998','v','postfix'],['\\u2197.infix: ', '\u2197','v','infix'],['\\u21BE.infix: ', '\u21BE','v','infix'],['\\u21A7.infix: ', '\u21A7','v','infix'],['\\u21C7.infix: ', '\u21C7','h','infix'],['\\u2A0D.prefix: ', '\u2A0D','l','prefix'],['\\u23E1.postfix: ', '\u23E1','h','postfix'],['\\u2A18.prefix: ', '\u2A18','l','prefix'],['\\u21A9.infix: ', '\u21A9','h','infix'],['\\u21F0.infix: ', '\u21F0','h','infix'],['\\u2016.prefix: ', '\u2016','v','prefix'],['\\u007D.postfix: ', '\u007D','v','postfix'],['\\u294E.infix: ', '\u294E','h','infix'],['\\u2A02.prefix: ', '\u2A02','l','prefix'],['\\u21D5.infix: ', '\u21D5','v','infix'],['\\u219E.infix: ', '\u219E','h','infix'],['\\u21EE.infix: ', '\u21EE','v','infix'],['\\u22C3.prefix: ', '\u22C3','l','prefix'],['\\u21C9.infix: ', '\u21C9','h','infix'],['\\u21A6.infix: ', '\u21A6','h','infix'],['\\u2044.infix: ', '\u2044','v','infix'],['\\u27F9.infix: ', '\u27F9','h','infix'],['\\u21A1.infix: ', '\u21A1','v','infix'],['\\u2953.infix: ', '\u2953','h','infix'],['\\u2195.infix: ', '\u2195','v','infix'],['\\u21E0.infix: ', '\u21E0','h','infix'],['\\u21E4.infix: ', '\u21E4','h','infix'],['\\u2987.prefix: ', '\u2987','v','prefix'],['\\u2A15.prefix: ', '\u2A15','l','prefix'],['\\u21FE.infix: ', '\u21FE','h','infix'],['\\u2225.prefix: ', '\u2225','v','prefix'],['\\u2233.prefix: ', '\u2233','l','prefix'],['\\u2772.prefix: ', '\u2772','v','prefix'],['\\u27FA.infix: ', '\u27FA','h','infix'],['\\u2230.prefix: ', '\u2230','l','prefix'],['\\u2960.infix: ', '\u2960','v','infix'],['\\u21AF.infix: ', '\u21AF','v','infix'],['\\u20E1.postfix: ', '\u20E1','h','postfix'],['\\u007C\u007C\u007C.postfix: ', '\u007C\u007C\u007C','v','postfix'],['\\u27FB.infix: ', '\u27FB','h','infix'],['\\u295C.infix: ', '\u295C','v','infix'],['\\u007C.postfix: ', '\u007C','v','postfix'],['\\u21D1.infix: ', '\u21D1','v','infix'],['\\u27F7.infix: ', '\u27F7','h','infix'],['\\u21B1.infix: ', '\u21B1','v','infix'],['\\u21EC.infix: ', '\u21EC','v','infix'],['\\u21CC.infix: ', '\u21CC','h','infix'],['\\u27E8.prefix: ', '\u27E8','v','prefix'],['\\u2990.postfix: ', '\u2990','v','postfix'],['\\u21B4.infix: ', '\u21B4','h','infix'],['\\u22C0.prefix: ', '\u22C0','l','prefix'],['\\u2951.infix: ', '\u2951','v','infix'],['\\u2AFF.prefix: ', '\u2AFF','l','prefix'],['\\u21B5.infix: ', '\u21B5','v','infix'],['\\u2215.infix: ', '\u2215','v','infix'],['\\u2988.postfix: ', '\u2988','v','postfix'],['\\u290D.infix: ', '\u290D','h','infix'],['\\u21C1.infix: ', '\u21C1','h','infix'],['\\u290B.infix: ', '\u290B','v','infix'],['\\u2A16.prefix: ', '\u2A16','l','prefix'],['\\u295E.infix: ', '\u295E','h','infix'],['\\u2950.infix: ', '\u2950','h','infix'],['\\u27EB.postfix: ', '\u27EB','v','postfix'],['\\u29FC.prefix: ', '\u29FC','v','prefix'],['\\u21A4.infix: ', '\u21A4','h','infix'],['\\u295D.infix: ', '\u295D','v','infix'],['\\u2A10.prefix: ', '\u2A10','l','prefix'],['\\u2199.infix: ', '\u2199','h','infix'],['\\u222C.prefix: ', '\u222C','l','prefix'],['\\u2959.infix: ', '\u2959','v','infix'],['\\u21EB.infix: ', '\u21EB','v','infix'],['\\u290C.infix: ', '\u290C','h','infix'],['\\u21E9.infix: ', '\u21E9','v','infix'],['\\u2A1A.prefix: ', '\u2A1A','l','prefix'],['\\u2913.infix: ', '\u2913','v','infix'],['\\u2910.infix: ', '\u2910','h','infix'],['\\uFE36.postfix: ', '\uFE36','h','postfix'],['\\u21B0.infix: ', '\u21B0','v','infix'],['\\u296E.infix: ', '\u296E','v','infix'],['\\u2500.infix: ', '\u2500','h','infix'],['\\u2308.prefix: ', '\u2308','v','prefix'],['\\u21A8.infix: ', '\u21A8','v','infix'],['\\u21C6.infix: ', '\u21C6','h','infix'],['\\u21DD.infix: ', '\u21DD','h','infix'],['\\u221A.prefix: ', '\u221A','v','prefix'],['\\u2994.postfix: ', '\u2994','v','postfix'],['\\u2296.prefix: ', '\u2296','l','prefix'],['\\u2985.prefix: ', '\u2985','v','prefix'],['\\u21F6.infix: ', '\u21F6','h','infix'],['\\u298B.prefix: ', '\u298B','v','prefix'],['\\u02C7.postfix: ', '\u02C7','h','postfix'],['\\u2223.prefix: ', '\u2223','v','prefix'],['\\u007C.infix: ', '\u007C','v','infix'],['\\u2A07.prefix: ', '\u2A07','l','prefix'],['\\u2A06.prefix: ', '\u2A06','l','prefix'],['\\u20D6.postfix: ', '\u20D6','h','postfix'],['\\u2A12.prefix: ', '\u2A12','l','prefix'],['\\u2223.postfix: ', '\u2223','v','postfix'],['\\u2958.infix: ', '\u2958','v','infix'],['\\u23DC.postfix: ', '\u23DC','h','postfix'],['\\u2986.postfix: ', '\u2986','v','postfix'],['\\u2B46.infix: ', '\u2B46','h','infix'],['\\u21FD.infix: ', '\u21FD','h','infix'],['\\u007C\u007C\u007C.prefix: ', '\u007C\u007C\u007C','v','prefix'],['\\u21D2.infix: ', '\u21D2','h','infix'],['\\u298C.postfix: ', '\u298C','v','postfix'],['\\u2912.infix: ', '\u2912','v','infix'],['\\u21EA.infix: ', '\u21EA','v','infix'],['\\u21BC.infix: ', '\u21BC','h','infix'],['\\u005B.prefix: ', '\u005B','v','prefix'],['\\u22C2.prefix: ', '\u22C2','l','prefix'],['\\u296F.infix: ', '\u296F','v','infix'],['\\u2B45.infix: ', '\u2B45','h','infix'],['\\u02F7.postfix: ', '\u02F7','h','postfix'],['\\u0332.postfix: ', '\u0332','h','postfix'],['\\u27FE.infix: ', '\u27FE','h','infix'],['\\u0029.postfix: ', '\u0029','v','postfix'],['\\u21C0.infix: ', '\u21C0','h','infix'],['\\u2A0F.prefix: ', '\u2A0F','l','prefix'],['\\u27E7.postfix: ', '\u27E7','v','postfix'],['\\u27ED.postfix: ', '\u27ED','v','postfix'],['\\u27E6.prefix: ', '\u27E6','v','prefix'],['\\u2995.prefix: ', '\u2995','v','prefix'],['\\u219F.infix: ', '\u219F','v','infix'],['\\u21AC.infix: ', '\u21AC','h','infix'],['\\u21A2.infix: ', '\u21A2','h','infix'],['\\u007B.prefix: ', '\u007B','v','prefix'],['\\u222D.prefix: ', '\u222D','l','prefix'],['\\u2A04.prefix: ', '\u2A04','l','prefix'],['\\u2A0C.prefix: ', '\u2A0C','l','prefix'],['\\u27FF.infix: ', '\u27FF','h','infix'],['\\uFE37.postfix: ', '\uFE37','h','postfix'],['\\u007C\u007C.prefix: ', '\u007C\u007C','v','prefix'],['\\u2A14.prefix: ', '\u2A14','l','prefix'],['\\u23DD.postfix: ', '\u23DD','h','postfix'],['\\u29FD.postfix: ', '\u29FD','v','postfix'],['\\u20D7.postfix: ', '\u20D7','h','postfix'],['\\u222F.prefix: ', '\u222F','l','prefix'],['\\u230A.prefix: ', '\u230A','v','prefix'],['\\u27FD.infix: ', '\u27FD','h','infix'],['\\u2AFC.prefix: ', '\u2AFC','l','prefix'],['\\u21E6.infix: ', '\u21E6','h','infix'],['\\u2210.prefix: ', '\u2210','l','prefix'],['\\u298E.postfix: ', '\u298E','v','postfix'],['\\u21E8.infix: ', '\u21E8','h','infix'],['\\u2A0B.prefix: ', '\u2A0B','l','prefix'],['\\u21D0.infix: ', '\u21D0','h','infix'],['\\u27EC.prefix: ', '\u27EC','v','prefix'],['\\u2996.postfix: ', '\u2996','v','postfix'],['\\u2A1C.prefix: ', '\u2A1C','l','prefix'],['\\uFE38.postfix: ', '\uFE38','h','postfix'],['\\u2A0E.prefix: ', '\u2A0E','l','prefix'],['\\u23DF.postfix: ', '\u23DF','h','postfix'],['\\u290F.infix: ', '\u290F','h','infix'],['\\u2954.infix: ', '\u2954','v','infix'],['\\u21DA.infix: ', '\u21DA','h','infix'],['\\u298A.postfix: ', '\u298A','v','postfix'],['\\u2232.prefix: ', '\u2232','l','prefix'],['\\u298D.prefix: ', '\u298D','v','prefix'],['\\u21F3.infix: ', '\u21F3','v','infix'],['\\u2980.postfix: ', '\u2980','v','postfix'],['\\u21B3.infix: ', '\u21B3','v','infix'],['\\u02DC.postfix: ', '\u02DC','h','postfix'],['\\u230B.postfix: ', '\u230B','v','postfix'],['\\u2A19.prefix: ', '\u2A19','l','prefix'],['\\u007C\u007C.postfix: ', '\u007C\u007C','v','postfix'],['\\u21CA.infix: ', '\u21CA','v','infix'],['\\u2231.prefix: ', '\u2231','l','prefix'],['\\u2A01.prefix: ', '\u2A01','l','prefix'],['\\u21E3.infix: ', '\u21E3','v','infix'],['\\u2192.infix: ', '\u2192','h','infix'],['\\u23E0.postfix: ', '\u23E0','h','postfix'],['\\u21A3.infix: ', '\u21A3','h','infix'],['\\u21D4.infix: ', '\u21D4','h','infix'],['\\u2957.infix: ', '\u2957','h','infix'],['\\u298F.prefix: ', '\u298F','v','prefix'],['\\u290A.infix: ', '\u290A','v','infix'],['\\u2989.prefix: ', '\u2989','v','prefix'],['\\u2297.prefix: ', '\u2297','l','prefix'],['\\u27EF.postfix: ', '\u27EF','v','postfix'],['\\u2991.prefix: ', '\u2991','v','prefix'],['\\u21B9.infix: ', '\u21B9','h','infix'],['\\u2295.prefix: ', '\u2295','l','prefix'],['\\u007E.postfix: ', '\u007E','h','postfix'],['\\u02C9.postfix: ', '\u02C9','h','postfix'],['\\u21C4.infix: ', '\u21C4','h','infix'],['\\u21BD.infix: ', '\u21BD','h','infix'],['\\u21D3.infix: ', '\u21D3','v','infix'],['\\u005F.infix: ', '\u005F','h','infix'],['\\u2A08.prefix: ', '\u2A08','l','prefix'],['\\u20D1.postfix: ', '\u20D1','h','postfix'],['\\u2196.infix: ', '\u2196','v','infix'],['\\u27E9.postfix: ', '\u27E9','v','postfix'],['\\u27F5.infix: ', '\u27F5','h','infix'],['\\u2980.prefix: ', '\u2980','v','prefix'],['\\u21B2.infix: ', '\u21B2','v','infix'],['\\u294F.infix: ', '\u294F','v','infix'],['\\u21C5.infix: ', '\u21C5','v','infix'],['\\u21DC.infix: ', '\u21DC','h','infix'],['\\u21E7.infix: ', '\u21E7','v','infix'],['\\u21ED.infix: ', '\u21ED','v','infix'],['\\u21C2.infix: ', '\u21C2','v','infix'],['\\u21E5.infix: ', '\u21E5','h','infix'],['\\u23B1.postfix: ', '\u23B1','v','postfix'],['\\u21C8.infix: ', '\u21C8','v','infix'],['\\u27FC.infix: ', '\u27FC','h','infix'],['\\u290E.infix: ', '\u290E','h','infix'],['\\u2955.infix: ', '\u2955','v','infix'],['\\u295B.infix: ', '\u295B','h','infix'],['\\u23DE.postfix: ', '\u23DE','h','postfix'],['\\u2997.prefix: ', '\u2997','v','prefix'],['\\u2983.prefix: ', '\u2983','v','prefix'],['\\u2309.postfix: ', '\u2309','v','postfix'],['\\u2A17.prefix: ', '\u2A17','l','prefix'],['\\u23B4.postfix: ', '\u23B4','h','postfix'],['\\u22C1.prefix: ', '\u22C1','l','prefix'],['\\u2190.infix: ', '\u2190','h','infix'],['\\u21F5.infix: ', '\u21F5','v','infix'],['\\u21BF.infix: ', '\u21BF','v','infix'],['\\u27F0.infix: ', '\u27F0','v','infix'],['\\uFE35.postfix: ', '\uFE35','h','postfix'],['\\u21A0.infix: ', '\u21A0','h','infix'],['\\u2211.prefix: ', '\u2211','l','prefix'],['\\u219D.infix: ', '\u219D','h','infix'],['\\u23B5.postfix: ', '\u23B5','h','postfix'],['\\u27F6.infix: ', '\u27F6','h','infix'],['\\u2299.prefix: ', '\u2299','l','prefix'],['\\u219C.infix: ', '\u219C','h','infix'],['\\u00AF.postfix: ', '\u00AF','h','postfix'],['\\u21EF.infix: ', '\u21EF','v','infix'],['\\u2191.infix: ', '\u2191','v','infix'],['\\u2A09.prefix: ', '\u2A09','l','prefix'],['\\u2A0A.prefix: ', '\u2A0A','l','prefix'],['\\u005F.postfix: ', '\u005F','h','postfix'],['\\u23B0.prefix: ', '\u23B0','v','prefix'],['\\u21C3.infix: ', '\u21C3','v','infix'],['\\u21A5.infix: ', '\u21A5','v','infix'],['\\u27EA.prefix: ', '\u27EA','v','prefix'],['\\u2773.postfix: ', '\u2773','v','postfix'],['\\u2016.infix: ', '\u2016','v','infix'],['\\u21CB.infix: ', '\u21CB','h','infix'],['\\u228E.prefix: ', '\u228E','l','prefix'],['\\u27F1.infix: ', '\u27F1','v','infix'],['\\u005E.postfix: ', '\u005E','h','postfix'],['\\u0302.postfix: ', '\u0302','h','postfix'],['\\u005D.postfix: ', '\u005D','v','postfix'],['\\u2952.infix: ', '\u2952','h','infix'],['\\u295F.infix: ', '\u295F','h','infix'],['\\u21AB.infix: ', '\u21AB','h','infix'],['\\u2992.postfix: ', '\u2992','v','postfix'],['\\u2016.postfix: ', '\u2016','v','postfix'],['\\u007C\u007C\u007C.infix: ', '\u007C\u007C\u007C','v','infix'],['\\u2A03.prefix: ', '\u2A03','l','prefix'],['\\u2193.infix: ', '\u2193','v','infix'],['\\u2956.infix: ', '\u2956','h','infix'],['\\u2984.postfix: ', '\u2984','v','postfix'],['\\u21AA.infix: ', '\u21AA','h','infix'],['\\u2A1B.prefix: ', '\u2A1B','l','prefix'],['\\u21E1.infix: ', '\u21E1','v','infix'],['\\u2198.infix: ', '\u2198','h','infix'],['\\u21AD.infix: ', '\u21AD','h','infix'],['\\u2A05.prefix: ', '\u2A05','l','prefix'],['\\u21DB.infix: ', '\u21DB','h','infix'],['\\u2993.prefix: ', '\u2993','v','prefix'],['\\u222B.prefix: ', '\u222B','l','prefix'],['\\u20D0.postfix: ', '\u20D0','h','postfix'],['\\u21FF.infix: ', '\u21FF','h','infix'],]; +var stretchy_and_large_operators = [ + ["\\u2194.infix: ", "\u2194", "h", "infix"], + ["\\u222E.prefix: ", "\u222E", "l", "prefix"], + ["\\u2A11.prefix: ", "\u2A11", "l", "prefix"], + ["\\u007E.infix: ", "\u007E", "h", "infix"], + ["\\u27F8.infix: ", "\u27F8", "h", "infix"], + ["\\u02CD.postfix: ", "\u02CD", "h", "postfix"], + ["\\u0028.prefix: ", "\u0028", "v", "prefix"], + ["\\u220F.prefix: ", "\u220F", "l", "prefix"], + ["\\u2225.postfix: ", "\u2225", "v", "postfix"], + ["\\u2A13.prefix: ", "\u2A13", "l", "prefix"], + ["\\u007C\u007C.infix: ", "\u007C\u007C", "v", "infix"], + ["\\u203E.postfix: ", "\u203E", "h", "postfix"], + ["\\u27EE.prefix: ", "\u27EE", "v", "prefix"], + ["\\u007C.prefix: ", "\u007C", "v", "prefix"], + ["\\u2A00.prefix: ", "\u2A00", "l", "prefix"], + ["\\u295A.infix: ", "\u295A", "h", "infix"], + ["\\u02C6.postfix: ", "\u02C6", "h", "postfix"], + ["\\u21E2.infix: ", "\u21E2", "h", "infix"], + ["\\u2961.infix: ", "\u2961", "v", "infix"], + ["\\u2998.postfix: ", "\u2998", "v", "postfix"], + ["\\u2197.infix: ", "\u2197", "v", "infix"], + ["\\u21BE.infix: ", "\u21BE", "v", "infix"], + ["\\u21A7.infix: ", "\u21A7", "v", "infix"], + ["\\u21C7.infix: ", "\u21C7", "h", "infix"], + ["\\u2A0D.prefix: ", "\u2A0D", "l", "prefix"], + ["\\u23E1.postfix: ", "\u23E1", "h", "postfix"], + ["\\u2A18.prefix: ", "\u2A18", "l", "prefix"], + ["\\u21A9.infix: ", "\u21A9", "h", "infix"], + ["\\u21F0.infix: ", "\u21F0", "h", "infix"], + ["\\u2016.prefix: ", "\u2016", "v", "prefix"], + ["\\u007D.postfix: ", "\u007D", "v", "postfix"], + ["\\u294E.infix: ", "\u294E", "h", "infix"], + ["\\u2A02.prefix: ", "\u2A02", "l", "prefix"], + ["\\u21D5.infix: ", "\u21D5", "v", "infix"], + ["\\u219E.infix: ", "\u219E", "h", "infix"], + ["\\u21EE.infix: ", "\u21EE", "v", "infix"], + ["\\u22C3.prefix: ", "\u22C3", "l", "prefix"], + ["\\u21C9.infix: ", "\u21C9", "h", "infix"], + ["\\u21A6.infix: ", "\u21A6", "h", "infix"], + ["\\u2044.infix: ", "\u2044", "v", "infix"], + ["\\u27F9.infix: ", "\u27F9", "h", "infix"], + ["\\u21A1.infix: ", "\u21A1", "v", "infix"], + ["\\u2953.infix: ", "\u2953", "h", "infix"], + ["\\u2195.infix: ", "\u2195", "v", "infix"], + ["\\u21E0.infix: ", "\u21E0", "h", "infix"], + ["\\u21E4.infix: ", "\u21E4", "h", "infix"], + ["\\u2987.prefix: ", "\u2987", "v", "prefix"], + ["\\u2A15.prefix: ", "\u2A15", "l", "prefix"], + ["\\u21FE.infix: ", "\u21FE", "h", "infix"], + ["\\u2225.prefix: ", "\u2225", "v", "prefix"], + ["\\u2233.prefix: ", "\u2233", "l", "prefix"], + ["\\u2772.prefix: ", "\u2772", "v", "prefix"], + ["\\u27FA.infix: ", "\u27FA", "h", "infix"], + ["\\u2230.prefix: ", "\u2230", "l", "prefix"], + ["\\u2960.infix: ", "\u2960", "v", "infix"], + ["\\u21AF.infix: ", "\u21AF", "v", "infix"], + ["\\u20E1.postfix: ", "\u20E1", "h", "postfix"], + ["\\u007C\u007C\u007C.postfix: ", "\u007C\u007C\u007C", "v", "postfix"], + ["\\u27FB.infix: ", "\u27FB", "h", "infix"], + ["\\u295C.infix: ", "\u295C", "v", "infix"], + ["\\u007C.postfix: ", "\u007C", "v", "postfix"], + ["\\u21D1.infix: ", "\u21D1", "v", "infix"], + ["\\u27F7.infix: ", "\u27F7", "h", "infix"], + ["\\u21B1.infix: ", "\u21B1", "v", "infix"], + ["\\u21EC.infix: ", "\u21EC", "v", "infix"], + ["\\u21CC.infix: ", "\u21CC", "h", "infix"], + ["\\u27E8.prefix: ", "\u27E8", "v", "prefix"], + ["\\u2990.postfix: ", "\u2990", "v", "postfix"], + ["\\u21B4.infix: ", "\u21B4", "h", "infix"], + ["\\u22C0.prefix: ", "\u22C0", "l", "prefix"], + ["\\u2951.infix: ", "\u2951", "v", "infix"], + ["\\u2AFF.prefix: ", "\u2AFF", "l", "prefix"], + ["\\u21B5.infix: ", "\u21B5", "v", "infix"], + ["\\u2215.infix: ", "\u2215", "v", "infix"], + ["\\u2988.postfix: ", "\u2988", "v", "postfix"], + ["\\u290D.infix: ", "\u290D", "h", "infix"], + ["\\u21C1.infix: ", "\u21C1", "h", "infix"], + ["\\u290B.infix: ", "\u290B", "v", "infix"], + ["\\u2A16.prefix: ", "\u2A16", "l", "prefix"], + ["\\u295E.infix: ", "\u295E", "h", "infix"], + ["\\u2950.infix: ", "\u2950", "h", "infix"], + ["\\u27EB.postfix: ", "\u27EB", "v", "postfix"], + ["\\u29FC.prefix: ", "\u29FC", "v", "prefix"], + ["\\u21A4.infix: ", "\u21A4", "h", "infix"], + ["\\u295D.infix: ", "\u295D", "v", "infix"], + ["\\u2A10.prefix: ", "\u2A10", "l", "prefix"], + ["\\u2199.infix: ", "\u2199", "h", "infix"], + ["\\u222C.prefix: ", "\u222C", "l", "prefix"], + ["\\u2959.infix: ", "\u2959", "v", "infix"], + ["\\u21EB.infix: ", "\u21EB", "v", "infix"], + ["\\u290C.infix: ", "\u290C", "h", "infix"], + ["\\u21E9.infix: ", "\u21E9", "v", "infix"], + ["\\u2A1A.prefix: ", "\u2A1A", "l", "prefix"], + ["\\u2913.infix: ", "\u2913", "v", "infix"], + ["\\u2910.infix: ", "\u2910", "h", "infix"], + ["\\uFE36.postfix: ", "\uFE36", "h", "postfix"], + ["\\u21B0.infix: ", "\u21B0", "v", "infix"], + ["\\u296E.infix: ", "\u296E", "v", "infix"], + ["\\u2500.infix: ", "\u2500", "h", "infix"], + ["\\u2308.prefix: ", "\u2308", "v", "prefix"], + ["\\u21A8.infix: ", "\u21A8", "v", "infix"], + ["\\u21C6.infix: ", "\u21C6", "h", "infix"], + ["\\u21DD.infix: ", "\u21DD", "h", "infix"], + ["\\u221A.prefix: ", "\u221A", "v", "prefix"], + ["\\u2994.postfix: ", "\u2994", "v", "postfix"], + ["\\u2296.prefix: ", "\u2296", "l", "prefix"], + ["\\u2985.prefix: ", "\u2985", "v", "prefix"], + ["\\u21F6.infix: ", "\u21F6", "h", "infix"], + ["\\u298B.prefix: ", "\u298B", "v", "prefix"], + ["\\u02C7.postfix: ", "\u02C7", "h", "postfix"], + ["\\u2223.prefix: ", "\u2223", "v", "prefix"], + ["\\u007C.infix: ", "\u007C", "v", "infix"], + ["\\u2A07.prefix: ", "\u2A07", "l", "prefix"], + ["\\u2A06.prefix: ", "\u2A06", "l", "prefix"], + ["\\u20D6.postfix: ", "\u20D6", "h", "postfix"], + ["\\u2A12.prefix: ", "\u2A12", "l", "prefix"], + ["\\u2223.postfix: ", "\u2223", "v", "postfix"], + ["\\u2958.infix: ", "\u2958", "v", "infix"], + ["\\u23DC.postfix: ", "\u23DC", "h", "postfix"], + ["\\u2986.postfix: ", "\u2986", "v", "postfix"], + ["\\u2B46.infix: ", "\u2B46", "h", "infix"], + ["\\u21FD.infix: ", "\u21FD", "h", "infix"], + ["\\u007C\u007C\u007C.prefix: ", "\u007C\u007C\u007C", "v", "prefix"], + ["\\u21D2.infix: ", "\u21D2", "h", "infix"], + ["\\u298C.postfix: ", "\u298C", "v", "postfix"], + ["\\u2912.infix: ", "\u2912", "v", "infix"], + ["\\u21EA.infix: ", "\u21EA", "v", "infix"], + ["\\u21BC.infix: ", "\u21BC", "h", "infix"], + ["\\u005B.prefix: ", "\u005B", "v", "prefix"], + ["\\u22C2.prefix: ", "\u22C2", "l", "prefix"], + ["\\u296F.infix: ", "\u296F", "v", "infix"], + ["\\u2B45.infix: ", "\u2B45", "h", "infix"], + ["\\u02F7.postfix: ", "\u02F7", "h", "postfix"], + ["\\u0332.postfix: ", "\u0332", "h", "postfix"], + ["\\u27FE.infix: ", "\u27FE", "h", "infix"], + ["\\u0029.postfix: ", "\u0029", "v", "postfix"], + ["\\u21C0.infix: ", "\u21C0", "h", "infix"], + ["\\u2A0F.prefix: ", "\u2A0F", "l", "prefix"], + ["\\u27E7.postfix: ", "\u27E7", "v", "postfix"], + ["\\u27ED.postfix: ", "\u27ED", "v", "postfix"], + ["\\u27E6.prefix: ", "\u27E6", "v", "prefix"], + ["\\u2995.prefix: ", "\u2995", "v", "prefix"], + ["\\u219F.infix: ", "\u219F", "v", "infix"], + ["\\u21AC.infix: ", "\u21AC", "h", "infix"], + ["\\u21A2.infix: ", "\u21A2", "h", "infix"], + ["\\u007B.prefix: ", "\u007B", "v", "prefix"], + ["\\u222D.prefix: ", "\u222D", "l", "prefix"], + ["\\u2A04.prefix: ", "\u2A04", "l", "prefix"], + ["\\u2A0C.prefix: ", "\u2A0C", "l", "prefix"], + ["\\u27FF.infix: ", "\u27FF", "h", "infix"], + ["\\uFE37.postfix: ", "\uFE37", "h", "postfix"], + ["\\u007C\u007C.prefix: ", "\u007C\u007C", "v", "prefix"], + ["\\u2A14.prefix: ", "\u2A14", "l", "prefix"], + ["\\u23DD.postfix: ", "\u23DD", "h", "postfix"], + ["\\u29FD.postfix: ", "\u29FD", "v", "postfix"], + ["\\u20D7.postfix: ", "\u20D7", "h", "postfix"], + ["\\u222F.prefix: ", "\u222F", "l", "prefix"], + ["\\u230A.prefix: ", "\u230A", "v", "prefix"], + ["\\u27FD.infix: ", "\u27FD", "h", "infix"], + ["\\u2AFC.prefix: ", "\u2AFC", "l", "prefix"], + ["\\u21E6.infix: ", "\u21E6", "h", "infix"], + ["\\u2210.prefix: ", "\u2210", "l", "prefix"], + ["\\u298E.postfix: ", "\u298E", "v", "postfix"], + ["\\u21E8.infix: ", "\u21E8", "h", "infix"], + ["\\u2A0B.prefix: ", "\u2A0B", "l", "prefix"], + ["\\u21D0.infix: ", "\u21D0", "h", "infix"], + ["\\u27EC.prefix: ", "\u27EC", "v", "prefix"], + ["\\u2996.postfix: ", "\u2996", "v", "postfix"], + ["\\u2A1C.prefix: ", "\u2A1C", "l", "prefix"], + ["\\uFE38.postfix: ", "\uFE38", "h", "postfix"], + ["\\u2A0E.prefix: ", "\u2A0E", "l", "prefix"], + ["\\u23DF.postfix: ", "\u23DF", "h", "postfix"], + ["\\u290F.infix: ", "\u290F", "h", "infix"], + ["\\u2954.infix: ", "\u2954", "v", "infix"], + ["\\u21DA.infix: ", "\u21DA", "h", "infix"], + ["\\u298A.postfix: ", "\u298A", "v", "postfix"], + ["\\u2232.prefix: ", "\u2232", "l", "prefix"], + ["\\u298D.prefix: ", "\u298D", "v", "prefix"], + ["\\u21F3.infix: ", "\u21F3", "v", "infix"], + ["\\u2980.postfix: ", "\u2980", "v", "postfix"], + ["\\u21B3.infix: ", "\u21B3", "v", "infix"], + ["\\u02DC.postfix: ", "\u02DC", "h", "postfix"], + ["\\u230B.postfix: ", "\u230B", "v", "postfix"], + ["\\u2A19.prefix: ", "\u2A19", "l", "prefix"], + ["\\u007C\u007C.postfix: ", "\u007C\u007C", "v", "postfix"], + ["\\u21CA.infix: ", "\u21CA", "v", "infix"], + ["\\u2231.prefix: ", "\u2231", "l", "prefix"], + ["\\u2A01.prefix: ", "\u2A01", "l", "prefix"], + ["\\u21E3.infix: ", "\u21E3", "v", "infix"], + ["\\u2192.infix: ", "\u2192", "h", "infix"], + ["\\u23E0.postfix: ", "\u23E0", "h", "postfix"], + ["\\u21A3.infix: ", "\u21A3", "h", "infix"], + ["\\u21D4.infix: ", "\u21D4", "h", "infix"], + ["\\u2957.infix: ", "\u2957", "h", "infix"], + ["\\u298F.prefix: ", "\u298F", "v", "prefix"], + ["\\u290A.infix: ", "\u290A", "v", "infix"], + ["\\u2989.prefix: ", "\u2989", "v", "prefix"], + ["\\u2297.prefix: ", "\u2297", "l", "prefix"], + ["\\u27EF.postfix: ", "\u27EF", "v", "postfix"], + ["\\u2991.prefix: ", "\u2991", "v", "prefix"], + ["\\u21B9.infix: ", "\u21B9", "h", "infix"], + ["\\u2295.prefix: ", "\u2295", "l", "prefix"], + ["\\u007E.postfix: ", "\u007E", "h", "postfix"], + ["\\u02C9.postfix: ", "\u02C9", "h", "postfix"], + ["\\u21C4.infix: ", "\u21C4", "h", "infix"], + ["\\u21BD.infix: ", "\u21BD", "h", "infix"], + ["\\u21D3.infix: ", "\u21D3", "v", "infix"], + ["\\u005F.infix: ", "\u005F", "h", "infix"], + ["\\u2A08.prefix: ", "\u2A08", "l", "prefix"], + ["\\u20D1.postfix: ", "\u20D1", "h", "postfix"], + ["\\u2196.infix: ", "\u2196", "v", "infix"], + ["\\u27E9.postfix: ", "\u27E9", "v", "postfix"], + ["\\u27F5.infix: ", "\u27F5", "h", "infix"], + ["\\u2980.prefix: ", "\u2980", "v", "prefix"], + ["\\u21B2.infix: ", "\u21B2", "v", "infix"], + ["\\u294F.infix: ", "\u294F", "v", "infix"], + ["\\u21C5.infix: ", "\u21C5", "v", "infix"], + ["\\u21DC.infix: ", "\u21DC", "h", "infix"], + ["\\u21E7.infix: ", "\u21E7", "v", "infix"], + ["\\u21ED.infix: ", "\u21ED", "v", "infix"], + ["\\u21C2.infix: ", "\u21C2", "v", "infix"], + ["\\u21E5.infix: ", "\u21E5", "h", "infix"], + ["\\u23B1.postfix: ", "\u23B1", "v", "postfix"], + ["\\u21C8.infix: ", "\u21C8", "v", "infix"], + ["\\u27FC.infix: ", "\u27FC", "h", "infix"], + ["\\u290E.infix: ", "\u290E", "h", "infix"], + ["\\u2955.infix: ", "\u2955", "v", "infix"], + ["\\u295B.infix: ", "\u295B", "h", "infix"], + ["\\u23DE.postfix: ", "\u23DE", "h", "postfix"], + ["\\u2997.prefix: ", "\u2997", "v", "prefix"], + ["\\u2983.prefix: ", "\u2983", "v", "prefix"], + ["\\u2309.postfix: ", "\u2309", "v", "postfix"], + ["\\u2A17.prefix: ", "\u2A17", "l", "prefix"], + ["\\u23B4.postfix: ", "\u23B4", "h", "postfix"], + ["\\u22C1.prefix: ", "\u22C1", "l", "prefix"], + ["\\u2190.infix: ", "\u2190", "h", "infix"], + ["\\u21F5.infix: ", "\u21F5", "v", "infix"], + ["\\u21BF.infix: ", "\u21BF", "v", "infix"], + ["\\u27F0.infix: ", "\u27F0", "v", "infix"], + ["\\uFE35.postfix: ", "\uFE35", "h", "postfix"], + ["\\u21A0.infix: ", "\u21A0", "h", "infix"], + ["\\u2211.prefix: ", "\u2211", "l", "prefix"], + ["\\u219D.infix: ", "\u219D", "h", "infix"], + ["\\u23B5.postfix: ", "\u23B5", "h", "postfix"], + ["\\u27F6.infix: ", "\u27F6", "h", "infix"], + ["\\u2299.prefix: ", "\u2299", "l", "prefix"], + ["\\u219C.infix: ", "\u219C", "h", "infix"], + ["\\u00AF.postfix: ", "\u00AF", "h", "postfix"], + ["\\u21EF.infix: ", "\u21EF", "v", "infix"], + ["\\u2191.infix: ", "\u2191", "v", "infix"], + ["\\u2A09.prefix: ", "\u2A09", "l", "prefix"], + ["\\u2A0A.prefix: ", "\u2A0A", "l", "prefix"], + ["\\u005F.postfix: ", "\u005F", "h", "postfix"], + ["\\u23B0.prefix: ", "\u23B0", "v", "prefix"], + ["\\u21C3.infix: ", "\u21C3", "v", "infix"], + ["\\u21A5.infix: ", "\u21A5", "v", "infix"], + ["\\u27EA.prefix: ", "\u27EA", "v", "prefix"], + ["\\u2773.postfix: ", "\u2773", "v", "postfix"], + ["\\u2016.infix: ", "\u2016", "v", "infix"], + ["\\u21CB.infix: ", "\u21CB", "h", "infix"], + ["\\u228E.prefix: ", "\u228E", "l", "prefix"], + ["\\u27F1.infix: ", "\u27F1", "v", "infix"], + ["\\u005E.postfix: ", "\u005E", "h", "postfix"], + ["\\u0302.postfix: ", "\u0302", "h", "postfix"], + ["\\u005D.postfix: ", "\u005D", "v", "postfix"], + ["\\u2952.infix: ", "\u2952", "h", "infix"], + ["\\u295F.infix: ", "\u295F", "h", "infix"], + ["\\u21AB.infix: ", "\u21AB", "h", "infix"], + ["\\u2992.postfix: ", "\u2992", "v", "postfix"], + ["\\u2016.postfix: ", "\u2016", "v", "postfix"], + ["\\u007C\u007C\u007C.infix: ", "\u007C\u007C\u007C", "v", "infix"], + ["\\u2A03.prefix: ", "\u2A03", "l", "prefix"], + ["\\u2193.infix: ", "\u2193", "v", "infix"], + ["\\u2956.infix: ", "\u2956", "h", "infix"], + ["\\u2984.postfix: ", "\u2984", "v", "postfix"], + ["\\u21AA.infix: ", "\u21AA", "h", "infix"], + ["\\u2A1B.prefix: ", "\u2A1B", "l", "prefix"], + ["\\u21E1.infix: ", "\u21E1", "v", "infix"], + ["\\u2198.infix: ", "\u2198", "h", "infix"], + ["\\u21AD.infix: ", "\u21AD", "h", "infix"], + ["\\u2A05.prefix: ", "\u2A05", "l", "prefix"], + ["\\u21DB.infix: ", "\u21DB", "h", "infix"], + ["\\u2993.prefix: ", "\u2993", "v", "prefix"], + ["\\u222B.prefix: ", "\u222B", "l", "prefix"], + ["\\u20D0.postfix: ", "\u20D0", "h", "postfix"], + ["\\u21FF.infix: ", "\u21FF", "h", "infix"], +]; diff --git a/layout/style/test/animation_utils.js b/layout/style/test/animation_utils.js index eadbd73c1d63..18dba919ede5 100644 --- a/layout/style/test/animation_utils.js +++ b/layout/style/test/animation_utils.js @@ -25,7 +25,7 @@ function advance_clock(milliseconds) { if (gElem) { ok(false, "test author forgot to call done_div/done_elem"); } - if (typeof(style) != "string") { + if (typeof style != "string") { ok(false, "test author forgot to pass argument"); } if (!document.getElementById("display")) { @@ -35,7 +35,7 @@ function advance_clock(milliseconds) { gElem.setAttribute("style", style); gElem.classList.add("target"); document.getElementById("display").appendChild(gElem); - return [ gElem, getComputedStyle(gElem, "") ]; + return [gElem, getComputedStyle(gElem, "")]; } function listen() { @@ -55,22 +55,41 @@ function advance_clock(milliseconds) { // This function checks that the list of eventsExpected matches // the received events -- but it only checks the properties that // are present on eventsExpected. - is(gEventsReceived.length, eventsExpected.length, - "number of events received for " + desc); - for (var i = 0, - i_end = Math.min(eventsExpected.length, gEventsReceived.length); - i != i_end; ++i) { + is( + gEventsReceived.length, + eventsExpected.length, + "number of events received for " + desc + ); + for ( + var i = 0, + i_end = Math.min(eventsExpected.length, gEventsReceived.length); + i != i_end; + ++i + ) { var exp = eventsExpected[i]; var rec = gEventsReceived[i]; for (var prop in exp) { if (prop == "elapsedTime") { // Allow floating point error. - ok(Math.abs(rec.elapsedTime - exp.elapsedTime) < 0.000002, - "events[" + i + "]." + prop + " for " + desc + - " received=" + rec.elapsedTime + " expected=" + exp.elapsedTime); + ok( + Math.abs(rec.elapsedTime - exp.elapsedTime) < 0.000002, + "events[" + + i + + "]." + + prop + + " for " + + desc + + " received=" + + rec.elapsedTime + + " expected=" + + exp.elapsedTime + ); } else { - is(rec[prop], exp[prop], - "events[" + i + "]." + prop + " for " + desc); + is( + rec[prop], + exp[prop], + "events[" + i + "]." + prop + " for " + desc + ); } } } @@ -82,8 +101,11 @@ function advance_clock(milliseconds) { function done_element() { if (!gElem) { - ok(false, "test author called done_element/done_div without matching" - + " call to new_element/new_div"); + ok( + false, + "test author called done_element/done_div without matching" + + " call to new_element/new_div" + ); } gElem.remove(); gElem = null; @@ -92,85 +114,90 @@ function advance_clock(milliseconds) { } } - [ new_div - , new_element - , listen - , check_events - , done_element ] - .forEach(function(fn) { + [new_div, new_element, listen, check_events, done_element].forEach(function( + fn + ) { window[fn.name] = fn; }); window.done_div = done_element; })(); -function px_to_num(str) -{ - return Number(String(str).match(/^([\d.]+)px$/)[1]); +function px_to_num(str) { + return Number(String(str).match(/^([\d.]+)px$/)[1]); } function bezier(x1, y1, x2, y2) { - // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1). - function x_for_t(t) { - var omt = 1-t; - return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t; + // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1). + function x_for_t(t) { + var omt = 1 - t; + return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t; + } + function y_for_t(t) { + var omt = 1 - t; + return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t; + } + function t_for_x(x) { + // Binary subdivision. + var mint = 0, + maxt = 1; + for (var i = 0; i < 30; ++i) { + var guesst = (mint + maxt) / 2; + var guessx = x_for_t(guesst); + if (x < guessx) { + maxt = guesst; + } else { + mint = guesst; + } } - function y_for_t(t) { - var omt = 1-t; - return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t; + return (mint + maxt) / 2; + } + return function bezier_closure(x) { + if (x == 0) { + return 0; } - function t_for_x(x) { - // Binary subdivision. - var mint = 0, maxt = 1; - for (var i = 0; i < 30; ++i) { - var guesst = (mint + maxt) / 2; - var guessx = x_for_t(guesst); - if (x < guessx) - maxt = guesst; - else - mint = guesst; - } - return (mint + maxt) / 2; - } - return function bezier_closure(x) { - if (x == 0) return 0; - if (x == 1) return 1; - return y_for_t(t_for_x(x)); + if (x == 1) { + return 1; } + return y_for_t(t_for_x(x)); + }; } function step_end(nsteps) { - return function step_end_closure(x) { - return Math.floor(x * nsteps) / nsteps; - } + return function step_end_closure(x) { + return Math.floor(x * nsteps) / nsteps; + }; } function step_start(nsteps) { - var stepend = step_end(nsteps); - return function step_start_closure(x) { - return 1.0 - stepend(1.0 - x); - } + var stepend = step_end(nsteps); + return function step_start_closure(x) { + return 1.0 - stepend(1.0 - x); + }; } var gTF = { - "ease": bezier(0.25, 0.1, 0.25, 1), - "linear": function(x) { return x; }, - "ease_in": bezier(0.42, 0, 1, 1), - "ease_out": bezier(0, 0, 0.58, 1), - "ease_in_out": bezier(0.42, 0, 0.58, 1), - "step_start": step_start(1), - "step_end": step_end(1), + ease: bezier(0.25, 0.1, 0.25, 1), + linear: function(x) { + return x; + }, + ease_in: bezier(0.42, 0, 1, 1), + ease_out: bezier(0, 0, 0.58, 1), + ease_in_out: bezier(0.42, 0, 0.58, 1), + step_start: step_start(1), + step_end: step_end(1), }; function is_approx(float1, float2, error, desc) { - ok(Math.abs(float1 - float2) < error, - desc + ": " + float1 + " and " + float2 + " should be within " + error); + ok( + Math.abs(float1 - float2) < error, + desc + ": " + float1 + " and " + float2 + " should be within " + error + ); } function findKeyframesRule(name) { for (var i = 0; i < document.styleSheets.length; i++) { var match = [].find.call(document.styleSheets[i].cssRules, function(rule) { - return rule.type == CSSRule.KEYFRAMES_RULE && - rule.name == name; + return rule.type == CSSRule.KEYFRAMES_RULE && rule.name == name; }); if (match) { return match; @@ -197,42 +224,49 @@ function findKeyframesRule(name) { // explicitly. function runOMTATest(aTestFunction, aOnSkip, specialPowersForPrefs) { const OMTAPrefKey = "layers.offmainthreadcomposition.async-animations"; - var utils = SpecialPowers.DOMWindowUtils; + var utils = SpecialPowers.DOMWindowUtils; if (!specialPowersForPrefs) { - specialPowersForPrefs = SpecialPowers; + specialPowersForPrefs = SpecialPowers; } - var expectOMTA = utils.layerManagerRemote && - // ^ Off-main thread animation cannot be used if off-main - // thread composition (OMTC) is not available - specialPowersForPrefs.getBoolPref(OMTAPrefKey); + var expectOMTA = + utils.layerManagerRemote && + // ^ Off-main thread animation cannot be used if off-main + // thread composition (OMTC) is not available + specialPowersForPrefs.getBoolPref(OMTAPrefKey); - isOMTAWorking().then(function(isWorking) { - if (expectOMTA) { - if (isWorking) { - aTestFunction(); + isOMTAWorking() + .then(function(isWorking) { + if (expectOMTA) { + if (isWorking) { + aTestFunction(); + } else { + // We only call this when we know it will fail as otherwise in the + // regular success case we will end up inflating the "passed tests" + // count by 1 + ok(isWorking, "OMTA should work"); + aOnSkip(); + } } else { - // We only call this when we know it will fail as otherwise in the - // regular success case we will end up inflating the "passed tests" - // count by 1 - ok(isWorking, "OMTA should work"); + todo( + isWorking, + "OMTA should ideally work, though we don't expect it to work on " + + "this platform/configuration" + ); aOnSkip(); } - } else { - todo(isWorking, - "OMTA should ideally work, though we don't expect it to work on " + - "this platform/configuration"); + }) + .catch(function(err) { + ok(false, err); aOnSkip(); - } - }).catch(function(err) { - ok(false, err); - aOnSkip(); - }); + }); function isOMTAWorking() { // Create keyframes rule const animationName = "a6ce3091ed85"; // Random name to avoid clashes - var ruleText = "@keyframes " + animationName + - " { from { opacity: 0.5 } to { opacity: 0.5 } }"; + var ruleText = + "@keyframes " + + animationName + + " { from { opacity: 0.5 } to { opacity: 0.5 } }"; var style = document.createElement("style"); style.appendChild(document.createTextNode(ruleText)); document.head.appendChild(style); @@ -242,7 +276,7 @@ function runOMTATest(aTestFunction, aOnSkip, specialPowersForPrefs) { document.body.appendChild(div); // Give the target geometry so it is eligible for layerization - div.style.width = "100px"; + div.style.width = "100px"; div.style.height = "100px"; div.style.backgroundColor = "white"; @@ -264,15 +298,18 @@ function runOMTATest(aTestFunction, aOnSkip, specialPowersForPrefs) { // notifications. utils.advanceTimeAndRefresh(0); return waitForPaintsFlushed(); - }).then(function() { + }) + .then(function() { div.style.animation = animationName + " 10s"; return waitForPaintsFlushed(); - }).then(function() { + }) + .then(function() { var opacity = utils.getOMTAStyle(div, "opacity"); cleanUp(); return Promise.resolve(opacity == 0.5); - }).catch(function(err) { + }) + .catch(function(err) { cleanUp(); return Promise.reject(err); }); @@ -290,7 +327,7 @@ function runOMTATest(aTestFunction, aOnSkip, specialPowersForPrefs) { function loadPaintListener() { return new Promise(function(resolve, reject) { - if (typeof(window.waitForAllPaints) !== "function") { + if (typeof window.waitForAllPaints !== "function") { var script = document.createElement("script"); script.onload = resolve; script.onerror = function() { @@ -329,10 +366,10 @@ function runOMTATest(aTestFunction, aOnSkip, specialPowersForPrefs) { // runAsyncAnimTest returns a Promise that is resolved when the // test is finished so we can chain them together return tests.reduce(function(sequence, test) { - return sequence.then(function() { - return runAsyncAnimTest(test, aOnAbort); - }); - }, Promise.resolve() /* the start of the sequence */); + return sequence.then(function() { + return runAsyncAnimTest(test, aOnAbort); + }); + }, Promise.resolve() /* the start of the sequence */); }; // Takes a generator function that represents a test case. Each point in the @@ -359,8 +396,9 @@ function runOMTATest(aTestFunction, aOnSkip, specialPowersForPrefs) { if (next.done) { return Promise.resolve(next.value); } else { - return Promise.resolve(next.value) - .then(step, function(err) { throw err; }); + return Promise.resolve(next.value).then(step, function(err) { + throw err; + }); } } @@ -373,15 +411,17 @@ function runOMTATest(aTestFunction, aOnSkip, specialPowersForPrefs) { generator = promise; promise = step(); } - return promise.catch(function(err) { - ok(false, err.message); - if (typeof aOnAbort == "function") { - aOnAbort(); - } - }).then(function() { - // Restore clock - SpecialPowers.DOMWindowUtils.restoreNormalRefresh(); - }); + return promise + .catch(function(err) { + ok(false, err.message); + if (typeof aOnAbort == "function") { + aOnAbort(); + } + }) + .then(function() { + // Restore clock + SpecialPowers.DOMWindowUtils.restoreNormalRefresh(); + }); } })(); @@ -395,36 +435,70 @@ const RunningOn = { MainThread: 0, Compositor: 1, Either: 2, - TodoMainThread: 3 + TodoMainThread: 3, }; const ExpectComparisonTo = { Pass: 1, - Fail: 2 + Fail: 2, }; (function() { - window.omta_todo_is = function(elem, property, expected, runningOn, desc, - pseudo) { - return omta_is_approx(elem, property, expected, 0, runningOn, desc, - ExpectComparisonTo.Fail, pseudo); + window.omta_todo_is = function( + elem, + property, + expected, + runningOn, + desc, + pseudo + ) { + return omta_is_approx( + elem, + property, + expected, + 0, + runningOn, + desc, + ExpectComparisonTo.Fail, + pseudo + ); }; - window.omta_is = function(elem, property, expected, runningOn, desc, - pseudo) { - return omta_is_approx(elem, property, expected, 0, runningOn, desc, - ExpectComparisonTo.Pass, pseudo); + window.omta_is = function(elem, property, expected, runningOn, desc, pseudo) { + return omta_is_approx( + elem, + property, + expected, + 0, + runningOn, + desc, + ExpectComparisonTo.Pass, + pseudo + ); }; // Many callers of this method will pass 'undefined' for // expectedComparisonResult. - window.omta_is_approx = function(elem, property, expected, tolerance, - runningOn, desc, expectedComparisonResult, - pseudo) { + window.omta_is_approx = function( + elem, + property, + expected, + tolerance, + runningOn, + desc, + expectedComparisonResult, + pseudo + ) { // Check input // FIXME: Auto generate this array. - const omtaProperties = [ "transform", "translate", "rotate", "scale", - "opacity", "background-color" ]; + const omtaProperties = [ + "transform", + "translate", + "rotate", + "scale", + "opacity", + "background-color", + ]; if (!omtaProperties.includes(property)) { ok(false, property + " is not an OMTA property"); return; @@ -443,11 +517,15 @@ const ExpectComparisonTo = { break; case "opacity": normalize = parseFloat; - compare = function(a, b, error) { return Math.abs(a - b) <= error; }; + compare = function(a, b, error) { + return Math.abs(a - b) <= error; + }; break; default: normalize = value => value; - compare = function(a, b, error) { return a == b; }; + compare = function(a, b, error) { + return a == b; + }; break; } @@ -460,15 +538,23 @@ const ExpectComparisonTo = { } // Get actual values - var compositorStr = - SpecialPowers.DOMWindowUtils.getOMTAStyle(elem, property, pseudo); + var compositorStr = SpecialPowers.DOMWindowUtils.getOMTAStyle( + elem, + property, + pseudo + ); var computedStr = window.getComputedStyle(elem, pseudo)[property]; // Prepare expected value var expectedValue = normalize(expected); if (expectedValue === null) { - ok(false, desc + ": test author should provide a valid 'expected' value" + - " - got " + expected.toString()); + ok( + false, + desc + + ": test author should provide a valid 'expected' value" + + " - got " + + expected.toString() + ); return; } @@ -476,9 +562,8 @@ const ExpectComparisonTo = { var actualStr; switch (runningOn) { case RunningOn.Either: - runningOn = compositorStr !== "" ? - RunningOn.Compositor : - RunningOn.MainThread; + runningOn = + compositorStr !== "" ? RunningOn.Compositor : RunningOn.MainThread; actualStr = compositorStr !== "" ? compositorStr : computedStr; break; @@ -491,8 +576,10 @@ const ExpectComparisonTo = { break; case RunningOn.TodoMainThread: - todo(compositorStr === "", - desc + ": should NOT be animating on compositor"); + todo( + compositorStr === "", + desc + ": should NOT be animating on compositor" + ); actualStr = compositorStr === "" ? computedStr : compositorStr; break; @@ -505,9 +592,8 @@ const ExpectComparisonTo = { break; } - var okOrTodo = expectedComparisonResult == ExpectComparisonTo.Fail ? - todo : - ok; + var okOrTodo = + expectedComparisonResult == ExpectComparisonTo.Fail ? todo : ok; // Compare animated value with expected var actualValue = normalize(actualStr); @@ -515,9 +601,14 @@ const ExpectComparisonTo = { ok(false, desc + ": should return a valid result - got " + actualStr); return; } - okOrTodo(compare(expectedValue, actualValue, tolerance), - desc + " - got " + actualStr + ", expected " + - normalizedToString(expectedValue)); + okOrTodo( + compare(expectedValue, actualValue, tolerance), + desc + + " - got " + + actualStr + + ", expected " + + normalizedToString(expectedValue) + ); // For transform-like properties, if we have multiple transform-like // properties, the OMTA value and getComputedStyle() must be different, @@ -532,7 +623,7 @@ const ExpectComparisonTo = { return; } - if (typeof expected.computed !== 'undefined') { + if (typeof expected.computed !== "undefined") { // For some tests we specify a separate computed value for comparing // with getComputedStyle. // @@ -547,21 +638,33 @@ const ExpectComparisonTo = { // result of getComputedStyle since it will help to alert us if some // discrepancy arises between the way we calculate values on the main // thread and compositor. - okOrTodo(computedStr == expected.computed, - desc + ": Computed style should be equal to " + - expected.computed); + okOrTodo( + computedStr == expected.computed, + desc + ": Computed style should be equal to " + expected.computed + ); } else if (actualStr === compositorStr) { // For compositor animations do an additional check that they match // the value calculated on the main thread var computedValue = normalize(computedStr); if (computedValue === null) { - ok(false, desc + ": test framework should parse computed style" + - " - got " + computedStr); + ok( + false, + desc + + ": test framework should parse computed style" + + " - got " + + computedStr + ); return; } - okOrTodo(compare(computedValue, actualValue, 0.0), - desc + ": OMTA style and computed style should be equal" + - " - OMTA " + actualStr + ", computed " + computedStr); + okOrTodo( + compare(computedValue, actualValue, 0.0), + desc + + ": OMTA style and computed style should be equal" + + " - OMTA " + + actualStr + + ", computed " + + computedStr + ); } }; @@ -570,8 +673,9 @@ const ExpectComparisonTo = { for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { var diff = Math.abs(a[i][j] - b[i][j]); - if (diff > tolerance || isNaN(diff)) + if (diff > tolerance || isNaN(diff)) { return false; + } } } return true; @@ -585,11 +689,11 @@ const ExpectComparisonTo = { // [ 1, 0, 0, ... ] // { a: 1, ty: 23 } etc. window.convertTo3dMatrix = function(matrixLike) { - if (typeof(matrixLike) == "string") { + if (typeof matrixLike == "string") { return convertStringTo3dMatrix(matrixLike); } else if (Array.isArray(matrixLike)) { return convertArrayTo3dMatrix(matrixLike); - } else if (typeof(matrixLike) == "object") { + } else if (typeof matrixLike == "object") { return convertObjectTo3dMatrix(matrixLike); } else { return null; @@ -605,19 +709,22 @@ const ExpectComparisonTo = { // Converts strings of the format "matrix(...)" and "matrix3d(...)" to a 3d // matrix function convertStringTo3dMatrix(str) { - if (str == "none") + if (str == "none") { return convertArrayTo3dMatrix([1, 0, 0, 1, 0, 0]); + } var result = str.match("^matrix(3d)?\\("); - if (result === null) + if (result === null) { return null; + } return convertArrayTo3dMatrix( - str.substring(result[0].length, str.length-1) - .split(",") - .map(function(component) { - return Number(component); - }) - ); + str + .substring(result[0].length, str.length - 1) + .split(",") + .map(function(component) { + return Number(component); + }) + ); } // Takes an array of numbers of length 6 (2d matrix) or 16 (3d matrix) @@ -625,16 +732,20 @@ const ExpectComparisonTo = { // matrix represented as an array of arrays function convertArrayTo3dMatrix(array) { if (array.length == 6) { - return convertObjectTo3dMatrix( - { a: array[0], b: array[1], - c: array[2], d: array[3], - e: array[4], f: array[5] } ); + return convertObjectTo3dMatrix({ + a: array[0], + b: array[1], + c: array[2], + d: array[3], + e: array[4], + f: array[5], + }); } else if (array.length == 16) { return [ array.slice(0, 4), array.slice(4, 8), array.slice(8, 12), - array.slice(12, 16) + array.slice(12, 16), ]; } else { return null; @@ -643,7 +754,7 @@ const ExpectComparisonTo = { // Return the first defined value in args. function defined(...args) { - return args.find(arg => typeof arg !== 'undefined'); + return args.find(arg => typeof arg !== "undefined"); } // Takes an object of the form { a: 1.1, e: 23 } and builds up a 3d matrix @@ -654,46 +765,64 @@ const ExpectComparisonTo = { defined(obj.a, obj.sx, obj.m11, 1), obj.b || obj.m12 || 0, obj.m13 || 0, - obj.m14 || 0 - ], [ + obj.m14 || 0, + ], + [ obj.c || obj.m21 || 0, defined(obj.d, obj.sy, obj.m22, 1), obj.m23 || 0, - obj.m24 || 0 - ], [ - obj.m31 || 0, - obj.m32 || 0, - defined(obj.sz, obj.m33, 1), - obj.m34 || 0 - ], [ + obj.m24 || 0, + ], + [obj.m31 || 0, obj.m32 || 0, defined(obj.sz, obj.m33, 1), obj.m34 || 0], + [ obj.e || obj.tx || obj.m41 || 0, obj.f || obj.ty || obj.m42 || 0, obj.tz || obj.m43 || 0, defined(obj.m44, 1), - ] + ], ]; } function convert3dMatrixToString(matrix) { if (is2d(matrix)) { - return "matrix(" + - [ matrix[0][0], matrix[0][1], - matrix[1][0], matrix[1][1], - matrix[3][0], matrix[3][1] ].join(", ") + ")"; + return ( + "matrix(" + + [ + matrix[0][0], + matrix[0][1], + matrix[1][0], + matrix[1][1], + matrix[3][0], + matrix[3][1], + ].join(", ") + + ")" + ); } else { - return "matrix3d(" + - matrix.reduce(function(outer, inner) { - return outer.concat(inner); - }).join(", ") + ")"; + return ( + "matrix3d(" + + matrix + .reduce(function(outer, inner) { + return outer.concat(inner); + }) + .join(", ") + + ")" + ); } } function is2d(matrix) { - return matrix[0][2] === 0 && matrix[0][3] === 0 && - matrix[1][2] === 0 && matrix[1][3] === 0 && - matrix[2][0] === 0 && matrix[2][1] === 0 && - matrix[2][2] === 1 && matrix[2][3] === 0 && - matrix[3][2] === 0 && matrix[3][3] === 1; + return ( + matrix[0][2] === 0 && + matrix[0][3] === 0 && + matrix[1][2] === 0 && + matrix[1][3] === 0 && + matrix[2][0] === 0 && + matrix[2][1] === 0 && + matrix[2][2] === 1 && + matrix[2][3] === 0 && + matrix[3][2] === 0 && + matrix[3][3] === 1 + ); } function getDeterminant(matrix) { @@ -701,30 +830,32 @@ const ExpectComparisonTo = { return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0]; } - return matrix[0][3] * matrix[1][2] * matrix[2][1] * matrix[3][0] - - matrix[0][2] * matrix[1][3] * matrix[2][1] * matrix[3][0] - - matrix[0][3] * matrix[1][1] * matrix[2][2] * matrix[3][0] - + matrix[0][1] * matrix[1][3] * matrix[2][2] * matrix[3][0] - + matrix[0][2] * matrix[1][1] * matrix[2][3] * matrix[3][0] - - matrix[0][1] * matrix[1][2] * matrix[2][3] * matrix[3][0] - - matrix[0][3] * matrix[1][2] * matrix[2][0] * matrix[3][1] - + matrix[0][2] * matrix[1][3] * matrix[2][0] * matrix[3][1] - + matrix[0][3] * matrix[1][0] * matrix[2][2] * matrix[3][1] - - matrix[0][0] * matrix[1][3] * matrix[2][2] * matrix[3][1] - - matrix[0][2] * matrix[1][0] * matrix[2][3] * matrix[3][1] - + matrix[0][0] * matrix[1][2] * matrix[2][3] * matrix[3][1] - + matrix[0][3] * matrix[1][1] * matrix[2][0] * matrix[3][2] - - matrix[0][1] * matrix[1][3] * matrix[2][0] * matrix[3][2] - - matrix[0][3] * matrix[1][0] * matrix[2][1] * matrix[3][2] - + matrix[0][0] * matrix[1][3] * matrix[2][1] * matrix[3][2] - + matrix[0][1] * matrix[1][0] * matrix[2][3] * matrix[3][2] - - matrix[0][0] * matrix[1][1] * matrix[2][3] * matrix[3][2] - - matrix[0][2] * matrix[1][1] * matrix[2][0] * matrix[3][3] - + matrix[0][1] * matrix[1][2] * matrix[2][0] * matrix[3][3] - + matrix[0][2] * matrix[1][0] * matrix[2][1] * matrix[3][3] - - matrix[0][0] * matrix[1][2] * matrix[2][1] * matrix[3][3] - - matrix[0][1] * matrix[1][0] * matrix[2][2] * matrix[3][3] - + matrix[0][0] * matrix[1][1] * matrix[2][2] * matrix[3][3]; + return ( + matrix[0][3] * matrix[1][2] * matrix[2][1] * matrix[3][0] - + matrix[0][2] * matrix[1][3] * matrix[2][1] * matrix[3][0] - + matrix[0][3] * matrix[1][1] * matrix[2][2] * matrix[3][0] + + matrix[0][1] * matrix[1][3] * matrix[2][2] * matrix[3][0] + + matrix[0][2] * matrix[1][1] * matrix[2][3] * matrix[3][0] - + matrix[0][1] * matrix[1][2] * matrix[2][3] * matrix[3][0] - + matrix[0][3] * matrix[1][2] * matrix[2][0] * matrix[3][1] + + matrix[0][2] * matrix[1][3] * matrix[2][0] * matrix[3][1] + + matrix[0][3] * matrix[1][0] * matrix[2][2] * matrix[3][1] - + matrix[0][0] * matrix[1][3] * matrix[2][2] * matrix[3][1] - + matrix[0][2] * matrix[1][0] * matrix[2][3] * matrix[3][1] + + matrix[0][0] * matrix[1][2] * matrix[2][3] * matrix[3][1] + + matrix[0][3] * matrix[1][1] * matrix[2][0] * matrix[3][2] - + matrix[0][1] * matrix[1][3] * matrix[2][0] * matrix[3][2] - + matrix[0][3] * matrix[1][0] * matrix[2][1] * matrix[3][2] + + matrix[0][0] * matrix[1][3] * matrix[2][1] * matrix[3][2] + + matrix[0][1] * matrix[1][0] * matrix[2][3] * matrix[3][2] - + matrix[0][0] * matrix[1][1] * matrix[2][3] * matrix[3][2] - + matrix[0][2] * matrix[1][1] * matrix[2][0] * matrix[3][3] + + matrix[0][1] * matrix[1][2] * matrix[2][0] * matrix[3][3] + + matrix[0][2] * matrix[1][0] * matrix[2][1] * matrix[3][3] - + matrix[0][0] * matrix[1][2] * matrix[2][1] * matrix[3][3] - + matrix[0][1] * matrix[1][0] * matrix[2][2] * matrix[3][3] + + matrix[0][0] * matrix[1][1] * matrix[2][2] * matrix[3][3] + ); } })(); @@ -750,9 +881,13 @@ function waitForPaintsFlushed() { function waitForVisitedLinkColoring(visitedLink, waitProperty, waitValue) { function checkLink(resolve) { - if (SpecialPowers.DOMWindowUtils - .getVisitedDependentComputedStyle(visitedLink, "", waitProperty) == - waitValue) { + if ( + SpecialPowers.DOMWindowUtils.getVisitedDependentComputedStyle( + visitedLink, + "", + waitProperty + ) == waitValue + ) { // Our link has been styled as visited. Resolve. resolve(true); } else { diff --git a/layout/style/test/browser_bug453896.js b/layout/style/test/browser_bug453896.js index 2d4189a5aa19..29eea2c37c8b 100644 --- a/layout/style/test/browser_bug453896.js +++ b/layout/style/test/browser_bug453896.js @@ -1,13 +1,16 @@ add_task(async function() { let uri = getRootDirectory(gTestPath) + "bug453896_iframe.html"; - await BrowserTestUtils.withNewTab({ - gBrowser, - url: uri - }, function(browser) { - return ContentTask.spawn(browser, null, async function() { - var fake_window = { ok: ok }; - content.wrappedJSObject.run(fake_window); - }); - }); + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: uri, + }, + function(browser) { + return ContentTask.spawn(browser, null, async function() { + var fake_window = { ok: ok }; + content.wrappedJSObject.run(fake_window); + }); + } + ); }); diff --git a/layout/style/test/browser_sourcemap.js b/layout/style/test/browser_sourcemap.js index 023985efc10c..09a60584b1dc 100644 --- a/layout/style/test/browser_sourcemap.js +++ b/layout/style/test/browser_sourcemap.js @@ -2,29 +2,40 @@ add_task(async function() { let uri = "http://example.com/browser/layout/style/test/sourcemap_css.html"; info(`URI is ${uri}`); - await BrowserTestUtils.withNewTab({ - gBrowser, - url: uri - }, async function(browser) { - await ContentTask.spawn(browser, null, function* () { - let seenSheets = 0; + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: uri, + }, + async function(browser) { + await ContentTask.spawn(browser, null, function*() { + let seenSheets = 0; - for (let i = 0; i < content.document.styleSheets.length; ++i) { - let sheet = content.document.styleSheets[i]; + for (let i = 0; i < content.document.styleSheets.length; ++i) { + let sheet = content.document.styleSheets[i]; - info(`Checking ${sheet.href}`); - if (/mapped\.css/.test(sheet.href)) { - is(sheet.sourceMapURL, "mapped.css.map", "X-SourceMap header took effect"); - seenSheets |= 1; - } else if (/mapped2\.css/.test(sheet.href)) { - is(sheet.sourceMapURL, "mapped2.css.map", "SourceMap header took effect"); - seenSheets |= 2; - } else { - ok(false, "sheet does not have source map URL"); + info(`Checking ${sheet.href}`); + if (/mapped\.css/.test(sheet.href)) { + is( + sheet.sourceMapURL, + "mapped.css.map", + "X-SourceMap header took effect" + ); + seenSheets |= 1; + } else if (/mapped2\.css/.test(sheet.href)) { + is( + sheet.sourceMapURL, + "mapped2.css.map", + "SourceMap header took effect" + ); + seenSheets |= 2; + } else { + ok(false, "sheet does not have source map URL"); + } } - } is(seenSheets, 3, "seen all source-mapped sheets"); - }); - }); + }); + } + ); }); diff --git a/layout/style/test/browser_sourcemap_comment.js b/layout/style/test/browser_sourcemap_comment.js index f2a9ba251107..5a0dde3eaaab 100644 --- a/layout/style/test/browser_sourcemap_comment.js +++ b/layout/style/test/browser_sourcemap_comment.js @@ -17,24 +17,33 @@ add_task(async function() { let page = "\n\n\n"; for (let i = 0; i < test_cases.length; ++i) { - page += `\n`; + page += `\n`; } page += "some text"; let uri = "data:text/html;base64," + btoa(page); info(`URI is ${uri}`); - await BrowserTestUtils.withNewTab({ - gBrowser, - url: uri - }, async function(browser) { - await ContentTask.spawn(browser, test_cases, function* (tests) { - for (let i = 0; i < content.document.styleSheets.length; ++i) { - let sheet = content.document.styleSheets[i]; + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: uri, + }, + async function(browser) { + await ContentTask.spawn(browser, test_cases, function*(tests) { + for (let i = 0; i < content.document.styleSheets.length; ++i) { + let sheet = content.document.styleSheets[i]; - info(`Checking sheet #${i}`); - is(sheet.sourceMapURL, tests[i][1], `correct source map for sheet ${i}`); - } - }); - }); + info(`Checking sheet #${i}`); + is( + sheet.sourceMapURL, + tests[i][1], + `correct source map for sheet ${i}` + ); + } + }); + } + ); }); diff --git a/layout/style/test/browser_sourceurl_comment.js b/layout/style/test/browser_sourceurl_comment.js index 5220f678df1b..08a5f3c19c1a 100644 --- a/layout/style/test/browser_sourceurl_comment.js +++ b/layout/style/test/browser_sourceurl_comment.js @@ -17,24 +17,29 @@ add_task(async function() { let page = "\n\n\n"; for (let i = 0; i < test_cases.length; ++i) { - page += `\n`; + page += `\n`; } page += "some text"; let uri = "data:text/html;base64," + btoa(page); info(`URI is ${uri}`); - await BrowserTestUtils.withNewTab({ - gBrowser, - url: uri - }, async function(browser) { - await ContentTask.spawn(browser, test_cases, function* (tests) { - for (let i = 0; i < content.document.styleSheets.length; ++i) { - let sheet = content.document.styleSheets[i]; + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: uri, + }, + async function(browser) { + await ContentTask.spawn(browser, test_cases, function*(tests) { + for (let i = 0; i < content.document.styleSheets.length; ++i) { + let sheet = content.document.styleSheets[i]; - info(`Checking sheet #${i}`); - is(sheet.sourceURL, tests[i][1], `correct source URL for sheet ${i}`); - } - }); - }); + info(`Checking sheet #${i}`); + is(sheet.sourceURL, tests[i][1], `correct source URL for sheet ${i}`); + } + }); + } + ); }); diff --git a/layout/style/test/chrome/bug418986-2.js b/layout/style/test/chrome/bug418986-2.js index 0e842d9d58b6..a674723f5a6c 100644 --- a/layout/style/test/chrome/bug418986-2.js +++ b/layout/style/test/chrome/bug418986-2.js @@ -16,26 +16,38 @@ var expected_values = [ ["color", null, 8], ["color-index", null, 0], ["aspect-ratio", null, window.innerWidth + "/" + window.innerHeight], - ["device-aspect-ratio", screen.width + "/" + screen.height, - window.innerWidth + "/" + window.innerHeight], + [ + "device-aspect-ratio", + screen.width + "/" + screen.height, + window.innerWidth + "/" + window.innerHeight, + ], ["device-height", screen.height + "px", window.innerHeight + "px"], ["device-width", screen.width + "px", window.innerWidth + "px"], ["grid", null, 0], ["height", window.innerHeight + "px", window.innerHeight + "px"], ["monochrome", null, 0], // Square is defined as portrait: - ["orientation", null, - window.innerWidth > window.innerHeight ? - "landscape" : "portrait"], + [ + "orientation", + null, + window.innerWidth > window.innerHeight ? "landscape" : "portrait", + ], ["resolution", null, "96dpi"], - ["resolution", [0.999 * window.devicePixelRatio + "dppx", - 1.001 * window.devicePixelRatio + "dppx"], "1dppx"], + [ + "resolution", + [ + 0.999 * window.devicePixelRatio + "dppx", + 1.001 * window.devicePixelRatio + "dppx", + ], + "1dppx", + ], ["width", window.innerWidth + "px", window.innerWidth + "px"], ["-moz-device-pixel-ratio", window.devicePixelRatio, 1], - ["-moz-device-orientation", screen.width > screen.height ? - "landscape" : "portrait", - window.innerWidth > window.innerHeight ? - "landscape" : "portrait"] + [ + "-moz-device-orientation", + screen.width > screen.height ? "landscape" : "portrait", + window.innerWidth > window.innerHeight ? "landscape" : "portrait", + ], ]; // These media queries return value 0 or 1 when the pref is off. @@ -43,7 +55,7 @@ var expected_values = [ var suppressed_toggles = [ "-moz-mac-graphite-theme", // Not available on most OSs. -// "-moz-maemo-classic", + // "-moz-maemo-classic", "-moz-scrollbar-end-backward", "-moz-scrollbar-end-forward", "-moz-scrollbar-start-backward", @@ -62,16 +74,10 @@ var suppressed_toggles = [ "-moz-gtk-csd-reversed-placement", ]; -var toggles_enabled_in_content = [ - "-moz-touch-enabled", -]; +var toggles_enabled_in_content = ["-moz-touch-enabled"]; // Possible values for '-moz-os-version' -var windows_versions = [ - "windows-win7", - "windows-win8", - "windows-win10", -]; +var windows_versions = ["windows-win7", "windows-win8", "windows-win10"]; // Read the current OS. var OS = SpecialPowers.Services.appinfo.OS; @@ -84,18 +90,22 @@ if (OS === "WINNT") { // __keyValMatches(key, val)__. // Runs a media query and returns true if key matches to val. -var keyValMatches = (key, val) => matchMedia("(" + key + ":" + val +")").matches; +var keyValMatches = (key, val) => + matchMedia("(" + key + ":" + val + ")").matches; // __testMatch(key, val)__. // Attempts to run a media query match for the given key and value. // If value is an array of two elements [min max], then matches any // value in-between. -var testMatch = function (key, val) { +var testMatch = function(key, val) { if (val === null) { return; } else if (Array.isArray(val)) { - ok(keyValMatches("min-" + key, val[0]) && keyValMatches("max-" + key, val[1]), - "Expected " + key + " between " + val[0] + " and " + val[1]); + ok( + keyValMatches("min-" + key, val[0]) && + keyValMatches("max-" + key, val[1]), + "Expected " + key + " between " + val[0] + " and " + val[1] + ); } else { ok(keyValMatches(key, val), "Expected " + key + ":" + val); } @@ -103,26 +113,28 @@ var testMatch = function (key, val) { // __testToggles(resisting)__. // Test whether we are able to match the "toggle" media queries. -var testToggles = function (resisting) { - suppressed_toggles.forEach( - function (key) { - var exists = keyValMatches(key, 0) || keyValMatches(key, 1); - if (!toggles_enabled_in_content.includes(key) && !is_chrome_window) { - ok(!exists, key + " should not exist."); - } else { - ok(exists, key + " should exist."); - if (resisting) { - ok(keyValMatches(key, 0) && !keyValMatches(key, 1), "Should always match as false"); - } +var testToggles = function(resisting) { + suppressed_toggles.forEach(function(key) { + var exists = keyValMatches(key, 0) || keyValMatches(key, 1); + if (!toggles_enabled_in_content.includes(key) && !is_chrome_window) { + ok(!exists, key + " should not exist."); + } else { + ok(exists, key + " should exist."); + if (resisting) { + ok( + keyValMatches(key, 0) && !keyValMatches(key, 1), + "Should always match as false" + ); } - }); + } + }); }; // __testWindowsSpecific__. // Runs a media query on the queryName with the given possible matching values. -var testWindowsSpecific = function (resisting, queryName, possibleValues) { +var testWindowsSpecific = function(resisting, queryName, possibleValues) { let foundValue = null; - possibleValues.forEach(function (val) { + possibleValues.forEach(function(val) { if (keyValMatches(queryName, val)) { foundValue = val; } @@ -130,8 +142,12 @@ var testWindowsSpecific = function (resisting, queryName, possibleValues) { if (resisting || !is_chrome_window) { ok(!foundValue, queryName + " should have no match"); } else { - ok(foundValue, foundValue ? ("Match found: '" + queryName + ":" + foundValue + "'") - : "Should have a match for '" + queryName + "'"); + ok( + foundValue, + foundValue + ? "Match found: '" + queryName + ":" + foundValue + "'" + : "Should have a match for '" + queryName + "'" + ); } }; @@ -139,27 +155,25 @@ var testWindowsSpecific = function (resisting, queryName, possibleValues) { // Create a series of div elements that look like: // `
resolution
`, // where each line corresponds to a different media query. -var generateHtmlLines = function (resisting) { +var generateHtmlLines = function(resisting) { let fragment = document.createDocumentFragment(); - expected_values.forEach( - function ([key, offVal, onVal]) { - let val = resisting ? onVal : offVal; - if (val) { - let div = document.createElementNS(HTML_NS, "div"); - div.setAttribute("class", "spoof"); - div.setAttribute("id", key); - div.textContent = key; - fragment.appendChild(div); - } - }); - suppressed_toggles.forEach( - function (key) { + expected_values.forEach(function([key, offVal, onVal]) { + let val = resisting ? onVal : offVal; + if (val) { let div = document.createElementNS(HTML_NS, "div"); - div.setAttribute("class", "suppress"); + div.setAttribute("class", "spoof"); div.setAttribute("id", key); div.textContent = key; fragment.appendChild(div); - }); + } + }); + suppressed_toggles.forEach(function(key) { + let div = document.createElementNS(HTML_NS, "div"); + div.setAttribute("class", "suppress"); + div.setAttribute("id", key); + div.textContent = key; + fragment.appendChild(div); + }); if (OS === "WINNT") { let div = document.createElementNS(HTML_NS, "div"); div.setAttribute("class", "windows"); @@ -173,23 +187,32 @@ var generateHtmlLines = function (resisting) { // __cssLine__. // Creates a line of css that looks something like // `@media (resolution: 1ppx) { .spoof#resolution { background-color: green; } }`. -var cssLine = function (query, clazz, id, color) { - return "@media " + query + " { ." + clazz + "#" + id + - " { background-color: " + color + "; } }\n"; +var cssLine = function(query, clazz, id, color) { + return ( + "@media " + + query + + " { ." + + clazz + + "#" + + id + + " { background-color: " + + color + + "; } }\n" + ); }; // __constructQuery(key, val)__. // Creates a CSS media query from key and val. If key is an array of // two elements, constructs a range query (using min- and max-). -var constructQuery = function (key, val) { - return Array.isArray(val) ? - "(min-" + key + ": " + val[0] + ") and (max-" + key + ": " + val[1] + ")" : - "(" + key + ": " + val + ")"; +var constructQuery = function(key, val) { + return Array.isArray(val) + ? "(min-" + key + ": " + val[0] + ") and (max-" + key + ": " + val[1] + ")" + : "(" + key + ": " + val + ")"; }; // __mediaQueryCSSLine(key, val, color)__. // Creates a line containing a CSS media query and a CSS expression. -var mediaQueryCSSLine = function (key, val, color) { +var mediaQueryCSSLine = function(key, val, color) { if (val === null) { return ""; } @@ -199,7 +222,7 @@ var mediaQueryCSSLine = function (key, val, color) { // __suppressedMediaQueryCSSLine(key, color)__. // Creates a CSS line that matches the existence of a // media query that is supposed to be suppressed. -var suppressedMediaQueryCSSLine = function (key, color, suppressed) { +var suppressedMediaQueryCSSLine = function(key, color, suppressed) { let query = "(" + key + ": 0), (" + key + ": 1)"; return cssLine(query, "suppress", key, color); }; @@ -208,25 +231,32 @@ var suppressedMediaQueryCSSLine = function (key, color, suppressed) { // Creates a series of lines of CSS, each of which corresponds to // a different media query. If the query produces a match to the // expected value, then the element will be colored green. -var generateCSSLines = function (resisting) { +var generateCSSLines = function(resisting) { let lines = ".spoof { background-color: red;}\n"; - expected_values.forEach( - function ([key, offVal, onVal]) { - lines += mediaQueryCSSLine(key, resisting ? onVal : offVal, "green"); - }); - lines += ".suppress { background-color: " + (resisting ? "green" : "red") + ";}\n"; - suppressed_toggles.forEach( - function (key) { - if (!toggles_enabled_in_content.includes(key) && !resisting && !is_chrome_window) { - lines += "#" + key + " { background-color: green; }\n"; - } else { - lines += suppressedMediaQueryCSSLine(key, "green"); - } - }); + expected_values.forEach(function([key, offVal, onVal]) { + lines += mediaQueryCSSLine(key, resisting ? onVal : offVal, "green"); + }); + lines += + ".suppress { background-color: " + (resisting ? "green" : "red") + ";}\n"; + suppressed_toggles.forEach(function(key) { + if ( + !toggles_enabled_in_content.includes(key) && + !resisting && + !is_chrome_window + ) { + lines += "#" + key + " { background-color: green; }\n"; + } else { + lines += suppressedMediaQueryCSSLine(key, "green"); + } + }); if (OS === "WINNT") { - lines += ".windows { background-color: " + (resisting ? "green" : "red") + ";}\n"; - lines += windows_versions.map(val => "(-moz-os-version: " + val + ")").join(", ") + - " { #-moz-os-version { background-color: " + (resisting ? "red" : "green") + ";} }\n"; + lines += + ".windows { background-color: " + (resisting ? "green" : "red") + ";}\n"; + lines += + windows_versions.map(val => "(-moz-os-version: " + val + ")").join(", ") + + " { #-moz-os-version { background-color: " + + (resisting ? "red" : "green") + + ";} }\n"; } return lines; }; @@ -239,7 +269,7 @@ var green = "rgb(0, 128, 0)"; // Creates a series of divs and CSS using media queries to set their // background color. If all media queries match as expected, then // all divs should have a green background color. -var testCSS = function (resisting) { +var testCSS = function(resisting) { document.getElementById("display").appendChild(generateHtmlLines(resisting)); document.getElementById("test-css").textContent = generateCSSLines(resisting); let cssTestDivs = document.querySelectorAll(".spoof,.suppress"); @@ -252,20 +282,26 @@ var testCSS = function (resisting) { // __testOSXFontSmoothing(resisting)__. // When fingerprinting resistance is enabled, the `getComputedStyle` // should always return `undefined` for `MozOSXFontSmoothing`. -var testOSXFontSmoothing = function (resisting) { +var testOSXFontSmoothing = function(resisting) { let div = document.createElementNS(HTML_NS, "div"); div.style.MozOsxFontSmoothing = "unset"; document.documentElement.appendChild(div); let readBack = window.getComputedStyle(div).MozOsxFontSmoothing; div.remove(); - let smoothingPref = SpecialPowers.getBoolPref("layout.css.osx-font-smoothing.enabled", false); - is(readBack, resisting ? "" : (smoothingPref ? "auto" : ""), - "-moz-osx-font-smoothing"); + let smoothingPref = SpecialPowers.getBoolPref( + "layout.css.osx-font-smoothing.enabled", + false + ); + is( + readBack, + resisting ? "" : smoothingPref ? "auto" : "", + "-moz-osx-font-smoothing" + ); }; // __sleep(timeoutMs)__. // Returns a promise that resolves after the given timeout. -var sleep = function (timeoutMs) { +var sleep = function(timeoutMs) { return new Promise(function(resolve, reject) { window.setTimeout(resolve); }); @@ -282,7 +318,10 @@ var testMediaQueriesInPictureElements = async function(resisting) { let query = constructQuery(key, expected); let source = document.createElementNS(HTML_NS, "source"); - source.setAttribute("srcset", "/tests/layout/style/test/chrome/match.png"); + source.setAttribute( + "srcset", + "/tests/layout/style/test/chrome/match.png" + ); source.setAttribute("media", query); let image = document.createElementNS(HTML_NS, "img"); @@ -299,16 +338,19 @@ var testMediaQueriesInPictureElements = async function(resisting) { var testImages = document.getElementsByClassName("testImage"); await sleep(0); for (let testImage of testImages) { - ok(testImage.currentSrc.endsWith("/match.png"), "Media query '" + testImage.title + "' in picture should match."); + ok( + testImage.currentSrc.endsWith("/match.png"), + "Media query '" + testImage.title + "' in picture should match." + ); } }; // __pushPref(key, value)__. // Set a pref value asynchronously, returning a promise that resolves // when it succeeds. -var pushPref = function (key, value) { +var pushPref = function(key, value) { return new Promise(function(resolve, reject) { - SpecialPowers.pushPrefEnv({"set": [[key, value]]}, resolve); + SpecialPowers.pushPrefEnv({ set: [[key, value]] }, resolve); }); }; @@ -318,10 +360,9 @@ var test = async function(isContent) { for (prefValue of [false, true]) { await pushPref("privacy.resistFingerprinting", prefValue); let resisting = prefValue && isContent; - expected_values.forEach( - function ([key, offVal, onVal]) { - testMatch(key, resisting ? onVal : offVal); - }); + expected_values.forEach(function([key, offVal, onVal]) { + testMatch(key, resisting ? onVal : offVal); + }); testToggles(resisting); if (OS === "WINNT") { testWindowsSpecific(resisting, "-moz-os-version", windows_versions); diff --git a/layout/style/test/css_properties_like_longhand.js b/layout/style/test/css_properties_like_longhand.js index 60b8fd5832cd..606de3ad6802 100644 --- a/layout/style/test/css_properties_like_longhand.js +++ b/layout/style/test/css_properties_like_longhand.js @@ -1,3 +1 @@ -var gShorthandPropertiesLikeLonghand = [ - { name: "overflow", prop: "overflow"}, -]; +var gShorthandPropertiesLikeLonghand = [{ name: "overflow", prop: "overflow" }]; diff --git a/layout/style/test/descriptor_database.js b/layout/style/test/descriptor_database.js index 14bf3fe75b6f..8e336994c9bd 100644 --- a/layout/style/test/descriptor_database.js +++ b/layout/style/test/descriptor_database.js @@ -11,67 +11,132 @@ // should be rejected. var gCSSFontFaceDescriptors = { - "font-family": { - domProp: "fontFamily", - values: [ "\"serif\"", "\"cursive\"", "seriff", "Times New Roman", "TimesRoman", "\"Times New Roman\"" ], - /* not clear that the generics are really invalid */ - invalid_values: [ "sans-serif", "Times New Roman, serif", "'Times New Roman', serif", "cursive", "fantasy", "Times )", "Times !", "Times ! foo", "Times ! important" ] - }, - "font-stretch": { - domProp: "fontStretch", - values: [ "normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded" ], - invalid_values: [ "wider", "narrower", "normal ! important", "normal )" ] - }, - "font-style": { - domProp: "fontStyle", - values: [ "normal", "italic", "oblique" ], - invalid_values: [] - }, - "font-weight": { - domProp: "fontWeight", - values: [ - "normal", "400", "bold", "100", "200", "300", "500", "600", - "700", "800", "900", "107", "399", "401", "699", "710", - "calc(1001)", "calc(100 + 1)", "calc(1)", "100.6", "99", - "700 900", "300.4 500.4", "calc(200.4) calc(400.4)", - ], - invalid_values: [ "bolder", "lighter", "1001", "0", "0 100", "100 1001" ] - }, - "src": { - domProp: null, - values: [ - "url(404.ttf)", - "url(\"404.eot\")", - "url(\'404.otf\')", - "url(404.ttf) format(\"truetype\")", - "url(404.ttf) format(\"truetype\", \"opentype\")", - "url(404.ttf) format(\"truetype\", \"opentype\"), url(\'404.eot\')", - "local(Times New Roman)", - "local(\'Times New Roman\')", - "local(\"Times New Roman\")", - "local(\"serif\")", - "url(404.ttf) format(\"truetype\", \"unknown\"), local(Times New Roman), url(\'404.eot\')", - ], - invalid_values: [ - "url(404.ttf) format(truetype)", - "url(404.ttf) format(\"truetype\" \"opentype\")", - "url(404.ttf) format(\"truetype\",)", - "local(\"Times New\" Roman)", - "local(serif)", /* is this valid? */ - "url(404.ttf) )", - "url(404.ttf) ) foo", - "url(404.ttf) ! important", - "url(404.ttf) ! hello", - ] - }, - "unicode-range": { - domProp: null, - values: [ "U+0-10FFFF", "U+3-7B3", "U+3??", "U+6A", "U+3????", "U+???", "U+302-302", "U+0-7,U+A-C", "U+3??, U+500-513 ,U+612 , U+4????", "U+1FFF,U+200-27F" ], - invalid_values: [ "U+1????-2????", "U+0-7,A-C", "U+100-17F,U+200-17F", "U+100-17F,200-27F", "U+6A!important", "U+6A)" ] - }, - "font-display": { - domProp: null, - values: [ "auto", "block", "swap", "fallback", "optional" ], - invalid_values: [ "normal", "initial" ] - } -} + "font-family": { + domProp: "fontFamily", + values: [ + '"serif"', + '"cursive"', + "seriff", + "Times New Roman", + "TimesRoman", + '"Times New Roman"', + ], + /* not clear that the generics are really invalid */ + invalid_values: [ + "sans-serif", + "Times New Roman, serif", + "'Times New Roman', serif", + "cursive", + "fantasy", + "Times )", + "Times !", + "Times ! foo", + "Times ! important", + ], + }, + "font-stretch": { + domProp: "fontStretch", + values: [ + "normal", + "ultra-condensed", + "extra-condensed", + "condensed", + "semi-condensed", + "semi-expanded", + "expanded", + "extra-expanded", + "ultra-expanded", + ], + invalid_values: ["wider", "narrower", "normal ! important", "normal )"], + }, + "font-style": { + domProp: "fontStyle", + values: ["normal", "italic", "oblique"], + invalid_values: [], + }, + "font-weight": { + domProp: "fontWeight", + values: [ + "normal", + "400", + "bold", + "100", + "200", + "300", + "500", + "600", + "700", + "800", + "900", + "107", + "399", + "401", + "699", + "710", + "calc(1001)", + "calc(100 + 1)", + "calc(1)", + "100.6", + "99", + "700 900", + "300.4 500.4", + "calc(200.4) calc(400.4)", + ], + invalid_values: ["bolder", "lighter", "1001", "0", "0 100", "100 1001"], + }, + src: { + domProp: null, + values: [ + "url(404.ttf)", + 'url("404.eot")', + "url('404.otf')", + 'url(404.ttf) format("truetype")', + 'url(404.ttf) format("truetype", "opentype")', + 'url(404.ttf) format("truetype", "opentype"), url(\'404.eot\')', + "local(Times New Roman)", + "local('Times New Roman')", + 'local("Times New Roman")', + 'local("serif")', + 'url(404.ttf) format("truetype", "unknown"), local(Times New Roman), url(\'404.eot\')', + ], + invalid_values: [ + "url(404.ttf) format(truetype)", + 'url(404.ttf) format("truetype" "opentype")', + 'url(404.ttf) format("truetype",)', + 'local("Times New" Roman)', + "local(serif)" /* is this valid? */, + "url(404.ttf) )", + "url(404.ttf) ) foo", + "url(404.ttf) ! important", + "url(404.ttf) ! hello", + ], + }, + "unicode-range": { + domProp: null, + values: [ + "U+0-10FFFF", + "U+3-7B3", + "U+3??", + "U+6A", + "U+3????", + "U+???", + "U+302-302", + "U+0-7,U+A-C", + "U+3??, U+500-513 ,U+612 , U+4????", + "U+1FFF,U+200-27F", + ], + invalid_values: [ + "U+1????-2????", + "U+0-7,A-C", + "U+100-17F,U+200-17F", + "U+100-17F,200-27F", + "U+6A!important", + "U+6A)", + ], + }, + "font-display": { + domProp: null, + values: ["auto", "block", "swap", "fallback", "optional"], + invalid_values: ["normal", "initial"], + }, +}; diff --git a/layout/style/test/flexbox_layout_testcases.js b/layout/style/test/flexbox_layout_testcases.js index 56eac369f935..c8990877ab85 100644 --- a/layout/style/test/flexbox_layout_testcases.js +++ b/layout/style/test/flexbox_layout_testcases.js @@ -40,1357 +40,1278 @@ var gDefaultFlexContainerSize = "200px"; // Left-to-right versions of placeholder property-names used in // testcases below: -var gRowPropertyMapping = -{ - "_main-size": "width", - "_min-main-size": "min-width", - "_max-main-size": "max-width", +var gRowPropertyMapping = { + "_main-size": "width", + "_min-main-size": "min-width", + "_max-main-size": "max-width", "_border-main-start-width": "border-left-width", - "_border-main-end-width": "border-right-width", - "_padding-main-start": "padding-left", - "_padding-main-end": "padding-right", - "_margin-main-start": "margin-left", - "_margin-main-end": "margin-right" + "_border-main-end-width": "border-right-width", + "_padding-main-start": "padding-left", + "_padding-main-end": "padding-right", + "_margin-main-start": "margin-left", + "_margin-main-end": "margin-right", }; // Right-to-left versions of placeholder property-names used in // testcases below: -var gRowReversePropertyMapping = -{ - "_main-size": "width", - "_min-main-size": "min-width", - "_max-main-size": "max-width", +var gRowReversePropertyMapping = { + "_main-size": "width", + "_min-main-size": "min-width", + "_max-main-size": "max-width", "_border-main-start-width": "border-right-width", - "_border-main-end-width": "border-left-width", - "_padding-main-start": "padding-right", - "_padding-main-end": "padding-left", - "_margin-main-start": "margin-right", - "_margin-main-end": "margin-left" + "_border-main-end-width": "border-left-width", + "_padding-main-start": "padding-right", + "_padding-main-end": "padding-left", + "_margin-main-start": "margin-right", + "_margin-main-end": "margin-left", }; // Top-to-bottom versions of placeholder property-names used in // testcases below: -var gColumnPropertyMapping = -{ - "_main-size": "height", - "_min-main-size": "min-height", - "_max-main-size": "max-height", +var gColumnPropertyMapping = { + "_main-size": "height", + "_min-main-size": "min-height", + "_max-main-size": "max-height", "_border-main-start-width": "border-top-width", - "_border-main-end-width": "border-bottom-width", - "_padding-main-start": "padding-top", - "_padding-main-end": "padding-bottom", - "_margin-main-start": "margin-top", - "_margin-main-end": "margin-bottom" + "_border-main-end-width": "border-bottom-width", + "_padding-main-start": "padding-top", + "_padding-main-end": "padding-bottom", + "_margin-main-start": "margin-top", + "_margin-main-end": "margin-bottom", }; // Bottom-to-top versions of placeholder property-names used in // testcases below: -var gColumnReversePropertyMapping = -{ - "_main-size": "height", - "_min-main-size": "min-height", - "_max-main-size": "max-height", +var gColumnReversePropertyMapping = { + "_main-size": "height", + "_min-main-size": "min-height", + "_max-main-size": "max-height", "_border-main-start-width": "border-bottom-width", - "_border-main-end-width": "border-top-width", - "_padding-main-start": "padding-bottom", - "_padding-main-end": "padding-top", - "_margin-main-start": "margin-bottom", - "_margin-main-end": "margin-top" + "_border-main-end-width": "border-top-width", + "_padding-main-start": "padding-bottom", + "_padding-main-end": "padding-top", + "_margin-main-start": "margin-bottom", + "_margin-main-end": "margin-top", }; // The list of actual testcase definitions: -var gFlexboxTestcases = -[ - // No flex properties specified --> should just use 'width' for sizing - { - items: - [ - { "_main-size": [ "40px", "40px" ] }, - { "_main-size": [ "65px", "65px" ] }, - ] - }, - // flex-basis is specified: - { - items: - [ - { "flex-basis": "50px", - "_main-size": [ null, "50px" ] - }, - { - "flex-basis": "20px", - "_main-size": [ null, "20px" ] - }, - ] - }, - // flex-basis is *large* -- sum of flex-basis values is > flex container size: - // (w/ 0 flex-shrink so we don't shrink): - { - items: - [ - { - "flex": "0 0 150px", - "_main-size": [ null, "150px" ] - }, - { - "flex": "0 0 90px", - "_main-size": [ null, "90px" ] - }, - ] - }, - // flex-basis is *large* -- each flex-basis value is > flex container size: - // (w/ 0 flex-shrink so we don't shrink): - { - items: - [ - { - "flex": "0 0 250px", - "_main-size": [ null, "250px" ] - }, - { - "flex": "0 0 400px", - "_main-size": [ null, "400px" ] - }, - ] - }, - // flex-basis has percentage value: - { - items: - [ - { - "flex-basis": "30%", - "_main-size": [ null, "60px" ] - }, - { - "flex-basis": "45%", - "_main-size": [ null, "90px" ] - }, - ] - }, - // flex-basis has calc(percentage) value: - { - items: - [ - { - "flex-basis": "calc(20%)", - "_main-size": [ null, "40px" ] - }, - { - "flex-basis": "calc(80%)", - "_main-size": [ null, "160px" ] - }, - ] - }, - // flex-basis has calc(percentage +/- length) value: - { - items: - [ - { - "flex-basis": "calc(10px + 20%)", - "_main-size": [ null, "50px" ] - }, - { - "flex-basis": "calc(60% - 1px)", - "_main-size": [ null, "119px" ] - }, - ] - }, - // flex-grow is specified: - { - items: - [ - { - "flex": "1", - "_main-size": [ null, "60px" ] - }, - { - "flex": "2", - "_main-size": [ null, "120px" ] - }, - { - "flex": "0 20px", - "_main-size": [ null, "20px" ] - } - ] - }, - // Same ratio as prev. testcase; making sure we handle float inaccuracy - { - items: - [ - { - "flex": "100000", - "_main-size": [ null, "60px" ] - }, - { - "flex": "200000", - "_main-size": [ null, "120px" ] - }, - { - "flex": "0.000001 20px", - "_main-size": [ null, "20px" ] - } - ] - }, - // Same ratio as prev. testcase, but with items cycled and w/ - // "flex: none" & explicit size instead of "flex: 0 20px" - { - items: - [ - { - "flex": "none", - "_main-size": [ "20px", "20px" ] - }, - { - "flex": "1", - "_main-size": [ null, "60px" ] - }, - { - "flex": "2", - "_main-size": [ null, "120px" ] - } - ] - }, +var gFlexboxTestcases = [ + // No flex properties specified --> should just use 'width' for sizing + { + items: [ + { "_main-size": ["40px", "40px"] }, + { "_main-size": ["65px", "65px"] }, + ], + }, + // flex-basis is specified: + { + items: [ + { "flex-basis": "50px", "_main-size": [null, "50px"] }, + { + "flex-basis": "20px", + "_main-size": [null, "20px"], + }, + ], + }, + // flex-basis is *large* -- sum of flex-basis values is > flex container size: + // (w/ 0 flex-shrink so we don't shrink): + { + items: [ + { + flex: "0 0 150px", + "_main-size": [null, "150px"], + }, + { + flex: "0 0 90px", + "_main-size": [null, "90px"], + }, + ], + }, + // flex-basis is *large* -- each flex-basis value is > flex container size: + // (w/ 0 flex-shrink so we don't shrink): + { + items: [ + { + flex: "0 0 250px", + "_main-size": [null, "250px"], + }, + { + flex: "0 0 400px", + "_main-size": [null, "400px"], + }, + ], + }, + // flex-basis has percentage value: + { + items: [ + { + "flex-basis": "30%", + "_main-size": [null, "60px"], + }, + { + "flex-basis": "45%", + "_main-size": [null, "90px"], + }, + ], + }, + // flex-basis has calc(percentage) value: + { + items: [ + { + "flex-basis": "calc(20%)", + "_main-size": [null, "40px"], + }, + { + "flex-basis": "calc(80%)", + "_main-size": [null, "160px"], + }, + ], + }, + // flex-basis has calc(percentage +/- length) value: + { + items: [ + { + "flex-basis": "calc(10px + 20%)", + "_main-size": [null, "50px"], + }, + { + "flex-basis": "calc(60% - 1px)", + "_main-size": [null, "119px"], + }, + ], + }, + // flex-grow is specified: + { + items: [ + { + flex: "1", + "_main-size": [null, "60px"], + }, + { + flex: "2", + "_main-size": [null, "120px"], + }, + { + flex: "0 20px", + "_main-size": [null, "20px"], + }, + ], + }, + // Same ratio as prev. testcase; making sure we handle float inaccuracy + { + items: [ + { + flex: "100000", + "_main-size": [null, "60px"], + }, + { + flex: "200000", + "_main-size": [null, "120px"], + }, + { + flex: "0.000001 20px", + "_main-size": [null, "20px"], + }, + ], + }, + // Same ratio as prev. testcase, but with items cycled and w/ + // "flex: none" & explicit size instead of "flex: 0 20px" + { + items: [ + { + flex: "none", + "_main-size": ["20px", "20px"], + }, + { + flex: "1", + "_main-size": [null, "60px"], + }, + { + flex: "2", + "_main-size": [null, "120px"], + }, + ], + }, - // ...and now with flex-grow:[huge] to be sure we handle infinite float values - // gracefully. - { - items: - [ - { - "flex": "9999999999999999999999999999999999999999999999999999999", - "_main-size": [ null, "200px" ] - }, - ] - }, - { - items: - [ - { - "flex": "9999999999999999999999999999999999999999999999999999999", - "_main-size": [ null, "50px" ] - }, - { - "flex": "9999999999999999999999999999999999999999999999999999999", - "_main-size": [ null, "50px" ] - }, - { - "flex": "9999999999999999999999999999999999999999999999999999999", - "_main-size": [ null, "50px" ] - }, - { - "flex": "9999999999999999999999999999999999999999999999999999999", - "_main-size": [ null, "50px" ] - }, - ] - }, - { - items: - [ - { - "flex": "99999999999999999999999999999999999", - "_main-size": [ null, "50px" ] - }, - { - "flex": "99999999999999999999999999999999999", - "_main-size": [ null, "50px" ] - }, - { - "flex": "99999999999999999999999999999999999", - "_main-size": [ null, "50px" ] - }, - { - "flex": "99999999999999999999999999999999999", - "_main-size": [ null, "50px" ] - }, - ] - }, + // ...and now with flex-grow:[huge] to be sure we handle infinite float values + // gracefully. + { + items: [ + { + flex: "9999999999999999999999999999999999999999999999999999999", + "_main-size": [null, "200px"], + }, + ], + }, + { + items: [ + { + flex: "9999999999999999999999999999999999999999999999999999999", + "_main-size": [null, "50px"], + }, + { + flex: "9999999999999999999999999999999999999999999999999999999", + "_main-size": [null, "50px"], + }, + { + flex: "9999999999999999999999999999999999999999999999999999999", + "_main-size": [null, "50px"], + }, + { + flex: "9999999999999999999999999999999999999999999999999999999", + "_main-size": [null, "50px"], + }, + ], + }, + { + items: [ + { + flex: "99999999999999999999999999999999999", + "_main-size": [null, "50px"], + }, + { + flex: "99999999999999999999999999999999999", + "_main-size": [null, "50px"], + }, + { + flex: "99999999999999999999999999999999999", + "_main-size": [null, "50px"], + }, + { + flex: "99999999999999999999999999999999999", + "_main-size": [null, "50px"], + }, + ], + }, - // And now, some testcases to check that we handle float accumulation error - // gracefully. + // And now, some testcases to check that we handle float accumulation error + // gracefully. - // First, a testcase with just a custom-sized huge container, to be sure we'll - // be able to handle content on that scale, in the subsequent more-complex - // testcases: - { - container_properties: - { - "_main-size": "9000000px" - }, - items: - [ - { - "flex": "1", - "_main-size": [ null, "9000000px" ] - }, - ] - }, - // ...and now with two flex items dividing up that container's huge size: - { - container_properties: - { - "_main-size": "9000000px" - }, - items: - [ - { - "flex": "2", - "_main-size": [ null, "6000000px" ] - }, - { - "flex": "1", - "_main-size": [ null, "3000000px" ] - }, - ] - }, + // First, a testcase with just a custom-sized huge container, to be sure we'll + // be able to handle content on that scale, in the subsequent more-complex + // testcases: + { + container_properties: { + "_main-size": "9000000px", + }, + items: [ + { + flex: "1", + "_main-size": [null, "9000000px"], + }, + ], + }, + // ...and now with two flex items dividing up that container's huge size: + { + container_properties: { + "_main-size": "9000000px", + }, + items: [ + { + flex: "2", + "_main-size": [null, "6000000px"], + }, + { + flex: "1", + "_main-size": [null, "3000000px"], + }, + ], + }, - // OK, now to actually test accumulation error. Below, we have six flex items - // splitting up the container's size, with huge differences between flex - // weights. For simplicity, I've set up the weights so that they sum exactly - // to the container's size in px. So 1 unit of flex *should* get you 1px. - // - // NOTE: The expected computed "_main-size" values for the flex items below - // appear to add up to more than their container's size, which would suggest - // that they overflow their container unnecessarily. But they don't actually - // overflow -- this discrepancy is simply because Gecko's code for reporting - // computed-sizes rounds to 6 significant figures (in particular, the method - // (nsTSubstring_CharT::AppendFloat() does this). Internally, in app-units, - // the child frames' main-sizes add up exactly to the container's main-size, - // as you'd hope & expect. - { - container_properties: - { - "_main-size": "9000000px" - }, - items: - [ - { - "flex": "3000000", - "_main-size": [ null, "3000000px" ] - }, - { - "flex": "1", - "_main-size": [ null, "1px" ] - }, - { - "flex": "1", - "_main-size": [ null, "1px" ] - }, - { - "flex": "2999999", - // NOTE: Expected value is off slightly, from float error when - // resolving flexible lengths & when generating computed value string: - "_main-size": [ null, "3000000px" ] - }, - { - "flex": "2999998", - // NOTE: Expected value is off slightly, from float error when - // resolving flexible lengths & when generating computed value string: - "_main-size": [ null, "3000000px" ] - }, - { - "flex": "1", - "_main-size": [ null, "1px", 0.2 ] - }, - ] - }, - // Same flex items as previous testcase, but now reordered such that the items - // with tiny flex weights are all listed last: - { - container_properties: - { - "_main-size": "9000000px" - }, - items: - [ - { - "flex": "3000000", - "_main-size": [ null, "3000000px" ] - }, - { - "flex": "2999999", - // NOTE: Expected value is off slightly, from float error when - // resolving flexible lengths & when generating computed value string: - "_main-size": [ null, "3000000px" ] - }, - { - "flex": "2999998", - // NOTE: Expected value is off slightly, from float error when - // resolving flexible lengths & when generating computed value string: - "_main-size": [ null, "3000000px" ] - }, - { - "flex": "1", - "_main-size": [ null, "1px", 0.2 ] - }, - { - "flex": "1", - "_main-size": [ null, "1px", 0.2 ] - }, - { - "flex": "1", - "_main-size": [ null, "1px", 0.2 ] - }, - ] - }, - // Same flex items as previous testcase, but now reordered such that the items - // with tiny flex weights are all listed first: - { - container_properties: - { - "_main-size": "9000000px" - }, - items: - [ - { - "flex": "1", - // NOTE: Expected value is off slightly, from float error when - // resolving flexible lengths: - "_main-size": [ null, "1px", 0.2 ] - }, - { - "flex": "1", - // NOTE: Expected value is off slightly, from float error when - // resolving flexible lengths: - "_main-size": [ null, "1px", 0.2 ] - }, - { - "flex": "1", - // NOTE: Expected value is off slightly, from float error when - // resolving flexible lengths: - "_main-size": [ null, "1px", 0.2 ] - }, - { - "flex": "3000000", - "_main-size": [ null, "3000000px" ] - }, - { - "flex": "2999999", - // NOTE: Expected value is off slightly, from float error when - // resolving flexible lengths & when generating computed value string: - "_main-size": [ null, "3000000px" ] - }, - { - "flex": "2999998", - // NOTE: Expected value is off slightly, from float error when - // resolving flexible lengths & when generating computed value string: - "_main-size": [ null, "3000000px" ] - }, - ] - }, + // OK, now to actually test accumulation error. Below, we have six flex items + // splitting up the container's size, with huge differences between flex + // weights. For simplicity, I've set up the weights so that they sum exactly + // to the container's size in px. So 1 unit of flex *should* get you 1px. + // + // NOTE: The expected computed "_main-size" values for the flex items below + // appear to add up to more than their container's size, which would suggest + // that they overflow their container unnecessarily. But they don't actually + // overflow -- this discrepancy is simply because Gecko's code for reporting + // computed-sizes rounds to 6 significant figures (in particular, the method + // (nsTSubstring_CharT::AppendFloat() does this). Internally, in app-units, + // the child frames' main-sizes add up exactly to the container's main-size, + // as you'd hope & expect. + { + container_properties: { + "_main-size": "9000000px", + }, + items: [ + { + flex: "3000000", + "_main-size": [null, "3000000px"], + }, + { + flex: "1", + "_main-size": [null, "1px"], + }, + { + flex: "1", + "_main-size": [null, "1px"], + }, + { + flex: "2999999", + // NOTE: Expected value is off slightly, from float error when + // resolving flexible lengths & when generating computed value string: + "_main-size": [null, "3000000px"], + }, + { + flex: "2999998", + // NOTE: Expected value is off slightly, from float error when + // resolving flexible lengths & when generating computed value string: + "_main-size": [null, "3000000px"], + }, + { + flex: "1", + "_main-size": [null, "1px", 0.2], + }, + ], + }, + // Same flex items as previous testcase, but now reordered such that the items + // with tiny flex weights are all listed last: + { + container_properties: { + "_main-size": "9000000px", + }, + items: [ + { + flex: "3000000", + "_main-size": [null, "3000000px"], + }, + { + flex: "2999999", + // NOTE: Expected value is off slightly, from float error when + // resolving flexible lengths & when generating computed value string: + "_main-size": [null, "3000000px"], + }, + { + flex: "2999998", + // NOTE: Expected value is off slightly, from float error when + // resolving flexible lengths & when generating computed value string: + "_main-size": [null, "3000000px"], + }, + { + flex: "1", + "_main-size": [null, "1px", 0.2], + }, + { + flex: "1", + "_main-size": [null, "1px", 0.2], + }, + { + flex: "1", + "_main-size": [null, "1px", 0.2], + }, + ], + }, + // Same flex items as previous testcase, but now reordered such that the items + // with tiny flex weights are all listed first: + { + container_properties: { + "_main-size": "9000000px", + }, + items: [ + { + flex: "1", + // NOTE: Expected value is off slightly, from float error when + // resolving flexible lengths: + "_main-size": [null, "1px", 0.2], + }, + { + flex: "1", + // NOTE: Expected value is off slightly, from float error when + // resolving flexible lengths: + "_main-size": [null, "1px", 0.2], + }, + { + flex: "1", + // NOTE: Expected value is off slightly, from float error when + // resolving flexible lengths: + "_main-size": [null, "1px", 0.2], + }, + { + flex: "3000000", + "_main-size": [null, "3000000px"], + }, + { + flex: "2999999", + // NOTE: Expected value is off slightly, from float error when + // resolving flexible lengths & when generating computed value string: + "_main-size": [null, "3000000px"], + }, + { + flex: "2999998", + // NOTE: Expected value is off slightly, from float error when + // resolving flexible lengths & when generating computed value string: + "_main-size": [null, "3000000px"], + }, + ], + }, - // Trying "flex: auto" (== "1 1 auto") w/ a mix of flex-grow/flex-basis values - { - items: - [ - { - "flex": "auto", - "_main-size": [ null, "45px" ] - }, - { - "flex": "2", - "_main-size": [ null, "90px" ] - }, - { - "flex": "20px 1 0", - "_main-size": [ null, "65px" ] - } - ] - }, - // Same as previous, but with items cycled & different syntax - { - items: - [ - { - "flex": "20px", - "_main-size": [ null, "65px" ] - }, - { - "flex": "1", - "_main-size": [ null, "45px" ] - }, - { - "flex": "2", - "_main-size": [ null, "90px" ] - } - ] - }, - { - items: - [ - { - "flex": "2", - "_main-size": [ null, "100px" ], - "border": "0px dashed", - "_border-main-start-width": [ "5px", "5px" ], - "_border-main-end-width": [ "15px", "15px" ], - "_margin-main-start": [ "22px", "22px" ], - "_margin-main-end": [ "8px", "8px" ] - }, - { - "flex": "1", - "_main-size": [ null, "50px" ], - "_margin-main-start": [ "auto", "0px" ], - "_padding-main-end": [ "auto", "0px" ], - } - ] - }, - // Test negative flexibility: + // Trying "flex: auto" (== "1 1 auto") w/ a mix of flex-grow/flex-basis values + { + items: [ + { + flex: "auto", + "_main-size": [null, "45px"], + }, + { + flex: "2", + "_main-size": [null, "90px"], + }, + { + flex: "20px 1 0", + "_main-size": [null, "65px"], + }, + ], + }, + // Same as previous, but with items cycled & different syntax + { + items: [ + { + flex: "20px", + "_main-size": [null, "65px"], + }, + { + flex: "1", + "_main-size": [null, "45px"], + }, + { + flex: "2", + "_main-size": [null, "90px"], + }, + ], + }, + { + items: [ + { + flex: "2", + "_main-size": [null, "100px"], + border: "0px dashed", + "_border-main-start-width": ["5px", "5px"], + "_border-main-end-width": ["15px", "15px"], + "_margin-main-start": ["22px", "22px"], + "_margin-main-end": ["8px", "8px"], + }, + { + flex: "1", + "_main-size": [null, "50px"], + "_margin-main-start": ["auto", "0px"], + "_padding-main-end": ["auto", "0px"], + }, + ], + }, + // Test negative flexibility: - // Basic testcase: just 1 item (relying on initial "flex-shrink: 1") -- - // should shrink to container size. - { - items: - [ - { "_main-size": [ "400px", "200px" ] }, - ], - }, - // ...and now with a "flex" specification and a different flex-shrink value: - { - items: - [ - { - "flex": "4 2 250px", - "_main-size": [ null, "200px" ] - }, - ], - }, - // ...and now with multiple items, which all shrink proportionally (by 50%) - // to fit to the container, since they have the same (initial) flex-shrink val - { - items: - [ - { "_main-size": [ "80px", "40px" ] }, - { "_main-size": [ "40px", "20px" ] }, - { "_main-size": [ "30px", "15px" ] }, - { "_main-size": [ "250px", "125px" ] }, - ] - }, - // ...and now with positive flexibility specified. (should have no effect, so - // everything still shrinks by the same proportion, since the flex-shrink - // values are all the same). - { - items: - [ - { - "flex": "4 3 100px", - "_main-size": [ null, "80px" ] - }, - { - "flex": "5 3 50px", - "_main-size": [ null, "40px" ] - }, - { - "flex": "0 3 100px", - "_main-size": [ null, "80px" ] - } - ] - }, - // ...and now with *different* flex-shrink values: - { - items: - [ - { - "flex": "4 2 50px", - "_main-size": [ null, "30px" ] - }, - { - "flex": "5 3 50px", - "_main-size": [ null, "20px" ] - }, - { - "flex": "0 0 150px", - "_main-size": [ null, "150px" ] - } - ] - }, - // Same ratio as prev. testcase; making sure we handle float inaccuracy - { - items: - [ - { - "flex": "4 20000000 50px", - "_main-size": [ null, "30px" ] - }, - { - "flex": "5 30000000 50px", - "_main-size": [ null, "20px" ] - }, - { - "flex": "0 0.0000001 150px", - "_main-size": [ null, "150px" ] - } - ] - }, - // Another "different flex-shrink values" testcase: - { - items: - [ - { - "flex": "4 2 115px", - "_main-size": [ null, "69px" ] - }, - { - "flex": "5 1 150px", - "_main-size": [ null, "120px" ] - }, - { - "flex": "1 4 30px", - "_main-size": [ null, "6px" ] - }, - { - "flex": "1 0 5px", - "_main-size": [ null, "5px" ] - }, - ] - }, + // Basic testcase: just 1 item (relying on initial "flex-shrink: 1") -- + // should shrink to container size. + { + items: [{ "_main-size": ["400px", "200px"] }], + }, + // ...and now with a "flex" specification and a different flex-shrink value: + { + items: [ + { + flex: "4 2 250px", + "_main-size": [null, "200px"], + }, + ], + }, + // ...and now with multiple items, which all shrink proportionally (by 50%) + // to fit to the container, since they have the same (initial) flex-shrink val + { + items: [ + { "_main-size": ["80px", "40px"] }, + { "_main-size": ["40px", "20px"] }, + { "_main-size": ["30px", "15px"] }, + { "_main-size": ["250px", "125px"] }, + ], + }, + // ...and now with positive flexibility specified. (should have no effect, so + // everything still shrinks by the same proportion, since the flex-shrink + // values are all the same). + { + items: [ + { + flex: "4 3 100px", + "_main-size": [null, "80px"], + }, + { + flex: "5 3 50px", + "_main-size": [null, "40px"], + }, + { + flex: "0 3 100px", + "_main-size": [null, "80px"], + }, + ], + }, + // ...and now with *different* flex-shrink values: + { + items: [ + { + flex: "4 2 50px", + "_main-size": [null, "30px"], + }, + { + flex: "5 3 50px", + "_main-size": [null, "20px"], + }, + { + flex: "0 0 150px", + "_main-size": [null, "150px"], + }, + ], + }, + // Same ratio as prev. testcase; making sure we handle float inaccuracy + { + items: [ + { + flex: "4 20000000 50px", + "_main-size": [null, "30px"], + }, + { + flex: "5 30000000 50px", + "_main-size": [null, "20px"], + }, + { + flex: "0 0.0000001 150px", + "_main-size": [null, "150px"], + }, + ], + }, + // Another "different flex-shrink values" testcase: + { + items: [ + { + flex: "4 2 115px", + "_main-size": [null, "69px"], + }, + { + flex: "5 1 150px", + "_main-size": [null, "120px"], + }, + { + flex: "1 4 30px", + "_main-size": [null, "6px"], + }, + { + flex: "1 0 5px", + "_main-size": [null, "5px"], + }, + ], + }, - // ...and now with min-size (clamping the effects of flex-shrink on one item): - { - items: - [ - { - "flex": "4 5 75px", - "_min-main-size": "50px", - "_main-size": [ null, "50px" ], - }, - { - "flex": "5 5 100px", - "_main-size": [ null, "62.5px" ] - }, - { - "flex": "0 4 125px", - "_main-size": [ null, "87.5px" ] - } - ] - }, + // ...and now with min-size (clamping the effects of flex-shrink on one item): + { + items: [ + { + flex: "4 5 75px", + "_min-main-size": "50px", + "_main-size": [null, "50px"], + }, + { + flex: "5 5 100px", + "_main-size": [null, "62.5px"], + }, + { + flex: "0 4 125px", + "_main-size": [null, "87.5px"], + }, + ], + }, - // Test a min-size that's much larger than initial preferred size, but small - // enough that our flexed size pushes us over it: - { - items: - [ - { - "flex": "auto", - "_min-main-size": "110px", - "_main-size": [ "50px", "125px" ] - }, - { - "flex": "auto", - "_main-size": [ null, "75px" ] - } - ] - }, + // Test a min-size that's much larger than initial preferred size, but small + // enough that our flexed size pushes us over it: + { + items: [ + { + flex: "auto", + "_min-main-size": "110px", + "_main-size": ["50px", "125px"], + }, + { + flex: "auto", + "_main-size": [null, "75px"], + }, + ], + }, - // Test a min-size that's much larger than initial preferred size, and is - // even larger than our positively-flexed size, so that we have to increase it - // (as a 'min violation') after we've flexed. - { - items: - [ - { - "flex": "auto", - "_min-main-size": "150px", - "_main-size": [ "50px", "150px" ] - }, - { - "flex": "auto", - "_main-size": [ null, "50px" ] - } - ] - }, + // Test a min-size that's much larger than initial preferred size, and is + // even larger than our positively-flexed size, so that we have to increase it + // (as a 'min violation') after we've flexed. + { + items: [ + { + flex: "auto", + "_min-main-size": "150px", + "_main-size": ["50px", "150px"], + }, + { + flex: "auto", + "_main-size": [null, "50px"], + }, + ], + }, - // Test min-size on multiple items simultaneously: - { - items: - [ - { - "flex": "auto", - "_min-main-size": "20px", - "_main-size": [ null, "20px" ] - }, - { - "flex": "9 auto", - "_min-main-size": "150px", - "_main-size": [ "50px", "180px" ] - }, - ] - }, - { - items: - [ - { - "flex": "1 1 0px", - "_min-main-size": "90px", - "_main-size": [ null, "90px" ] - }, - { - "flex": "1 1 0px", - "_min-main-size": "80px", - "_main-size": [ null, "80px" ] - }, - { - "flex": "1 1 40px", - "_main-size": [ null, "30px" ] - } - ] - }, + // Test min-size on multiple items simultaneously: + { + items: [ + { + flex: "auto", + "_min-main-size": "20px", + "_main-size": [null, "20px"], + }, + { + flex: "9 auto", + "_min-main-size": "150px", + "_main-size": ["50px", "180px"], + }, + ], + }, + { + items: [ + { + flex: "1 1 0px", + "_min-main-size": "90px", + "_main-size": [null, "90px"], + }, + { + flex: "1 1 0px", + "_min-main-size": "80px", + "_main-size": [null, "80px"], + }, + { + flex: "1 1 40px", + "_main-size": [null, "30px"], + }, + ], + }, - // Test a case where _min-main-size will be violated on different items in - // successive iterations of the "resolve the flexible lengths" loop - { - items: - [ - { - "flex": "1 2 100px", - "_min-main-size": "90px", - "_main-size": [ null, "90px" ] - }, - { - "flex": "1 1 100px", - "_min-main-size": "70px", - "_main-size": [ null, "70px" ] - }, - { - "flex": "1 1 100px", - "_main-size": [ null, "40px" ] - } - ] - }, + // Test a case where _min-main-size will be violated on different items in + // successive iterations of the "resolve the flexible lengths" loop + { + items: [ + { + flex: "1 2 100px", + "_min-main-size": "90px", + "_main-size": [null, "90px"], + }, + { + flex: "1 1 100px", + "_min-main-size": "70px", + "_main-size": [null, "70px"], + }, + { + flex: "1 1 100px", + "_main-size": [null, "40px"], + }, + ], + }, - // Test some cases that have a min-size violation on one item and a - // max-size violation on another: + // Test some cases that have a min-size violation on one item and a + // max-size violation on another: - // Here, both items initially grow to 100px. That violates both - // items' sizing constraints (it's smaller than the min-size and larger than - // the max-size), so we clamp both of them and sum the clamping-differences: - // - // (130px - 100px) + (50px - 100px) = (30px) + (-50px) = -20px - // - // This sum is negative, so (per spec) we freeze the item that had its - // max-size violated (the second one) and restart the algorithm. This time, - // all the available space (200px - 50px = 150px) goes to the not-yet-frozen - // first item, and that puts it above its min-size, so all is well. - { - items: - [ - { - "flex": "auto", - "_min-main-size": "130px", - "_main-size": [ null, "150px" ] - }, - { - "flex": "auto", - "_max-main-size": "50px", - "_main-size": [ null, "50px" ] - }, - ] - }, + // Here, both items initially grow to 100px. That violates both + // items' sizing constraints (it's smaller than the min-size and larger than + // the max-size), so we clamp both of them and sum the clamping-differences: + // + // (130px - 100px) + (50px - 100px) = (30px) + (-50px) = -20px + // + // This sum is negative, so (per spec) we freeze the item that had its + // max-size violated (the second one) and restart the algorithm. This time, + // all the available space (200px - 50px = 150px) goes to the not-yet-frozen + // first item, and that puts it above its min-size, so all is well. + { + items: [ + { + flex: "auto", + "_min-main-size": "130px", + "_main-size": [null, "150px"], + }, + { + flex: "auto", + "_max-main-size": "50px", + "_main-size": [null, "50px"], + }, + ], + }, - // As above, both items initially grow to 100px, and that violates both items' - // constraints. However, now the sum of the clamping differences is: - // - // (130px - 100px) + (80px - 100px) = (30px) + (-20px) = 10px - // - // This sum is positive, so (per spec) we freeze the item that had its - // min-size violated (the first one) and restart the algorithm. This time, - // all the available space (200px - 130px = 70px) goes to the not-yet-frozen - // second item, and that puts it below its max-size, so all is well. - { - items: - [ - { - "flex": "auto", - "_min-main-size": "130px", - "_main-size": [ null, "130px" ] - }, - { - "flex": "auto", - "_max-main-size": "80px", - "_main-size": [ null, "70px" ] - }, - ] - }, + // As above, both items initially grow to 100px, and that violates both items' + // constraints. However, now the sum of the clamping differences is: + // + // (130px - 100px) + (80px - 100px) = (30px) + (-20px) = 10px + // + // This sum is positive, so (per spec) we freeze the item that had its + // min-size violated (the first one) and restart the algorithm. This time, + // all the available space (200px - 130px = 70px) goes to the not-yet-frozen + // second item, and that puts it below its max-size, so all is well. + { + items: [ + { + flex: "auto", + "_min-main-size": "130px", + "_main-size": [null, "130px"], + }, + { + flex: "auto", + "_max-main-size": "80px", + "_main-size": [null, "70px"], + }, + ], + }, - // As above, both items initially grow to 100px, and that violates both items' - // constraints. So we clamp both items and sum the clamping differences to - // see what to do next. The sum is: - // - // (80px - 100px) + (120px - 100px) = (-20px) + (20px) = 0px - // - // Per spec, if the sum is 0, we're done -- we leave both items at their - // clamped sizes. - { - items: - [ - { - "flex": "auto", - "_max-main-size": "80px", - "_main-size": [ null, "80px" ] - }, - { - "flex": "auto", - "_min-main-size": "120px", - "_main-size": [ null, "120px" ] - }, - ] - }, + // As above, both items initially grow to 100px, and that violates both items' + // constraints. So we clamp both items and sum the clamping differences to + // see what to do next. The sum is: + // + // (80px - 100px) + (120px - 100px) = (-20px) + (20px) = 0px + // + // Per spec, if the sum is 0, we're done -- we leave both items at their + // clamped sizes. + { + items: [ + { + flex: "auto", + "_max-main-size": "80px", + "_main-size": [null, "80px"], + }, + { + flex: "auto", + "_min-main-size": "120px", + "_main-size": [null, "120px"], + }, + ], + }, - // Test cases where flex-grow sums to less than 1: - // =============================================== - // This makes us treat the flexibilities like "fraction of free space" - // instead of weights, so that e.g. a single item with "flex-grow: 0.1" - // will only get 10% of the free space instead of all of the free space. + // Test cases where flex-grow sums to less than 1: + // =============================================== + // This makes us treat the flexibilities like "fraction of free space" + // instead of weights, so that e.g. a single item with "flex-grow: 0.1" + // will only get 10% of the free space instead of all of the free space. - // Basic cases where flex-grow sum is less than 1: - { - items: - [ - { - "flex": "0.1 100px", - "_main-size": [ null, "110px" ] // +10% of free space - }, - ] - }, - { - items: - [ - { - "flex": "0.8 0px", - "_main-size": [ null, "160px" ] // +80% of free space - }, - ] - }, + // Basic cases where flex-grow sum is less than 1: + { + items: [ + { + flex: "0.1 100px", + "_main-size": [null, "110px"], // +10% of free space + }, + ], + }, + { + items: [ + { + flex: "0.8 0px", + "_main-size": [null, "160px"], // +80% of free space + }, + ], + }, - // ... and now with two flex items: - { - items: - [ - { - "flex": "0.4 70px", - "_main-size": [ null, "110px" ] // +40% of free space - }, - { - "flex": "0.2 30px", - "_main-size": [ null, "50px" ] // +20% of free space - }, - ] - }, + // ... and now with two flex items: + { + items: [ + { + flex: "0.4 70px", + "_main-size": [null, "110px"], // +40% of free space + }, + { + flex: "0.2 30px", + "_main-size": [null, "50px"], // +20% of free space + }, + ], + }, - // ...and now with max-size modifying how much free space one item can take: - { - items: - [ - { - "flex": "0.4 70px", - "_main-size": [ null, "110px" ] // +40% of free space - }, - { - "flex": "0.2 30px", - "_max-main-size": "35px", - "_main-size": [ null, "35px" ] // +20% free space, then clamped - }, - ] - }, - // ...and now with a max-size smaller than our flex-basis: - // (This makes us freeze the second item right away, before we compute - // the initial free space.) - { - items: - [ - { - "flex": "0.4 70px", - "_main-size": [ null, "118px" ] // +40% of 200px-70px-10px - }, - { - "flex": "0.2 30px", - "_max-main-size": "10px", - "_main-size": [ null, "10px" ] // immediately frozen - }, - ] - }, - // ...and now with a max-size and a huge flex-basis, such that we initially - // have negative free space, which makes the "% of [original] free space" - // calculations a bit more subtle. We set the "original free space" after - // we've clamped the second item (the first time the free space is positive). - { - items: - [ - { - "flex": "0.4 70px", - "_main-size": [ null, "118px" ] // +40% of free space _after freezing - // the other item_ - }, - { - "flex": "0.2 150px", - "_max-main-size": "10px", - "_main-size": [ null, "10px" ] // clamped immediately - }, - ] - }, + // ...and now with max-size modifying how much free space one item can take: + { + items: [ + { + flex: "0.4 70px", + "_main-size": [null, "110px"], // +40% of free space + }, + { + flex: "0.2 30px", + "_max-main-size": "35px", + "_main-size": [null, "35px"], // +20% free space, then clamped + }, + ], + }, + // ...and now with a max-size smaller than our flex-basis: + // (This makes us freeze the second item right away, before we compute + // the initial free space.) + { + items: [ + { + flex: "0.4 70px", + "_main-size": [null, "118px"], // +40% of 200px-70px-10px + }, + { + flex: "0.2 30px", + "_max-main-size": "10px", + "_main-size": [null, "10px"], // immediately frozen + }, + ], + }, + // ...and now with a max-size and a huge flex-basis, such that we initially + // have negative free space, which makes the "% of [original] free space" + // calculations a bit more subtle. We set the "original free space" after + // we've clamped the second item (the first time the free space is positive). + { + items: [ + { + flex: "0.4 70px", + "_main-size": [null, "118px"], // +40% of free space _after freezing + // the other item_ + }, + { + flex: "0.2 150px", + "_max-main-size": "10px", + "_main-size": [null, "10px"], // clamped immediately + }, + ], + }, - // Now with min-size modifying how much free space our items take: - { - items: - [ - { - "flex": "0.4 70px", - "_main-size": [ null, "110px" ] // +40% of free space - }, - { - "flex": "0.2 30px", - "_min-main-size": "70px", - "_main-size": [ null, "70px" ] // +20% free space, then clamped - }, - ] - }, + // Now with min-size modifying how much free space our items take: + { + items: [ + { + flex: "0.4 70px", + "_main-size": [null, "110px"], // +40% of free space + }, + { + flex: "0.2 30px", + "_min-main-size": "70px", + "_main-size": [null, "70px"], // +20% free space, then clamped + }, + ], + }, - // ...and now with a large enough min-size that it prevents the other flex - // item from taking its full desired portion of the original free space: - { - items: - [ - { - "flex": "0.4 70px", - "_main-size": [ null, "80px" ] // (Can't take my full +40% of - // free space due to other item's - // large min-size.) - }, - { - "flex": "0.2 30px", - "_min-main-size": "120px", - "_main-size": [ null, "120px" ] // +20% free space, then clamped - }, - ] - }, - // ...and now with a large-enough min-size that it pushes the other flex item - // to actually shrink a bit (with default "flex-shrink:1"): - { - items: - [ - { - "flex": "0.3 30px", - "_main-size": [ null, "20px" ] // -10px, instead of desired +45px - }, - { - "flex": "0.2 20px", - "_min-main-size": "180px", - "_main-size": [ null, "180px" ] // +160px, instead of desired +30px - }, - ] - }, + // ...and now with a large enough min-size that it prevents the other flex + // item from taking its full desired portion of the original free space: + { + items: [ + { + flex: "0.4 70px", + "_main-size": [null, "80px"], // (Can't take my full +40% of + // free space due to other item's + // large min-size.) + }, + { + flex: "0.2 30px", + "_min-main-size": "120px", + "_main-size": [null, "120px"], // +20% free space, then clamped + }, + ], + }, + // ...and now with a large-enough min-size that it pushes the other flex item + // to actually shrink a bit (with default "flex-shrink:1"): + { + items: [ + { + flex: "0.3 30px", + "_main-size": [null, "20px"], // -10px, instead of desired +45px + }, + { + flex: "0.2 20px", + "_min-main-size": "180px", + "_main-size": [null, "180px"], // +160px, instead of desired +30px + }, + ], + }, - // In this case, the items' flexibilities don't initially sum to < 1, but they - // do after we freeze the third item for violating its max-size. - { - items: - [ - { - "flex": "0.3 30px", - "_main-size": [ null, "75px" ] - // 1st loop: desires (0.3 / 5) * 150px = 9px. Tentatively granted. - // 2nd loop: desires 0.3 * 150px = 45px. Tentatively granted. - // 3rd loop: desires 0.3 * 150px = 45px. Granted +45px. - }, - { - "flex": "0.2 20px", - "_max-main-size": "30px", - "_main-size": [ null, "30px" ] - // First loop: desires (0.2 / 5) * 150px = 6px. Tentatively granted. - // Second loop: desires 0.2 * 150px = 30px. Frozen at +10px. - }, - { - "flex": "4.5 0px", - "_max-main-size": "20px", - "_main-size": [ null, "20px" ] - // First loop: desires (4.5 / 5) * 150px = 135px. Frozen at +20px. - }, - ] - }, + // In this case, the items' flexibilities don't initially sum to < 1, but they + // do after we freeze the third item for violating its max-size. + { + items: [ + { + flex: "0.3 30px", + "_main-size": [null, "75px"], + // 1st loop: desires (0.3 / 5) * 150px = 9px. Tentatively granted. + // 2nd loop: desires 0.3 * 150px = 45px. Tentatively granted. + // 3rd loop: desires 0.3 * 150px = 45px. Granted +45px. + }, + { + flex: "0.2 20px", + "_max-main-size": "30px", + "_main-size": [null, "30px"], + // First loop: desires (0.2 / 5) * 150px = 6px. Tentatively granted. + // Second loop: desires 0.2 * 150px = 30px. Frozen at +10px. + }, + { + flex: "4.5 0px", + "_max-main-size": "20px", + "_main-size": [null, "20px"], + // First loop: desires (4.5 / 5) * 150px = 135px. Frozen at +20px. + }, + ], + }, - // Make sure we calculate "original free space" correctly when one of our - // flex items will be clamped right away, due to max-size preventing it from - // growing at all: - { - // Here, the second flex item is effectively inflexible; it's - // immediately frozen at 40px since we're growing & this item's max size - // trivially prevents it from growing. This leaves us with an "original - // free space" of 60px. The first flex item takes half of that, due to - // its flex-grow value of 0.5. - items: - [ - { - "flex": "0.5 100px", - "_main-size": [ null, "130px" ] - }, - { - "flex": "1 98px", - "_max-main-size": "40px", - "_main-size": [ null, "40px" ] - }, - ] - }, - { - // Same as previous example, but with a larger flex-basis on the second - // element (which shouldn't ultimately matter, because its max size clamps - // its size immediately anyway). - items: - [ - { - "flex": "0.5 100px", - "_main-size": [ null, "130px" ] - }, - { - "flex": "1 101px", - "_max-main-size": "40px", - "_main-size": [ null, "40px" ] - }, - ] - }, + // Make sure we calculate "original free space" correctly when one of our + // flex items will be clamped right away, due to max-size preventing it from + // growing at all: + { + // Here, the second flex item is effectively inflexible; it's + // immediately frozen at 40px since we're growing & this item's max size + // trivially prevents it from growing. This leaves us with an "original + // free space" of 60px. The first flex item takes half of that, due to + // its flex-grow value of 0.5. + items: [ + { + flex: "0.5 100px", + "_main-size": [null, "130px"], + }, + { + flex: "1 98px", + "_max-main-size": "40px", + "_main-size": [null, "40px"], + }, + ], + }, + { + // Same as previous example, but with a larger flex-basis on the second + // element (which shouldn't ultimately matter, because its max size clamps + // its size immediately anyway). + items: [ + { + flex: "0.5 100px", + "_main-size": [null, "130px"], + }, + { + flex: "1 101px", + "_max-main-size": "40px", + "_main-size": [null, "40px"], + }, + ], + }, - { - // Here, the third flex item is effectively inflexible; it's immediately - // frozen at 0px since we're growing & this item's max size trivially - // prevents it from growing. This leaves us with an "original free space" of - // 100px. The first flex item takes 40px, and the third takes 50px, due to - // their flex values of 0.4 and 0.5. - items: - [ - { - "flex": "0.4 50px", - "_main-size": [ null, "90px" ] - }, - { - "flex": "0.5 50px", - "_main-size": [ null, "100px" ] - }, - { - "flex": "0 90px", - "_max-main-size": "0px", - "_main-size": [ null, "0px" ] - }, - ] - }, - { - // Same as previous example, but with slightly larger flex-grow values on - // the first and second items, which sum to 1.0 and produce slightly larger - // main sizes. This demonstrates that there's no discontinuity between the - // "< 1.0 sum" to ">= 1.0 sum" behavior, in this situation at least. - items: - [ - { - "flex": "0.45 50px", - "_main-size": [ null, "95px" ] - }, - { - "flex": "0.55 50px", - "_main-size": [ null, "105px" ] - }, - { - "flex": "0 90px", - "_max-main-size": "0px", - "_main-size": [ null, "0px" ] - }, - ] - }, + { + // Here, the third flex item is effectively inflexible; it's immediately + // frozen at 0px since we're growing & this item's max size trivially + // prevents it from growing. This leaves us with an "original free space" of + // 100px. The first flex item takes 40px, and the third takes 50px, due to + // their flex values of 0.4 and 0.5. + items: [ + { + flex: "0.4 50px", + "_main-size": [null, "90px"], + }, + { + flex: "0.5 50px", + "_main-size": [null, "100px"], + }, + { + flex: "0 90px", + "_max-main-size": "0px", + "_main-size": [null, "0px"], + }, + ], + }, + { + // Same as previous example, but with slightly larger flex-grow values on + // the first and second items, which sum to 1.0 and produce slightly larger + // main sizes. This demonstrates that there's no discontinuity between the + // "< 1.0 sum" to ">= 1.0 sum" behavior, in this situation at least. + items: [ + { + flex: "0.45 50px", + "_main-size": [null, "95px"], + }, + { + flex: "0.55 50px", + "_main-size": [null, "105px"], + }, + { + flex: "0 90px", + "_max-main-size": "0px", + "_main-size": [null, "0px"], + }, + ], + }, - // Test cases where flex-shrink sums to less than 1: - // ================================================= - // This makes us treat the flexibilities more like "fraction of (negative) - // free space" instead of weights, so that e.g. a single item with - // "flex-shrink: 0.1" will only shrink by 10% of amount that it overflows - // its container by. - // - // It gets a bit more complex when there are multiple flex items, because - // flex-shrink is scaled by the flex-basis before it's used as a weight. But - // even with that scaling, the general principal is that e.g. if the - // flex-shrink values *sum* to 0.6, then the items will collectively only - // shrink by 60% (and hence will still overflow). + // Test cases where flex-shrink sums to less than 1: + // ================================================= + // This makes us treat the flexibilities more like "fraction of (negative) + // free space" instead of weights, so that e.g. a single item with + // "flex-shrink: 0.1" will only shrink by 10% of amount that it overflows + // its container by. + // + // It gets a bit more complex when there are multiple flex items, because + // flex-shrink is scaled by the flex-basis before it's used as a weight. But + // even with that scaling, the general principal is that e.g. if the + // flex-shrink values *sum* to 0.6, then the items will collectively only + // shrink by 60% (and hence will still overflow). - // Basic cases where flex-grow sum is less than 1: - { - items: - [ - { - "flex": "0 0.1 300px", - "_main-size": [ null, "290px" ] // +10% of (negative) free space - }, - ] - }, - { - items: - [ - { - "flex": "0 0.8 400px", - "_main-size": [ null, "240px" ] // +80% of (negative) free space - }, - ] - }, + // Basic cases where flex-grow sum is less than 1: + { + items: [ + { + flex: "0 0.1 300px", + "_main-size": [null, "290px"], // +10% of (negative) free space + }, + ], + }, + { + items: [ + { + flex: "0 0.8 400px", + "_main-size": [null, "240px"], // +80% of (negative) free space + }, + ], + }, - // ...now with two flex items, with the same flex-basis value: - { - items: - [ - { - "flex": "0 0.4 150px", - "_main-size": [ null, "110px" ] // +40% of (negative) free space - }, - { - "flex": "0 0.2 150px", - "_main-size": [ null, "130px" ] // +20% of (negative) free space - }, - ] - }, + // ...now with two flex items, with the same flex-basis value: + { + items: [ + { + flex: "0 0.4 150px", + "_main-size": [null, "110px"], // +40% of (negative) free space + }, + { + flex: "0 0.2 150px", + "_main-size": [null, "130px"], // +20% of (negative) free space + }, + ], + }, - // ...now with two flex items, with different flex-basis values (and hence - // differently-scaled flex factors): - { - items: - [ - { - "flex": "0 0.3 100px", - "_main-size": [ null, "76px" ] - }, - { - "flex": "0 0.1 200px", - "_main-size": [ null, "184px" ] - } - ] - // Notes: - // - Free space: -100px - // - Sum of flex-shrink factors: 0.3 + 0.1 = 0.4 - // - Since that sum ^ is < 1, we'll only distribute that fraction of - // the free space. We'll distribute: -100px * 0.4 = -40px - // - // - 1st item's scaled flex factor: 0.3 * 100px = 30 - // - 2nd item's scaled flex factor: 0.1 * 200px = 20 - // - 1st item's share of distributed free space: 30/(30+20) = 60% - // - 2nd item's share of distributed free space: 20/(30+20) = 40% - // - // SO: - // - 1st item gets 60% * -40px = -24px. 100px-24px = 76px - // - 2nd item gets 40% * -40px = -16px. 200px-16px = 184px - }, + // ...now with two flex items, with different flex-basis values (and hence + // differently-scaled flex factors): + { + items: [ + { + flex: "0 0.3 100px", + "_main-size": [null, "76px"], + }, + { + flex: "0 0.1 200px", + "_main-size": [null, "184px"], + }, + ], + // Notes: + // - Free space: -100px + // - Sum of flex-shrink factors: 0.3 + 0.1 = 0.4 + // - Since that sum ^ is < 1, we'll only distribute that fraction of + // the free space. We'll distribute: -100px * 0.4 = -40px + // + // - 1st item's scaled flex factor: 0.3 * 100px = 30 + // - 2nd item's scaled flex factor: 0.1 * 200px = 20 + // - 1st item's share of distributed free space: 30/(30+20) = 60% + // - 2nd item's share of distributed free space: 20/(30+20) = 40% + // + // SO: + // - 1st item gets 60% * -40px = -24px. 100px-24px = 76px + // - 2nd item gets 40% * -40px = -16px. 200px-16px = 184px + }, - // ...now with min-size modifying how much one item can shrink: - { - items: - [ - { - "flex": "0 0.3 100px", - "_main-size": [ null, "70px" ] - }, - { - "flex": "0 0.1 200px", - "_min-main-size": "190px", - "_main-size": [ null, "190px" ] - } - ] - // Notes: - // - We proceed as in previous testcase, but clamp the second flex item - // at its min main size. - // - After that point, we have a total flex-shrink of = 0.3, so we - // distribute 0.3 * -100px = -30px to the remaining unfrozen flex - // items. Since there's only one unfrozen item left, it gets all of it. - }, + // ...now with min-size modifying how much one item can shrink: + { + items: [ + { + flex: "0 0.3 100px", + "_main-size": [null, "70px"], + }, + { + flex: "0 0.1 200px", + "_min-main-size": "190px", + "_main-size": [null, "190px"], + }, + ], + // Notes: + // - We proceed as in previous testcase, but clamp the second flex item + // at its min main size. + // - After that point, we have a total flex-shrink of = 0.3, so we + // distribute 0.3 * -100px = -30px to the remaining unfrozen flex + // items. Since there's only one unfrozen item left, it gets all of it. + }, - // ...now with min-size larger than our flex-basis: - // (This makes us freeze the second item right away, before we compute - // the initial free space.) - { - items: - [ - { - "flex": "0 0.3 100px", - "_main-size": [ null, "55px" ] // +30% of 200px-100px-250px - }, - { - "flex": "0 0.1 200px", - "_min-main-size": "250px", - "_main-size": [ null, "250px" ] // immediately frozen - } - ] - // (Same as previous example, except the min-main-size prevents the - // second item from shrinking at all) - }, + // ...now with min-size larger than our flex-basis: + // (This makes us freeze the second item right away, before we compute + // the initial free space.) + { + items: [ + { + flex: "0 0.3 100px", + "_main-size": [null, "55px"], // +30% of 200px-100px-250px + }, + { + flex: "0 0.1 200px", + "_min-main-size": "250px", + "_main-size": [null, "250px"], // immediately frozen + }, + ], + // (Same as previous example, except the min-main-size prevents the + // second item from shrinking at all) + }, - // ...and now with a min-size and a small flex-basis, such that we initially - // have positive free space, which makes the "% of [original] free space" - // calculations a bit more subtle. We set the "original free space" after - // we've clamped the second item (the first time the free space is negative). - { - items: - [ - { - "flex": "0 0.3 100px", - "_main-size": [ null, "70px" ] - }, - { - "flex": "0 0.1 50px", - "_min-main-size": "200px", - "_main-size": [ null, "200px" ] - } - ] - }, + // ...and now with a min-size and a small flex-basis, such that we initially + // have positive free space, which makes the "% of [original] free space" + // calculations a bit more subtle. We set the "original free space" after + // we've clamped the second item (the first time the free space is negative). + { + items: [ + { + flex: "0 0.3 100px", + "_main-size": [null, "70px"], + }, + { + flex: "0 0.1 50px", + "_min-main-size": "200px", + "_main-size": [null, "200px"], + }, + ], + }, - // Now with max-size making an item shrink more than its flex-shrink value - // calls for: - { - items: - [ - { - "flex": "0 0.3 100px", - "_main-size": [ null, "70px" ] - }, - { - "flex": "0 0.1 200px", - "_max-main-size": "150px", - "_main-size": [ null, "150px" ] - } - ] - // Notes: - // - We proceed as in an earlier testcase, but clamp the second flex item - // at its max main size. - // - After that point, we have a total flex-shrink of = 0.3, so we - // distribute 0.3 * -100px = -30px to the remaining unfrozen flex - // items. Since there's only one unfrozen item left, it gets all of it. - }, + // Now with max-size making an item shrink more than its flex-shrink value + // calls for: + { + items: [ + { + flex: "0 0.3 100px", + "_main-size": [null, "70px"], + }, + { + flex: "0 0.1 200px", + "_max-main-size": "150px", + "_main-size": [null, "150px"], + }, + ], + // Notes: + // - We proceed as in an earlier testcase, but clamp the second flex item + // at its max main size. + // - After that point, we have a total flex-shrink of = 0.3, so we + // distribute 0.3 * -100px = -30px to the remaining unfrozen flex + // items. Since there's only one unfrozen item left, it gets all of it. + }, - // ...and now with a small enough max-size that it prevents the other flex - // item from taking its full desired portion of the (negative) original free - // space: - { - items: - [ - { - "flex": "0 0.3 100px", - "_main-size": [ null, "90px" ] - }, - { - "flex": "0 0.1 200px", - "_max-main-size": "110px", - "_main-size": [ null, "110px" ] - } - ] - // Notes: - // - We proceed as in an earlier testcase, but clamp the second flex item - // at its max main size. - // - After that point, we have a total flex-shrink of 0.3, which would - // have us distribute 0.3 * -100px = -30px to the (one) remaining - // unfrozen flex item. But our remaining free space is only -10px at - // that point, so we distribute that instead. - }, + // ...and now with a small enough max-size that it prevents the other flex + // item from taking its full desired portion of the (negative) original free + // space: + { + items: [ + { + flex: "0 0.3 100px", + "_main-size": [null, "90px"], + }, + { + flex: "0 0.1 200px", + "_max-main-size": "110px", + "_main-size": [null, "110px"], + }, + ], + // Notes: + // - We proceed as in an earlier testcase, but clamp the second flex item + // at its max main size. + // - After that point, we have a total flex-shrink of 0.3, which would + // have us distribute 0.3 * -100px = -30px to the (one) remaining + // unfrozen flex item. But our remaining free space is only -10px at + // that point, so we distribute that instead. + }, - // ...and now with a small enough max-size that it pushes the other flex item - // to actually grow a bit (with custom "flex-grow: 1" for this testcase): - { - items: - [ - { - "flex": "1 0.3 100px", - "_main-size": [ null, "120px" ] - }, - { - "flex": "1 0.1 200px", - "_max-main-size": "80px", - "_main-size": [ null, "80px" ] - } - ] - }, + // ...and now with a small enough max-size that it pushes the other flex item + // to actually grow a bit (with custom "flex-grow: 1" for this testcase): + { + items: [ + { + flex: "1 0.3 100px", + "_main-size": [null, "120px"], + }, + { + flex: "1 0.1 200px", + "_max-main-size": "80px", + "_main-size": [null, "80px"], + }, + ], + }, - // In this case, the items' flexibilities don't initially sum to < 1, but they - // do after we freeze the third item for violating its min-size. - { - items: - [ - { - "flex": "0 0.3 100px", - "_main-size": [ null, "76px" ] - }, - { - "flex": "0 0.1 150px", - "_main-size": [ null, "138px" ] - }, - { - "flex": "0 0.8 10px", - "_min-main-size": "40px", - "_main-size": [ null, "40px" ] - } - ] - // Notes: - // - We immediately freeze the 3rd item, since we're shrinking and its - // min size obviously prevents it from shrinking at all. This leaves - // 200px - 100px - 150px - 40px = -90px of "initial free space". - // - // - Our remaining flexible items have a total flex-shrink of 0.4, - // so we can distribute a total of 0.4 * -90px = -36px - // - // - We distribute that space using *scaled* flex factors: - // * 1st item's scaled flex factor: 0.3 * 100px = 30 - // * 2nd item's scaled flex factor: 0.1 * 150px = 15 - // ...which means... - // * 1st item's share of distributed free space: 30/(30+15) = 2/3 - // * 2nd item's share of distributed free space: 15/(30+15) = 1/3 - // - // SO: - // - 1st item gets 2/3 * -36px = -24px. 100px - 24px = 76px - // - 2nd item gets 1/3 * -36px = -12px. 150px - 12px = 138px - }, + // In this case, the items' flexibilities don't initially sum to < 1, but they + // do after we freeze the third item for violating its min-size. + { + items: [ + { + flex: "0 0.3 100px", + "_main-size": [null, "76px"], + }, + { + flex: "0 0.1 150px", + "_main-size": [null, "138px"], + }, + { + flex: "0 0.8 10px", + "_min-main-size": "40px", + "_main-size": [null, "40px"], + }, + ], + // Notes: + // - We immediately freeze the 3rd item, since we're shrinking and its + // min size obviously prevents it from shrinking at all. This leaves + // 200px - 100px - 150px - 40px = -90px of "initial free space". + // + // - Our remaining flexible items have a total flex-shrink of 0.4, + // so we can distribute a total of 0.4 * -90px = -36px + // + // - We distribute that space using *scaled* flex factors: + // * 1st item's scaled flex factor: 0.3 * 100px = 30 + // * 2nd item's scaled flex factor: 0.1 * 150px = 15 + // ...which means... + // * 1st item's share of distributed free space: 30/(30+15) = 2/3 + // * 2nd item's share of distributed free space: 15/(30+15) = 1/3 + // + // SO: + // - 1st item gets 2/3 * -36px = -24px. 100px - 24px = 76px + // - 2nd item gets 1/3 * -36px = -12px. 150px - 12px = 138px + }, - // In this case, the items' flexibilities sum to > 1, in part due to an item - // that *can't actually shrink* due to its 0 flex-basis (which gives it a - // "scaled flex factor" of 0). This prevents us from triggering the special - // behavior for flexibilities that sum to less than 1, and as a result, the - // first item ends up absorbing all of the free space. - { - items: - [ - { - "flex": "0 .5 300px", - "_main-size": [ null, "200px" ] - }, - { - "flex": "0 5 0px", - "_main-size": [ null, "0px" ] - } - ] - }, + // In this case, the items' flexibilities sum to > 1, in part due to an item + // that *can't actually shrink* due to its 0 flex-basis (which gives it a + // "scaled flex factor" of 0). This prevents us from triggering the special + // behavior for flexibilities that sum to less than 1, and as a result, the + // first item ends up absorbing all of the free space. + { + items: [ + { + flex: "0 .5 300px", + "_main-size": [null, "200px"], + }, + { + flex: "0 5 0px", + "_main-size": [null, "0px"], + }, + ], + }, - // This case is similar to the one above, but with a *barely* nonzero base - // size for the second item. This should produce a result similar to the case - // above. (In particular, we should first distribute a very small amount of - // negative free space to the second item, getting it to approximately zero, - // and distribute the bulk of the negative free space to the first item, - // getting it to approximately 200px.) - { - items: - [ - { - "flex": "0 .5 300px", - "_main-size": [ null, "200px" ] - }, - { - "flex": "0 1 0.01px", - "_main-size": [ null, "0px" ] - } - ] - }, - // This case is similar to the ones above, but now we've increased the - // flex-shrink value on the second-item so that it claims enough of the - // negative free space to go below its min-size (0px). So, it triggers a min - // violation & is frozen. For the loop *after* the min violation, the sum of - // the remaining flex items' flex-shrink values is less than 1, so we trigger - // the special <1 behavior and only distribute half of the remaining - // (negative) free space to the first item (instead of all of it). - { - items: - [ - { - "flex": "0 .5 300px", - "_main-size": [ null, "250px" ] - }, - { - "flex": "0 5 0.01px", - "_main-size": [ null, "0px" ] - } - ] - }, + // This case is similar to the one above, but with a *barely* nonzero base + // size for the second item. This should produce a result similar to the case + // above. (In particular, we should first distribute a very small amount of + // negative free space to the second item, getting it to approximately zero, + // and distribute the bulk of the negative free space to the first item, + // getting it to approximately 200px.) + { + items: [ + { + flex: "0 .5 300px", + "_main-size": [null, "200px"], + }, + { + flex: "0 1 0.01px", + "_main-size": [null, "0px"], + }, + ], + }, + // This case is similar to the ones above, but now we've increased the + // flex-shrink value on the second-item so that it claims enough of the + // negative free space to go below its min-size (0px). So, it triggers a min + // violation & is frozen. For the loop *after* the min violation, the sum of + // the remaining flex items' flex-shrink values is less than 1, so we trigger + // the special <1 behavior and only distribute half of the remaining + // (negative) free space to the first item (instead of all of it). + { + items: [ + { + flex: "0 .5 300px", + "_main-size": [null, "250px"], + }, + { + flex: "0 5 0.01px", + "_main-size": [null, "0px"], + }, + ], + }, ]; diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js index 28515bd28f51..89c6720efa86 100644 --- a/layout/style/test/property_database.js +++ b/layout/style/test/property_database.js @@ -12,15 +12,20 @@ // 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) -{ +function IsCSSPropertyPrefEnabled(prefName) { try { if (SpecialPowers.getBoolPref(prefName)) { return true; } } catch (ex) { - ok(false, "Failed to look up property-controlling pref '" + - prefName + "' (" + ex + ")"); + ok( + false, + "Failed to look up property-controlling pref '" + + prefName + + "' (" + + ex + + ")" + ); } return false; @@ -77,8 +82,7 @@ const CSS_TYPE_LEGACY_SHORTHAND = 3; // Helper functions used to construct gCSSProperties. -function initial_font_family_is_sans_serif() -{ +function initial_font_family_is_sans_serif() { // The initial value of 'font-family' might be 'serif' or // 'sans-serif'. const meta = document.createElement("meta"); @@ -395,7 +399,7 @@ var validGradientAndElementValues = [ "-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 20px)", - "-webkit-repeating-radial-gradient(top left, circle, red, blue 4%, red 8%)" + "-webkit-repeating-radial-gradient(top left, circle, red, blue 4%, red 8%)", ]; var invalidGradientAndElementValues = [ "-moz-element(#a:1)", @@ -460,7 +464,6 @@ var invalidGradientAndElementValues = [ "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)", @@ -663,11 +666,9 @@ var invalidGradientAndElementValues = [ // * 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)" -]; -var unbalancedGradientAndElementValues = [ - "-moz-element(#a()", + "-webkit-radial-gradient(10px 20px 30deg, red, blue)", ]; +var unbalancedGradientAndElementValues = ["-moz-element(#a()"]; var basicShapeSVGBoxValues = [ "fill-box", @@ -846,8 +847,8 @@ var basicShapeUnbalancedValues = [ "inset(1px 2px 3px 4px round 5px / 6px", ]; - -if (/* mozGradientsEnabled */ true) { // Maybe one day :( +if (/* mozGradientsEnabled */ true) { + // Maybe one day :( // Extend gradient lists with valid/invalid moz-prefixed expressions: validGradientAndElementValues.push( "-moz-linear-gradient(red, blue)", @@ -969,7 +970,7 @@ if (/* mozGradientsEnabled */ true) { // Maybe one day :( "-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)", - "-moz-radial-gradient(40%, -100px -10%, red, blue)", + "-moz-radial-gradient(40%, -100px -10%, red, blue)" ); invalidGradientAndElementValues.push( @@ -1210,124 +1211,345 @@ if (/* mozGradientsEnabled */ true) { // Maybe one day :( } var gCSSProperties = { - "animation": { + animation: { domProp: "animation", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-direction", "animation-fill-mode", "animation-iteration-count", "animation-play-state" ], - initial_values: [ "none none 0s 0s ease normal running 1.0", "none", "0s", "ease", "normal", "running", "1.0" ], - other_values: [ "none none 0s 0s cubic-bezier(0.25, 0.1, 0.25, 1.0) normal running 1.0", "bounce 1s linear 2s", "bounce 1s 2s linear", "bounce linear 1s 2s", "linear bounce 1s 2s", "linear 1s bounce 2s", "linear 1s 2s bounce", "1s bounce linear 2s", "1s bounce 2s linear", "1s 2s bounce linear", "1s linear bounce 2s", "1s linear 2s bounce", "1s 2s linear bounce", "bounce linear 1s", "bounce 1s linear", "linear bounce 1s", "linear 1s bounce", "1s bounce linear", "1s linear bounce", "1s 2s bounce", "1s bounce 2s", "bounce 1s 2s", "1s 2s linear", "1s linear 2s", "linear 1s 2s", "bounce 1s", "1s bounce", "linear 1s", "1s linear", "1s 2s", "2s 1s", "bounce", "linear", "1s", "height", "2s", "ease-in-out", "2s ease-in", "opacity linear", "ease-out 2s", "2s color, 1s bounce, 500ms height linear, 1s opacity 4s cubic-bezier(0.0, 0.1, 1.0, 1.0)", "1s \\32bounce linear 2s", "1s -bounce linear 2s", "1s -\\32bounce linear 2s", "1s \\32 0bounce linear 2s", "1s -\\32 0bounce linear 2s", "1s \\2bounce linear 2s", "1s -\\2bounce linear 2s", "2s, 1s bounce", "1s bounce, 2s", "2s all, 1s bounce", "1s bounce, 2s all", "1s bounce, 2s none", "2s none, 1s bounce", "2s bounce, 1s all", "2s all, 1s bounce" ], - invalid_values: [ "2s inherit", "inherit 2s", "2s bounce, 1s inherit", "2s inherit, 1s bounce", "2s initial", "2s all,, 1s bounce", "2s all, , 1s bounce", "bounce 1s cubic-bezier(0, rubbish) 2s", "bounce 1s steps(rubbish) 2s", "2s unset" ] + subproperties: [ + "animation-name", + "animation-duration", + "animation-timing-function", + "animation-delay", + "animation-direction", + "animation-fill-mode", + "animation-iteration-count", + "animation-play-state", + ], + initial_values: [ + "none none 0s 0s ease normal running 1.0", + "none", + "0s", + "ease", + "normal", + "running", + "1.0", + ], + other_values: [ + "none none 0s 0s cubic-bezier(0.25, 0.1, 0.25, 1.0) normal running 1.0", + "bounce 1s linear 2s", + "bounce 1s 2s linear", + "bounce linear 1s 2s", + "linear bounce 1s 2s", + "linear 1s bounce 2s", + "linear 1s 2s bounce", + "1s bounce linear 2s", + "1s bounce 2s linear", + "1s 2s bounce linear", + "1s linear bounce 2s", + "1s linear 2s bounce", + "1s 2s linear bounce", + "bounce linear 1s", + "bounce 1s linear", + "linear bounce 1s", + "linear 1s bounce", + "1s bounce linear", + "1s linear bounce", + "1s 2s bounce", + "1s bounce 2s", + "bounce 1s 2s", + "1s 2s linear", + "1s linear 2s", + "linear 1s 2s", + "bounce 1s", + "1s bounce", + "linear 1s", + "1s linear", + "1s 2s", + "2s 1s", + "bounce", + "linear", + "1s", + "height", + "2s", + "ease-in-out", + "2s ease-in", + "opacity linear", + "ease-out 2s", + "2s color, 1s bounce, 500ms height linear, 1s opacity 4s cubic-bezier(0.0, 0.1, 1.0, 1.0)", + "1s \\32bounce linear 2s", + "1s -bounce linear 2s", + "1s -\\32bounce linear 2s", + "1s \\32 0bounce linear 2s", + "1s -\\32 0bounce linear 2s", + "1s \\2bounce linear 2s", + "1s -\\2bounce linear 2s", + "2s, 1s bounce", + "1s bounce, 2s", + "2s all, 1s bounce", + "1s bounce, 2s all", + "1s bounce, 2s none", + "2s none, 1s bounce", + "2s bounce, 1s all", + "2s all, 1s bounce", + ], + invalid_values: [ + "2s inherit", + "inherit 2s", + "2s bounce, 1s inherit", + "2s inherit, 1s bounce", + "2s initial", + "2s all,, 1s bounce", + "2s all, , 1s bounce", + "bounce 1s cubic-bezier(0, rubbish) 2s", + "bounce 1s steps(rubbish) 2s", + "2s unset", + ], }, "animation-delay": { domProp: "animationDelay", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0s", "0ms" ], - other_values: [ "1s", "250ms", "-100ms", "-1s", "1s, 250ms, 2.3s", "calc(1s + 2ms)" ], - invalid_values: [ "0", "0px" ] + initial_values: ["0s", "0ms"], + other_values: [ + "1s", + "250ms", + "-100ms", + "-1s", + "1s, 250ms, 2.3s", + "calc(1s + 2ms)", + ], + invalid_values: ["0", "0px"], }, "animation-direction": { domProp: "animationDirection", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "alternate", "normal, alternate", "alternate, normal", "normal, normal", "normal, normal, normal", "reverse", "alternate-reverse", "normal, reverse, alternate-reverse, alternate" ], - invalid_values: [ "normal normal", "inherit, normal", "reverse-alternate", "normal, unset", "unset, normal" ] + initial_values: ["normal"], + other_values: [ + "alternate", + "normal, alternate", + "alternate, normal", + "normal, normal", + "normal, normal, normal", + "reverse", + "alternate-reverse", + "normal, reverse, alternate-reverse, alternate", + ], + invalid_values: [ + "normal normal", + "inherit, normal", + "reverse-alternate", + "normal, unset", + "unset, normal", + ], }, "animation-duration": { domProp: "animationDuration", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0s", "0ms" ], - other_values: [ "1s", "250ms", "1s, 250ms, 2.3s", "calc(1s + 2ms)" ], - invalid_values: [ "0", "0px", "-1ms", "-2s" ] + initial_values: ["0s", "0ms"], + other_values: ["1s", "250ms", "1s, 250ms, 2.3s", "calc(1s + 2ms)"], + invalid_values: ["0", "0px", "-1ms", "-2s"], }, "animation-fill-mode": { domProp: "animationFillMode", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "forwards", "backwards", "both", "none, none", "forwards, backwards", "forwards, none", "none, both" ], - invalid_values: [ "all"] + initial_values: ["none"], + other_values: [ + "forwards", + "backwards", + "both", + "none, none", + "forwards, backwards", + "forwards, none", + "none, both", + ], + invalid_values: ["all"], }, "animation-iteration-count": { domProp: "animationIterationCount", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "1" ], - other_values: [ "infinite", "0", "0.5", "7.75", "-0.0", "1, 2, 3", "infinite, 2", "1, infinite", "calc(1 + 2.0)" ], + initial_values: ["1"], + other_values: [ + "infinite", + "0", + "0.5", + "7.75", + "-0.0", + "1, 2, 3", + "infinite, 2", + "1, infinite", + "calc(1 + 2.0)", + ], // negatives forbidden per // http://lists.w3.org/Archives/Public/www-style/2011Mar/0355.html - invalid_values: [ "none", "-1", "-0.5", "-1, infinite", "infinite, -3" ] + invalid_values: ["none", "-1", "-0.5", "-1, infinite", "infinite, -3"], }, "animation-name": { domProp: "animationName", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "all", "ball", "mall", "color", "bounce, bubble, opacity", "foobar", "auto", "\\32bounce", "-bounce", "-\\32bounce", "\\32 0bounce", "-\\32 0bounce", "\\2bounce", "-\\2bounce" ], - invalid_values: [ "bounce, initial", "initial, bounce", "bounce, inherit", "inherit, bounce", "bounce, unset", "unset, bounce" ] + initial_values: ["none"], + other_values: [ + "all", + "ball", + "mall", + "color", + "bounce, bubble, opacity", + "foobar", + "auto", + "\\32bounce", + "-bounce", + "-\\32bounce", + "\\32 0bounce", + "-\\32 0bounce", + "\\2bounce", + "-\\2bounce", + ], + invalid_values: [ + "bounce, initial", + "initial, bounce", + "bounce, inherit", + "inherit, bounce", + "bounce, unset", + "unset, bounce", + ], }, "animation-play-state": { domProp: "animationPlayState", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "running" ], - other_values: [ "paused", "running, running", "paused, running", "paused, paused", "running, paused", "paused, running, running, running, paused, running" ], - invalid_values: [ "0" ] + initial_values: ["running"], + other_values: [ + "paused", + "running, running", + "paused, running", + "paused, paused", + "running, paused", + "paused, running, running, running, paused, running", + ], + invalid_values: ["0"], }, "animation-timing-function": { domProp: "animationTimingFunction", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "ease" ], - other_values: [ "cubic-bezier(0.25, 0.1, 0.25, 1.0)", "linear", "ease-in", "ease-out", "ease-in-out", "linear, ease-in, cubic-bezier(0.1, 0.2, 0.8, 0.9)", "cubic-bezier(0.5, 0.5, 0.5, 0.5)", "cubic-bezier(0.25, 1.5, 0.75, -0.5)", "step-start", "step-end", "steps(1)", "steps(2, start)", "steps(386)", "steps(3, end)", "steps(calc(2 + 1))" ], - invalid_values: [ "none", "auto", "cubic-bezier(0.25, 0.1, 0.25)", "cubic-bezier(0.25, 0.1, 0.25, 0.25, 1.0)", "cubic-bezier(-0.5, 0.5, 0.5, 0.5)", "cubic-bezier(1.5, 0.5, 0.5, 0.5)", "cubic-bezier(0.5, 0.5, -0.5, 0.5)", "cubic-bezier(0.5, 0.5, 1.5, 0.5)", "steps(2, step-end)", "steps(0)", "steps(-2)", "steps(0, step-end, 1)" ] + initial_values: ["ease"], + other_values: [ + "cubic-bezier(0.25, 0.1, 0.25, 1.0)", + "linear", + "ease-in", + "ease-out", + "ease-in-out", + "linear, ease-in, cubic-bezier(0.1, 0.2, 0.8, 0.9)", + "cubic-bezier(0.5, 0.5, 0.5, 0.5)", + "cubic-bezier(0.25, 1.5, 0.75, -0.5)", + "step-start", + "step-end", + "steps(1)", + "steps(2, start)", + "steps(386)", + "steps(3, end)", + "steps(calc(2 + 1))", + ], + invalid_values: [ + "none", + "auto", + "cubic-bezier(0.25, 0.1, 0.25)", + "cubic-bezier(0.25, 0.1, 0.25, 0.25, 1.0)", + "cubic-bezier(-0.5, 0.5, 0.5, 0.5)", + "cubic-bezier(1.5, 0.5, 0.5, 0.5)", + "cubic-bezier(0.5, 0.5, -0.5, 0.5)", + "cubic-bezier(0.5, 0.5, 1.5, 0.5)", + "steps(2, step-end)", + "steps(0)", + "steps(-2)", + "steps(0, step-end, 1)", + ], }, "-moz-appearance": { domProp: "MozAppearance", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "radio", "menulist" ], - invalid_values: [] + initial_values: ["none"], + other_values: ["radio", "menulist"], + invalid_values: [], }, "-moz-binding": { domProp: "MozBinding", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "url(foo.xml)" ], - invalid_values: [] + initial_values: ["none"], + other_values: ["url(foo.xml)"], + invalid_values: [], }, "border-inline": { domProp: "borderInline", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-inline-start-color", "border-inline-start-style", "border-inline-start-width", - "border-inline-end-color", "border-inline-end-style", "border-inline-end-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 solid green" ] + subproperties: [ + "border-inline-start-color", + "border-inline-start-style", + "border-inline-start-width", + "border-inline-end-color", + "border-inline-end-style", + "border-inline-end-width", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: ["5%", "5", "5 solid green"], }, "border-inline-end": { domProp: "borderInlineEnd", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-inline-end-color", "border-inline-end-style", "border-inline-end-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 green none" ] + subproperties: [ + "border-inline-end-color", + "border-inline-end-style", + "border-inline-end-width", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: ["5%", "5", "5 green none"], }, "border-inline-color": { domProp: "borderInlineColor", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-inline-start-color", "border-inline-end-color" ], - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5) blue", "blue transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ] + subproperties: ["border-inline-start-color", "border-inline-end-color"], + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5) blue", "blue transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"], }, "border-inline-end-color": { domProp: "borderInlineEndColor", @@ -1335,19 +1557,27 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, logical: true, - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ] + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"], }, "border-inline-style": { domProp: "borderInlineStyle", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-inline-start-style", "border-inline-end-style" ], - initial_values: [ "none" ], - other_values: [ "solid", "dashed solid", "solid dotted", "double double", "inset outset", - "inset double", "none groove", "ridge none" ], - invalid_values: [] + subproperties: ["border-inline-start-style", "border-inline-end-style"], + initial_values: ["none"], + other_values: [ + "solid", + "dashed solid", + "solid dotted", + "double double", + "inset outset", + "inset double", + "none groove", + "ridge none", + ], + invalid_values: [], }, "border-inline-end-style": { domProp: "borderInlineEndStyle", @@ -1356,25 +1586,43 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, /* XXX hidden is sometimes the same as initial */ - initial_values: [ "none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + ], + invalid_values: [], }, "border-inline-width": { domProp: "borderInlineWidth", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-inline-start-width", "border-inline-end-width" ], + subproperties: ["border-inline-start-width", "border-inline-end-width"], prerequisites: { "border-style": "solid" }, - initial_values: [ "medium", "3px", "medium medium" ], - other_values: [ "thin", "thick", "1px", "2em", - "calc(2px)", "calc(2px) thin", - "calc(-2px)", "calc(-2px) thick", - "calc(0em)", "medium calc(0em)", - "calc(0px)", "1px calc(0px)", - "calc(5em)", "1em calc(5em)", + initial_values: ["medium", "3px", "medium medium"], + other_values: [ + "thin", + "thick", + "1px", + "2em", + "calc(2px)", + "calc(2px) thin", + "calc(-2px)", + "calc(-2px) thick", + "calc(0em)", + "medium calc(0em)", + "calc(0px)", + "1px calc(0px)", + "calc(5em)", + "1em calc(5em)", ], - invalid_values: [ "5%", "5", "5 thin", "thin 5%", "blue", "solid" ] + invalid_values: ["5%", "5", "5 thin", "thin 5%", "blue", "solid"], }, "border-inline-end-width": { domProp: "borderInlineEndWidth", @@ -1383,8 +1631,12 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, prerequisites: { "border-inline-end-style": "solid" }, - initial_values: [ "medium", "3px", "calc(4px - 1px)" ], - other_values: [ "thin", "thick", "1px", "2em", + initial_values: ["medium", "3px", "calc(4px - 1px)"], + other_values: [ + "thin", + "thick", + "1px", + "2em", "calc(2px)", "calc(-2px)", "calc(0em)", @@ -1394,108 +1646,206 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "5%", "5" ] + invalid_values: ["5%", "5"], }, "border-image": { domProp: "borderImage", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat" ], - initial_values: [ "none" ], - other_values: [ "url('border.png') 27 27 27 27", - "url('border.png') 27", - "stretch url('border.png')", - "url('border.png') 27 fill", - "url('border.png') 27 27 27 27 repeat", - "repeat url('border.png') 27 27 27 27", - "url('border.png') repeat 27 27 27 27", - "url('border.png') fill 27 27 27 27 repeat", - "url('border.png') fill 27 27 27 27 repeat space", - "url('border.png') 27 27 27 27 / 1em", - "27 27 27 27 / 1em url('border.png') ", - "url('border.png') 27 27 27 27 / 10 10 10 / 10 10 repeat", - "repeat 27 27 27 27 / 10 10 10 / 10 10 url('border.png')", - "url('border.png') 27 27 27 27 / / 10 10 1em", - "fill 27 27 27 27 / / 10 10 1em url('border.png')", - "url('border.png') 27 27 27 27 / 1em 1em 1em 1em repeat", - "url('border.png') 27 27 27 27 / 1em 1em 1em 1em stretch round" ], - invalid_values: [ "url('border.png') 27 27 27 27 27", - "url('border.png') 27 27 27 27 / 1em 1em 1em 1em 1em", - "url('border.png') 27 27 27 27 /", - "url('border.png') fill", - "url('border.png') fill repeat", - "fill repeat", - "url('border.png') fill / 1em", - "url('border.png') / repeat", - "url('border.png') 1 /", - "url('border.png') 1 / /", - "1 / url('border.png')", - "url('border.png') / 1", - "url('border.png') / / 1"] + subproperties: [ + "border-image-source", + "border-image-slice", + "border-image-width", + "border-image-outset", + "border-image-repeat", + ], + initial_values: ["none"], + other_values: [ + "url('border.png') 27 27 27 27", + "url('border.png') 27", + "stretch url('border.png')", + "url('border.png') 27 fill", + "url('border.png') 27 27 27 27 repeat", + "repeat url('border.png') 27 27 27 27", + "url('border.png') repeat 27 27 27 27", + "url('border.png') fill 27 27 27 27 repeat", + "url('border.png') fill 27 27 27 27 repeat space", + "url('border.png') 27 27 27 27 / 1em", + "27 27 27 27 / 1em url('border.png') ", + "url('border.png') 27 27 27 27 / 10 10 10 / 10 10 repeat", + "repeat 27 27 27 27 / 10 10 10 / 10 10 url('border.png')", + "url('border.png') 27 27 27 27 / / 10 10 1em", + "fill 27 27 27 27 / / 10 10 1em url('border.png')", + "url('border.png') 27 27 27 27 / 1em 1em 1em 1em repeat", + "url('border.png') 27 27 27 27 / 1em 1em 1em 1em stretch round", + ], + invalid_values: [ + "url('border.png') 27 27 27 27 27", + "url('border.png') 27 27 27 27 / 1em 1em 1em 1em 1em", + "url('border.png') 27 27 27 27 /", + "url('border.png') fill", + "url('border.png') fill repeat", + "fill repeat", + "url('border.png') fill / 1em", + "url('border.png') / repeat", + "url('border.png') 1 /", + "url('border.png') 1 / /", + "1 / url('border.png')", + "url('border.png') / 1", + "url('border.png') / / 1", + ], }, "border-image-source": { domProp: "borderImageSource", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "none" ], - other_values: [ - "url('border.png')" - ].concat(validGradientAndElementValues), - invalid_values: [ - "url('border.png') url('border.png')", - ].concat(invalidGradientAndElementValues), - unbalanced_values: [ - ].concat(unbalancedGradientAndElementValues) + initial_values: ["none"], + other_values: ["url('border.png')"].concat(validGradientAndElementValues), + invalid_values: ["url('border.png') url('border.png')"].concat( + invalidGradientAndElementValues + ), + unbalanced_values: [].concat(unbalancedGradientAndElementValues), }, "border-image-slice": { domProp: "borderImageSlice", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "100%", "100% 100% 100% 100%" ], - other_values: [ "0%", "10", "10 100% 0 2", "0 0 0 0", "fill 10 10", "10 10 fill" ], - invalid_values: [ "-10%", "-10", "10 10 10 10 10", "10 10 10 10 -10", "10px", "-10px", "fill", "fill fill 10px", "10px fill fill" ] + initial_values: ["100%", "100% 100% 100% 100%"], + other_values: [ + "0%", + "10", + "10 100% 0 2", + "0 0 0 0", + "fill 10 10", + "10 10 fill", + ], + invalid_values: [ + "-10%", + "-10", + "10 10 10 10 10", + "10 10 10 10 -10", + "10px", + "-10px", + "fill", + "fill fill 10px", + "10px fill fill", + ], }, "border-image-width": { domProp: "borderImageWidth", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "1", "1 1 1 1" ], - other_values: [ "0", "0%", "0px", "auto auto auto auto", "10 10% auto 15px", "10px 10px 10px 10px", "10", "10 10", "10 10 10", "calc(10px)", "calc(10px + 5%)" ], - invalid_values: [ "-10", "-10px", "-10%", "10 10 10 10 10", "10 10 10 10 auto", "auto auto auto auto auto", "10px calc(nonsense)", "1px red" ], - unbalanced_values: [ "10px calc(" ] + initial_values: ["1", "1 1 1 1"], + other_values: [ + "0", + "0%", + "0px", + "auto auto auto auto", + "10 10% auto 15px", + "10px 10px 10px 10px", + "10", + "10 10", + "10 10 10", + "calc(10px)", + "calc(10px + 5%)", + ], + invalid_values: [ + "-10", + "-10px", + "-10%", + "10 10 10 10 10", + "10 10 10 10 auto", + "auto auto auto auto auto", + "10px calc(nonsense)", + "1px red", + ], + unbalanced_values: ["10px calc("], }, "border-image-outset": { domProp: "borderImageOutset", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "0", "0 0 0 0" ], - other_values: [ "10px", "10", "10 10", "10 10 10", "10 10 10 10", "10px 10 10 10px" ], - invalid_values: [ "-10", "-10px", "-10%", "10%", "10 10 10 10 10", "10px calc(nonsense)", "1px red" ], - unbalanced_values: [ "10px calc(" ] + initial_values: ["0", "0 0 0 0"], + other_values: [ + "10px", + "10", + "10 10", + "10 10 10", + "10 10 10 10", + "10px 10 10 10px", + ], + invalid_values: [ + "-10", + "-10px", + "-10%", + "10%", + "10 10 10 10 10", + "10px calc(nonsense)", + "1px red", + ], + unbalanced_values: ["10px calc("], }, "border-image-repeat": { domProp: "borderImageRepeat", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "stretch", "stretch stretch" ], - other_values: [ "round", "repeat", "stretch round", "repeat round", "stretch repeat", "round round", "repeat repeat", - "space", "stretch space", "repeat space", "round space", "space space" ], - invalid_values: [ "none", "stretch stretch stretch", "0", "10", "0%", "0px" ] + initial_values: ["stretch", "stretch stretch"], + other_values: [ + "round", + "repeat", + "stretch round", + "repeat round", + "stretch repeat", + "round round", + "repeat repeat", + "space", + "stretch space", + "repeat space", + "round space", + "space space", + ], + invalid_values: ["none", "stretch stretch stretch", "0", "10", "0%", "0px"], }, "border-radius": { domProp: "borderRadius", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - subproperties: [ "border-bottom-left-radius", "border-bottom-right-radius", "border-top-left-radius", "border-top-right-radius" ], - initial_values: [ "0", "0px", "0px 0 0 0px", "calc(-2px)", "calc(0px) calc(0pt)", "calc(0px) calc(0pt) calc(0px) calc(0em)" ], - other_values: [ "0%", "3%", "1px", "2em", "3em 2px", "2pt 3% 4em", "2px 2px 2px 2px", // circular - "3% / 2%", "1px / 4px", "2em / 1em", "3em 2px / 2px 3em", "2pt 3% 4em / 4pt 1% 5em", "2px 2px 2px 2px / 4px 4px 4px 4px", "1pt / 2pt 3pt", "4pt 5pt / 3pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + subproperties: [ + "border-bottom-left-radius", + "border-bottom-right-radius", + "border-top-left-radius", + "border-top-right-radius", + ], + initial_values: [ + "0", + "0px", + "0px 0 0 0px", + "calc(-2px)", + "calc(0px) calc(0pt)", + "calc(0px) calc(0pt) calc(0px) calc(0em)", + ], + other_values: [ + "0%", + "3%", + "1px", + "2em", + "3em 2px", + "2pt 3% 4em", + "2px 2px 2px 2px", // circular + "3% / 2%", + "1px / 4px", + "2em / 1em", + "3em 2px / 2px 3em", + "2pt 3% 4em / 4pt 1% 5em", + "2px 2px 2px 2px / 4px 4px 4px 4px", + "1pt / 2pt 3pt", + "4pt 5pt / 3pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -1507,18 +1857,40 @@ var gCSSProperties = { "calc(3*25px + 50%)", "2px 2px calc(2px + 1%) 2px", "1px 2px 2px 2px / 2px 2px calc(2px + 1%) 2px", - ], - invalid_values: [ "2px -2px", "inherit 2px", "inherit / 2px", "2px inherit", "2px / inherit", "2px 2px 2px 2px 2px", "1px / 2px 2px 2px 2px 2px", "2", "2 2", "2px 2px 2px 2px / 2px 2px 2 2px", "2px calc(0px + rubbish)", "unset 2px", "unset / 2px", "2px unset", "2px / unset" ] + ], + invalid_values: [ + "2px -2px", + "inherit 2px", + "inherit / 2px", + "2px inherit", + "2px / inherit", + "2px 2px 2px 2px 2px", + "1px / 2px 2px 2px 2px 2px", + "2", + "2 2", + "2px 2px 2px 2px / 2px 2px 2 2px", + "2px calc(0px + rubbish)", + "unset 2px", + "unset / 2px", + "2px unset", + "2px / unset", + ], }, "border-bottom-left-radius": { domProp: "borderBottomLeftRadius", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -1528,18 +1900,35 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "2px calc(0px + rubbish)", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "2px calc(0px + rubbish)", + "unset 2px", + "2px unset", + ], }, "border-bottom-right-radius": { domProp: "borderBottomRightRadius", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -1549,18 +1938,35 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "2px calc(0px + rubbish)", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "2px calc(0px + rubbish)", + "unset 2px", + "2px unset", + ], }, "border-top-left-radius": { domProp: "borderTopLeftRadius", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -1570,18 +1976,35 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "2px calc(0px + rubbish)", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "2px calc(0px + rubbish)", + "unset 2px", + "2px unset", + ], }, "border-top-right-radius": { domProp: "borderTopRightRadius", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -1591,8 +2014,19 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "2px calc(0px + rubbish)", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "2px calc(0px + rubbish)", + "unset 2px", + "2px unset", + ], }, "border-start-start-radius": { domProp: "borderStartStartRadius", @@ -1600,10 +2034,16 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, logical: true, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -1613,8 +2053,19 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "2px calc(0px + rubbish)", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "2px calc(0px + rubbish)", + "unset 2px", + "2px unset", + ], }, "border-start-end-radius": { domProp: "borderStartEndRadius", @@ -1622,10 +2073,16 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, logical: true, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -1635,8 +2092,19 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "2px calc(0px + rubbish)", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "2px calc(0px + rubbish)", + "unset 2px", + "2px unset", + ], }, "border-end-start-radius": { domProp: "borderEndStartRadius", @@ -1644,10 +2112,16 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, logical: true, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -1657,8 +2131,19 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "2px calc(0px + rubbish)", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "2px calc(0px + rubbish)", + "unset 2px", + "2px unset", + ], }, "border-end-end-radius": { domProp: "borderEndEndRadius", @@ -1666,10 +2151,16 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, logical: true, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -1679,17 +2170,46 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "2px calc(0px + rubbish)", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "2px calc(0px + rubbish)", + "unset 2px", + "2px unset", + ], }, "border-inline-start": { domProp: "borderInlineStart", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-inline-start-color", "border-inline-start-style", "border-inline-start-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 green solid" ] + subproperties: [ + "border-inline-start-color", + "border-inline-start-style", + "border-inline-start-width", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: ["5%", "5", "5 green solid"], }, "border-inline-start-color": { domProp: "borderInlineStartColor", @@ -1697,9 +2217,9 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, logical: true, - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ] + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"], }, "border-inline-start-style": { domProp: "borderInlineStartStyle", @@ -1708,9 +2228,18 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, /* XXX hidden is sometimes the same as initial */ - initial_values: [ "none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + ], + invalid_values: [], }, "border-inline-start-width": { domProp: "borderInlineStartWidth", @@ -1719,8 +2248,12 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, prerequisites: { "border-inline-start-style": "solid" }, - initial_values: [ "medium", "3px", "calc(4px - 1px)" ], - other_values: [ "thin", "thick", "1px", "2em", + initial_values: ["medium", "3px", "calc(4px - 1px)"], + other_values: [ + "thin", + "thick", + "1px", + "2em", "calc(2px)", "calc(-2px)", "calc(0em)", @@ -1730,171 +2263,219 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "5%", "5" ] + invalid_values: ["5%", "5"], }, "-moz-box-align": { domProp: "MozBoxAlign", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "stretch" ], - other_values: [ "start", "center", "baseline", "end" ], - invalid_values: [] + initial_values: ["stretch"], + other_values: ["start", "center", "baseline", "end"], + invalid_values: [], }, "-moz-box-direction": { domProp: "MozBoxDirection", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "reverse" ], - invalid_values: [] + initial_values: ["normal"], + other_values: ["reverse"], + invalid_values: [], }, "-moz-box-flex": { domProp: "MozBoxFlex", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0", "0.0", "-0.0" ], - other_values: [ "1", "100", "0.1" ], - invalid_values: [ "10px", "-1" ] + initial_values: ["0", "0.0", "-0.0"], + other_values: ["1", "100", "0.1"], + invalid_values: ["10px", "-1"], }, "-moz-box-ordinal-group": { domProp: "MozBoxOrdinalGroup", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "1" ], - other_values: [ "2", "100", "0" ], - invalid_values: [ "1.0", "-1", "-1000" ] + initial_values: ["1"], + other_values: ["2", "100", "0"], + invalid_values: ["1.0", "-1", "-1000"], }, "-moz-box-orient": { domProp: "MozBoxOrient", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "horizontal", "inline-axis" ], - other_values: [ "vertical", "block-axis" ], - invalid_values: [] + initial_values: ["horizontal", "inline-axis"], + other_values: ["vertical", "block-axis"], + invalid_values: [], }, "-moz-box-pack": { domProp: "MozBoxPack", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "start" ], - other_values: [ "center", "end", "justify" ], - invalid_values: [] + initial_values: ["start"], + other_values: ["center", "end", "justify"], + invalid_values: [], }, "box-decoration-break": { domProp: "boxDecorationBreak", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "slice" ], - other_values: [ "clone" ], - invalid_values: [ "auto", "none", "1px" ], + initial_values: ["slice"], + other_values: ["clone"], + invalid_values: ["auto", "none", "1px"], }, "box-sizing": { domProp: "boxSizing", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "content-box" ], - other_values: [ "border-box" ], - invalid_values: [ "padding-box", "margin-box", "content", "padding", "border", "margin" ] + initial_values: ["content-box"], + other_values: ["border-box"], + invalid_values: [ + "padding-box", + "margin-box", + "content", + "padding", + "border", + "margin", + ], }, "-moz-box-sizing": { domProp: "MozBoxSizing", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "box-sizing", - subproperties: [ "box-sizing" ], + subproperties: ["box-sizing"], }, "color-adjust": { domProp: "colorAdjust", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "economy" ], - other_values: [ "exact" ], - invalid_values: [] + initial_values: ["economy"], + other_values: ["exact"], + invalid_values: [], }, - "columns": { + columns: { domProp: "columns", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "column-count", "column-width" ], - initial_values: [ "auto", "auto auto" ], - other_values: [ "3", "20px", "2 10px", "10px 2", "2 auto", "auto 2", "auto 50px", "50px auto" ], - invalid_values: [ "5%", "-1px", "-1", "3 5", "10px 4px", "10 2px 5in", "30px -1", - "auto 3 5px", "5 auto 20px", "auto auto auto", "calc(50px + rubbish) 2" ] + subproperties: ["column-count", "column-width"], + initial_values: ["auto", "auto auto"], + other_values: [ + "3", + "20px", + "2 10px", + "10px 2", + "2 auto", + "auto 2", + "auto 50px", + "50px auto", + ], + invalid_values: [ + "5%", + "-1px", + "-1", + "3 5", + "10px 4px", + "10 2px 5in", + "30px -1", + "auto 3 5px", + "5 auto 20px", + "auto auto auto", + "calc(50px + rubbish) 2", + ], }, "-moz-columns": { domProp: "MozColumns", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "columns", - subproperties: [ "column-count", "column-width" ] + subproperties: ["column-count", "column-width"], }, "column-count": { domProp: "columnCount", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "1", "17" ], + initial_values: ["auto"], + other_values: ["1", "17"], // negative and zero invalid per editor's draft - invalid_values: [ "-1", "0", "3px" ] + invalid_values: ["-1", "0", "3px"], }, "-moz-column-count": { domProp: "MozColumnCount", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "column-count", - subproperties: [ "column-count" ] + subproperties: ["column-count"], }, "column-fill": { domProp: "columnFill", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "balance" ], - other_values: [ "auto" ], - invalid_values: [ "2px", "dotted", "5em" ] + initial_values: ["balance"], + other_values: ["auto"], + invalid_values: ["2px", "dotted", "5em"], }, "-moz-column-fill": { domProp: "MozColumnFill", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "column-fill", - subproperties: [ "column-fill" ] + subproperties: ["column-fill"], }, "-moz-column-gap": { domProp: "MozColumnGap", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "column-gap", - subproperties: [ "column-gap" ] + subproperties: ["column-gap"], }, "column-rule": { domProp: "columnRule", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - prerequisites: { "color": "green" }, - subproperties: [ "column-rule-width", "column-rule-style", "column-rule-color" ], - initial_values: [ "medium none currentColor", "none", "medium", "currentColor" ], - other_values: [ "2px blue solid", "red dotted 1px", "ridge 4px orange", "5px solid" ], - invalid_values: [ "2px 3px 4px red", "dotted dashed", "5px dashed green 3px", "5 solid", "5 green solid" ] + prerequisites: { color: "green" }, + subproperties: [ + "column-rule-width", + "column-rule-style", + "column-rule-color", + ], + initial_values: [ + "medium none currentColor", + "none", + "medium", + "currentColor", + ], + other_values: [ + "2px blue solid", + "red dotted 1px", + "ridge 4px orange", + "5px solid", + ], + invalid_values: [ + "2px 3px 4px red", + "dotted dashed", + "5px dashed green 3px", + "5 solid", + "5 green solid", + ], }, "-moz-column-rule": { domProp: "MozColumnRule", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "column-rule", - subproperties: [ "column-rule-width", "column-rule-style", "column-rule-color" ] + subproperties: [ + "column-rule-width", + "column-rule-style", + "column-rule-color", + ], }, "column-rule-width": { domProp: "columnRuleWidth", inherited: false, type: CSS_TYPE_LONGHAND, prerequisites: { "-moz-column-rule-style": "solid" }, - initial_values: [ - "medium", - "3px", - "calc(3px)", - "calc(5em + 3px - 5em)", - ], - other_values: [ "thin", "15px", + initial_values: ["medium", "3px", "calc(3px)", "calc(5em + 3px - 5em)"], + other_values: [ + "thin", + "15px", /* valid calc() values */ "calc(-2px)", "calc(2px)", @@ -1995,9 +2576,12 @@ var gCSSProperties = { "calc(0 * 0em)", "calc(0px * 0)", "calc(0px * 2)", - ], - invalid_values: [ "20", "-1px", "red", "50%", + invalid_values: [ + "20", + "-1px", + "red", + "50%", /* invalid calc() values */ "calc(2em+ 2px)", "calc(2em +2px)", @@ -2041,99 +2625,112 @@ var gCSSProperties = { "calc(1 * (0 + 2em))", "calc((0 + 2em))", "calc((0 + 2em) * 1)", - ] + ], }, "-moz-column-rule-width": { domProp: "MozColumnRuleWidth", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "column-rule-width", - subproperties: [ "column-rule-width" ] + subproperties: ["column-rule-width"], }, "column-rule-style": { domProp: "columnRuleStyle", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "solid", "hidden", "ridge", "groove", "inset", "outset", "double", "dotted", "dashed" ], - invalid_values: [ "20", "foo" ] + initial_values: ["none"], + other_values: [ + "solid", + "hidden", + "ridge", + "groove", + "inset", + "outset", + "double", + "dotted", + "dashed", + ], + invalid_values: ["20", "foo"], }, "-moz-column-rule-style": { domProp: "MozColumnRuleStyle", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "column-rule-style", - subproperties: [ "column-rule-style" ] + subproperties: ["column-rule-style"], }, "column-rule-color": { domProp: "columnRuleColor", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "color": "green" }, - initial_values: [ "currentColor" ], - other_values: [ "red", "blue", "#ffff00" ], - invalid_values: [ "ffff00" ] + prerequisites: { color: "green" }, + initial_values: ["currentColor"], + other_values: ["red", "blue", "#ffff00"], + invalid_values: ["ffff00"], }, "-moz-column-rule-color": { domProp: "MozColumnRuleColor", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "column-rule-color", - subproperties: [ "column-rule-color" ] + subproperties: ["column-rule-color"], }, "column-width": { domProp: "columnWidth", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: [ "15px", "calc(15px)", "calc(30px - 3em)", "calc(-15px)", "0px", - "calc(0px)" + "calc(0px)", ], - invalid_values: [ "20", "-1px", "50%" ] + invalid_values: ["20", "-1px", "50%"], }, "-moz-column-width": { domProp: "MozColumnWidth", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "column-width", - subproperties: [ "column-width" ] + subproperties: ["column-width"], }, "-moz-float-edge": { domProp: "MozFloatEdge", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "content-box" ], - other_values: [ "margin-box" ], - invalid_values: [ "content", "padding", "border", "margin" ] + initial_values: ["content-box"], + other_values: ["margin-box"], + invalid_values: ["content", "padding", "border", "margin"], }, "-moz-force-broken-image-icon": { domProp: "MozForceBrokenImageIcon", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0" ], - other_values: [ "1" ], - invalid_values: [] + initial_values: ["0"], + other_values: ["1"], + invalid_values: [], }, "-moz-image-region": { domProp: "MozImageRegion", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "rect(3px 20px 15px 4px)", "rect(17px, 21px, 33px, 2px)" ], - invalid_values: [ "rect(17px, 21px, 33, 2px)" ] + initial_values: ["auto"], + other_values: ["rect(3px 20px 15px 4px)", "rect(17px, 21px, 33px, 2px)"], + invalid_values: ["rect(17px, 21px, 33, 2px)"], }, "margin-inline": { domProp: "marginInline", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "margin-inline-start", "margin-inline-end" ], - initial_values: [ "0", "0px 0em" ], - other_values: [ "1px", "3em 1%", "5%", + subproperties: ["margin-inline-start", "margin-inline-end"], + initial_values: ["0", "0px 0em"], + other_values: [ + "1px", + "3em 1%", + "5%", "calc(2px) 1%", "calc(-2px) 1%", "calc(50%) 1%", @@ -2141,7 +2738,21 @@ var gCSSProperties = { "calc(25px*3) 1em", "calc(3*25px + 50%) calc(3*25px - 50%)", ], - invalid_values: [ "5", "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ], + invalid_values: [ + "5", + "..25px", + ".+5px", + ".px", + "-.px", + "++5px", + "-+4px", + "+-3px", + "--7px", + "+-.6px", + "-+.5px", + "++.7px", + "--.4px", + ], }, "margin-inline-end": { domProp: "marginInlineEnd", @@ -2151,8 +2762,19 @@ var gCSSProperties = { logical: true, /* no subproperties */ /* auto may or may not be initial */ - initial_values: [ "0", "0px", "0%", "0em", "0ex", "calc(0pt)", "calc(0% + 0px)" ], - other_values: [ "1px", "3em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "0em", + "0ex", + "calc(0pt)", + "calc(0% + 0px)", + ], + other_values: [ + "1px", + "3em", + "5%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -2160,7 +2782,21 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "5", "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ], + invalid_values: [ + "5", + "..25px", + ".+5px", + ".px", + "-.px", + "++5px", + "-+4px", + "+-3px", + "--7px", + "+-.6px", + "-+.5px", + "++.7px", + "--.4px", + ], }, "margin-inline-start": { domProp: "marginInlineStart", @@ -2170,8 +2806,19 @@ var gCSSProperties = { logical: true, /* no subproperties */ /* auto may or may not be initial */ - initial_values: [ "0", "0px", "0%", "0em", "0ex", "calc(0pt)", "calc(0% + 0px)" ], - other_values: [ "1px", "3em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "0em", + "0ex", + "calc(0pt)", + "calc(0% + 0px)", + ], + other_values: [ + "1px", + "3em", + "5%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -2179,19 +2826,65 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "5", "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ], + invalid_values: [ + "5", + "..25px", + ".+5px", + ".px", + "-.px", + "++5px", + "-+4px", + "+-3px", + "--7px", + "+-.6px", + "-+.5px", + "++.7px", + "--.4px", + ], }, - "mask": { + mask: { domProp: "mask", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, /* FIXME: All mask-border-* should be added when we implement them. */ - subproperties: ["mask-clip", "mask-image", "mask-mode", "mask-origin", "mask-position-x", "mask-position-y", "mask-repeat", "mask-size" , "mask-composite"], - initial_values: [ "match-source", "none", "repeat", "add", "0% 0%", "top left", "0% 0% / auto", "top left / auto", "left top / auto", "0% 0% / auto auto", - "top left none", "left top none", "none left top", "none top left", "none 0% 0%", "top left / auto none", "left top / auto none", + subproperties: [ + "mask-clip", + "mask-image", + "mask-mode", + "mask-origin", + "mask-position-x", + "mask-position-y", + "mask-repeat", + "mask-size", + "mask-composite", + ], + initial_values: [ + "match-source", + "none", + "repeat", + "add", + "0% 0%", + "top left", + "0% 0% / auto", + "top left / auto", + "left top / auto", + "0% 0% / auto auto", + "top left none", + "left top none", + "none left top", + "none top left", + "none 0% 0%", + "top left / auto none", + "left top / auto none", "top left / auto auto none", - "match-source none repeat add top left", "top left repeat none add", "none repeat add top left / auto", "top left / auto repeat none add match-source", "none repeat add 0% 0% / auto auto match-source", - "border-box", "border-box border-box" ], + "match-source none repeat add top left", + "top left repeat none add", + "none repeat add top left / auto", + "top left / auto repeat none add match-source", + "none repeat add 0% 0% / auto auto match-source", + "border-box", + "border-box border-box", + ], other_values: [ "none alpha repeat add left top", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", @@ -2241,74 +2934,144 @@ var gCSSProperties = { ], invalid_values: [ /* mixes with keywords have to be in correct order */ - "50% left", "top 50%", + "50% left", + "top 50%", /* no quirks mode colors */ "radial-gradient(at 10% bottom, ffffff, black) add no-repeat", /* no quirks mode lengths */ "linear-gradient(red -99, yellow, green, blue 120%)", /* bug 258080: don't accept background-position separated */ - "left url(404.png) top", "top url(404.png) left", + "left url(404.png) top", + "top url(404.png) left", "-moz-element(#a rubbish)", - "left top / match-source" - ] + "left top / match-source", + ], }, "mask-clip": { domProp: "maskClip", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "border-box" ], - other_values: [ "content-box", "fill-box", "stroke-box", "view-box", "no-clip", "padding-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ], - invalid_values: [ "content-box content-box", "margin-box" ] + initial_values: ["border-box"], + other_values: [ + "content-box", + "fill-box", + "stroke-box", + "view-box", + "no-clip", + "padding-box", + "border-box, padding-box", + "padding-box, padding-box, padding-box", + "border-box, border-box", + ], + invalid_values: ["content-box content-box", "margin-box"], }, "mask-composite": { domProp: "maskComposite", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "add" ], - other_values: [ "subtract", "intersect", "exclude", "add, add", "subtract, intersect", "subtract, subtract, add"], - invalid_values: [ "add subtract", "intersect exclude" ] + initial_values: ["add"], + other_values: [ + "subtract", + "intersect", + "exclude", + "add, add", + "subtract, intersect", + "subtract, subtract, add", + ], + invalid_values: ["add subtract", "intersect exclude"], }, "mask-image": { domProp: "maskImage", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], + initial_values: ["none"], other_values: [ - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', - "none, none", - "none, none, none, none, none", - "url(#mymask)", - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", - "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", + "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", + 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', + "none, none", + "none, none, none, none, none", + "url(#mymask)", + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", + "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", ].concat(validGradientAndElementValues), - invalid_values: [ - ].concat(invalidGradientAndElementValues), - unbalanced_values: [ - ].concat(unbalancedGradientAndElementValues) + invalid_values: [].concat(invalidGradientAndElementValues), + unbalanced_values: [].concat(unbalancedGradientAndElementValues), }, "mask-mode": { domProp: "maskMode", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "match-source" ], - other_values: [ "alpha", "luminance", "match-source, match-source", "match-source, alpha", "alpha, luminance, match-source"], - invalid_values: [ "match-source match-source", "alpha match-source" ] + initial_values: ["match-source"], + other_values: [ + "alpha", + "luminance", + "match-source, match-source", + "match-source, alpha", + "alpha, luminance, match-source", + ], + invalid_values: ["match-source match-source", "alpha match-source"], }, "mask-origin": { domProp: "maskOrigin", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "border-box" ], - other_values: [ "padding-box", "content-box", "fill-box", "stroke-box", "view-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ], - invalid_values: [ "padding-box padding-box", "no-clip", "margin-box" ] + initial_values: ["border-box"], + other_values: [ + "padding-box", + "content-box", + "fill-box", + "stroke-box", + "view-box", + "border-box, padding-box", + "padding-box, padding-box, padding-box", + "border-box, border-box", + ], + invalid_values: ["padding-box padding-box", "no-clip", "margin-box"], }, "mask-position": { domProp: "maskPosition", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - initial_values: [ "top 0% left 0%", "top 0% left", "top left", "left top", "0% 0%", "0% top", "left 0%" ], - other_values: [ "top", "left", "right", "bottom", "center", "center bottom", "bottom center", "center right", "right center", "center top", "top center", "center left", "left center", "right bottom", "bottom right", "50%", "top left, top left", "top left, top right", "top right, top left", "left top, 0% 0%", "10% 20%, 30%, 40%", "top left, bottom right", "right bottom, left top", "0%", "0px", "30px", "0%, 10%, 20%, 30%", "top, top, top, top, top", + initial_values: [ + "top 0% left 0%", + "top 0% left", + "top left", + "left top", + "0% 0%", + "0% top", + "left 0%", + ], + other_values: [ + "top", + "left", + "right", + "bottom", + "center", + "center bottom", + "bottom center", + "center right", + "right center", + "center top", + "top center", + "center left", + "left center", + "right bottom", + "bottom right", + "50%", + "top left, top left", + "top left, top right", + "top right, top left", + "left top, 0% 0%", + "10% 20%, 30%, 40%", + "top left, bottom right", + "right bottom, left top", + "0%", + "0px", + "30px", + "0%, 10%, 20%, 30%", + "top, top, top, top, top", "calc(20px)", "calc(20px) 10px", "10px calc(20px)", @@ -2336,22 +3099,44 @@ var gCSSProperties = { "left top 15px", "left 10px top", "left 20%", - "right 20%" + "right 20%", + ], + subproperties: ["mask-position-x", "mask-position-y"], + invalid_values: [ + "center 10px center 4px", + "center 10px center", + "top 20%", + "bottom 20%", + "50% left", + "top 50%", + "50% bottom 10%", + "right 10% 50%", + "left right", + "top bottom", + "left 10% right", + "top 20px bottom 20px", + "left left", + "0px calc(0px + rubbish)", ], - subproperties: [ "mask-position-x", "mask-position-y" ], - invalid_values: [ "center 10px center 4px", "center 10px center", - "top 20%", "bottom 20%", "50% left", "top 50%", - "50% bottom 10%", "right 10% 50%", "left right", - "top bottom", "left 10% right", - "top 20px bottom 20px", "left left", - "0px calc(0px + rubbish)"], }, "mask-position-x": { domProp: "maskPositionX", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "left", "0%" ], - other_values: [ "right", "center", "50%", "center, center", "center, right", "right, center", "center, 50%", "10%, 20%, 40%", "1px", "30px", "50%, 10%, 20%, 30%", "center, center, center, center, center", + initial_values: ["left", "0%"], + other_values: [ + "right", + "center", + "50%", + "center, center", + "center, right", + "right, center", + "center, 50%", + "10%, 20%, 40%", + "1px", + "30px", + "50%, 10%, 20%, 30%", + "center, center, center, center, center", "calc(20px)", "calc(20px + 1em)", "calc(20px / 2)", @@ -2367,17 +3152,43 @@ var gCSSProperties = { "right 20px", "right 3em", ], - invalid_values: [ "center 10px", "right 10% 50%", "left right", "left left", - "bottom 20px", "top 10%", "bottom 3em", - "top", "bottom", "top, top", "top, bottom", "bottom, top", "top, 0%", "top, top, top, top, top", - "calc(0px + rubbish)", "center 0%"], + invalid_values: [ + "center 10px", + "right 10% 50%", + "left right", + "left left", + "bottom 20px", + "top 10%", + "bottom 3em", + "top", + "bottom", + "top, top", + "top, bottom", + "bottom, top", + "top, 0%", + "top, top, top, top, top", + "calc(0px + rubbish)", + "center 0%", + ], }, "mask-position-y": { domProp: "maskPositionY", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "top", "0%" ], - other_values: [ "bottom", "center", "50%", "center, center", "center, bottom", "bottom, center", "center, 0%", "10%, 20%, 40%", "1px", "30px", "50%, 10%, 20%, 30%", "center, center, center, center, center", + initial_values: ["top", "0%"], + other_values: [ + "bottom", + "center", + "50%", + "center, center", + "center, bottom", + "bottom, center", + "center, 0%", + "10%, 20%, 40%", + "1px", + "30px", + "50%, 10%, 20%, 30%", + "center, center, center, center, center", "calc(20px)", "calc(20px + 1em)", "calc(20px / 2)", @@ -2393,17 +3204,34 @@ var gCSSProperties = { "bottom 20px", "bottom 3em", ], - invalid_values: [ "center 10px", "bottom 10% 50%", "top bottom", "top top", - "right 20px", "left 10%", "right 3em", - "left", "right", "left, left", "left, right", "right, left", "left, 0%", "left, left, left, left, left", - "calc(0px + rubbish)", "center 0%"], + invalid_values: [ + "center 10px", + "bottom 10% 50%", + "top bottom", + "top top", + "right 20px", + "left 10%", + "right 3em", + "left", + "right", + "left, left", + "left, right", + "right, left", + "left, 0%", + "left, left, left, left, left", + "calc(0px + rubbish)", + "center 0%", + ], }, "mask-repeat": { domProp: "maskRepeat", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "repeat", "repeat repeat" ], - other_values: [ "repeat-x", "repeat-y", "no-repeat", + initial_values: ["repeat", "repeat repeat"], + other_values: [ + "repeat-x", + "repeat-y", + "no-repeat", "repeat-x, repeat-x", "repeat, no-repeat", "repeat-y, no-repeat, repeat-y", @@ -2414,19 +3242,29 @@ var gCSSProperties = { "repeat no-repeat", "no-repeat no-repeat, no-repeat no-repeat", ], - invalid_values: [ "repeat repeat repeat", - "repeat-x repeat-y", - "repeat repeat-x", - "repeat repeat-y", - "repeat-x repeat", - "repeat-y repeat" ] + invalid_values: [ + "repeat repeat repeat", + "repeat-x repeat-y", + "repeat repeat-x", + "repeat repeat-y", + "repeat-x repeat", + "repeat-y repeat", + ], }, "mask-size": { domProp: "maskSize", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto", "auto auto" ], - other_values: [ "contain", "cover", "100px auto", "auto 100px", "100% auto", "auto 100%", "25% 50px", "3em 40%", + initial_values: ["auto", "auto auto"], + other_values: [ + "contain", + "cover", + "100px auto", + "auto 100px", + "100% auto", + "auto 100%", + "25% 50px", + "3em 40%", "calc(20px)", "calc(20px) 10px", "10px calc(20px)", @@ -2436,27 +3274,65 @@ var gCSSProperties = { "calc(20px + 1em) calc(20px / 2)", "calc(20px + 50%) calc(50% - 10px)", "calc(-20px) calc(-50%)", - "calc(-20%) calc(-50%)" + "calc(-20%) calc(-50%)", + ], + invalid_values: [ + "contain contain", + "cover cover", + "cover auto", + "auto cover", + "contain cover", + "cover contain", + "-5px 3px", + "3px -5px", + "auto -5px", + "-5px auto", + "5 3", + "10px calc(10px + rubbish)", ], - invalid_values: [ "contain contain", "cover cover", "cover auto", "auto cover", "contain cover", "cover contain", "-5px 3px", "3px -5px", "auto -5px", "-5px auto", "5 3", "10px calc(10px + rubbish)" ] }, "mask-type": { domProp: "maskType", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "luminance" ], - other_values: [ "alpha" ], + initial_values: ["luminance"], + other_values: ["alpha"], invalid_values: [], }, "-moz-outline-radius": { domProp: "MozOutlineRadius", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - subproperties: [ "-moz-outline-radius-bottomleft", "-moz-outline-radius-bottomright", "-moz-outline-radius-topleft", "-moz-outline-radius-topright" ], - initial_values: [ "0", "0px", "calc(-2px)", "calc(0px) calc(0pt)", "calc(0px) calc(0em)" ], - other_values: [ "0%", "3%", "1px", "2em", "3em 2px", "2pt 3% 4em", "2px 2px 2px 2px", // circular - "3% / 2%", "1px / 4px", "2em / 1em", "3em 2px / 2px 3em", "2pt 3% 4em / 4pt 1% 5em", "2px 2px 2px 2px / 4px 4px 4px 4px", "1pt / 2pt 3pt", "4pt 5pt / 3pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + subproperties: [ + "-moz-outline-radius-bottomleft", + "-moz-outline-radius-bottomright", + "-moz-outline-radius-topleft", + "-moz-outline-radius-topright", + ], + initial_values: [ + "0", + "0px", + "calc(-2px)", + "calc(0px) calc(0pt)", + "calc(0px) calc(0em)", + ], + other_values: [ + "0%", + "3%", + "1px", + "2em", + "3em 2px", + "2pt 3% 4em", + "2px 2px 2px 2px", // circular + "3% / 2%", + "1px / 4px", + "2em / 1em", + "3em 2px / 2px 3em", + "2pt 3% 4em / 4pt 1% 5em", + "2px 2px 2px 2px / 4px 4px 4px 4px", + "1pt / 2pt 3pt", + "4pt 5pt / 3pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -2468,17 +3344,38 @@ var gCSSProperties = { "calc(3*25px + 50%)", "2px 2px calc(2px + 1%) 2px", "1px 2px 2px 2px / 2px 2px calc(2px + 1%) 2px", - ], - invalid_values: [ "2px -2px", "inherit 2px", "inherit / 2px", "2px inherit", "2px / inherit", "2px 2px 2px 2px 2px", "1px / 2px 2px 2px 2px 2px", "2", "2 2", "2px 2px 2px 2px / 2px 2px 2 2px", "unset 2px", "unset / 2px", "2px unset", "2px / unset" ] + ], + invalid_values: [ + "2px -2px", + "inherit 2px", + "inherit / 2px", + "2px inherit", + "2px / inherit", + "2px 2px 2px 2px 2px", + "1px / 2px 2px 2px 2px 2px", + "2", + "2 2", + "2px 2px 2px 2px / 2px 2px 2 2px", + "unset 2px", + "unset / 2px", + "2px unset", + "2px / unset", + ], }, "-moz-outline-radius-bottomleft": { domProp: "MozOutlineRadiusBottomleft", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)", "calc(0px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)", "calc(0px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -2488,17 +3385,33 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "unset 2px", + "2px unset", + ], }, "-moz-outline-radius-bottomright": { domProp: "MozOutlineRadiusBottomright", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)", "calc(0px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)", "calc(0px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -2508,17 +3421,33 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "unset 2px", + "2px unset", + ], }, "-moz-outline-radius-topleft": { domProp: "MozOutlineRadiusTopleft", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)", "calc(0px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)", "calc(0px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -2528,17 +3457,33 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "unset 2px", + "2px unset", + ], }, "-moz-outline-radius-topright": { domProp: "MozOutlineRadiusTopright", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "width": "200px", "height": "100px", "display": "inline-block"}, - initial_values: [ "0", "0px", "calc(-2px)", "calc(0px)" ], - other_values: [ "0%", "3%", "1px", "2em", // circular - "3% 2%", "1px 4px", "2em 2pt", // elliptical + prerequisites: { width: "200px", height: "100px", display: "inline-block" }, + initial_values: ["0", "0px", "calc(-2px)", "calc(0px)"], + other_values: [ + "0%", + "3%", + "1px", + "2em", // circular + "3% 2%", + "1px 4px", + "2em 2pt", // elliptical "calc(-1%)", "calc(2px)", "calc(50%)", @@ -2548,8 +3493,18 @@ var gCSSProperties = { "calc(20%) calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", - ], - invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px", "unset 2px", "2px unset" ] + ], + invalid_values: [ + "-1px", + "4px -2px", + "inherit 2px", + "2px inherit", + "2", + "2px 2", + "2 2px", + "unset 2px", + "2px unset", + ], }, "padding-inline-end": { domProp: "paddingInlineEnd", @@ -2559,15 +3514,28 @@ var gCSSProperties = { // No applies_to_placeholder because we have a !important rule in forms.css. logical: true, /* no subproperties */ - initial_values: [ "0", "0px", "0%", "0em", "0ex", "calc(0pt)", "calc(0% + 0px)", "calc(-3px)", "calc(-1%)" ], - other_values: [ "1px", "3em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "0em", + "0ex", + "calc(0pt)", + "calc(0% + 0px)", + "calc(-3px)", + "calc(-1%)", + ], + other_values: [ + "1px", + "3em", + "5%", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "5" ] + invalid_values: ["5"], }, "padding-inline-start": { domProp: "paddingInlineStart", @@ -2577,69 +3545,124 @@ var gCSSProperties = { // No applies_to_placeholder because we have a !important rule in forms.css. logical: true, /* no subproperties */ - initial_values: [ "0", "0px", "0%", "0em", "0ex", "calc(0pt)", "calc(0% + 0px)", "calc(-3px)", "calc(-1%)" ], - other_values: [ "1px", "3em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "0em", + "0ex", + "calc(0pt)", + "calc(0% + 0px)", + "calc(-3px)", + "calc(-1%)", + ], + other_values: [ + "1px", + "3em", + "5%", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "5" ] + invalid_values: ["5"], }, - "resize": { + resize: { domProp: "resize", inherited: false, type: CSS_TYPE_LONGHAND, // No applies_to_placeholder because we have a !important rule in forms.css. - prerequisites: { "display": "block", "overflow": "auto" }, - initial_values: [ "none" ], - other_values: [ "both", "horizontal", "vertical", "inline", "block" ], - invalid_values: [] + prerequisites: { display: "block", overflow: "auto" }, + initial_values: ["none"], + other_values: ["both", "horizontal", "vertical", "inline", "block"], + invalid_values: [], }, "-moz-stack-sizing": { domProp: "MozStackSizing", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "stretch-to-fit" ], - other_values: [ "ignore", "ignore-horizontal", "ignore-vertical" ], - invalid_values: [] + initial_values: ["stretch-to-fit"], + other_values: ["ignore", "ignore-horizontal", "ignore-vertical"], + invalid_values: [], }, "-moz-tab-size": { domProp: "MozTabSize", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "8" ], - other_values: [ "0", "2.5", "3", "99", "12000", "0px", "1em", "calc(1px + 1em)", "calc(1px - 2px)", "calc(1 + 1)", "calc(-2.5)" ], - invalid_values: [ "9%", "calc(9% + 1px)", "calc(1 + 1em)", "-1", "-808", "auto" ] + initial_values: ["8"], + other_values: [ + "0", + "2.5", + "3", + "99", + "12000", + "0px", + "1em", + "calc(1px + 1em)", + "calc(1px - 2px)", + "calc(1 + 1)", + "calc(-2.5)", + ], + invalid_values: [ + "9%", + "calc(9% + 1px)", + "calc(1 + 1em)", + "-1", + "-808", + "auto", + ], }, "-moz-text-size-adjust": { domProp: "MozTextSizeAdjust", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "none" ], - invalid_values: [ "-5%", "0", "100", "0%", "50%", "100%", "220.3%" ] + initial_values: ["auto"], + other_values: ["none"], + invalid_values: ["-5%", "0", "100", "0%", "50%", "100%", "220.3%"], }, - "transform": { + transform: { domProp: "transform", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "width": "300px", "height": "50px" }, - initial_values: [ "none" ], - other_values: [ "translatex(1px)", "translatex(4em)", - "translatex(-4px)", "translatex(3px)", + prerequisites: { width: "300px", height: "50px" }, + initial_values: ["none"], + other_values: [ + "translatex(1px)", + "translatex(4em)", + "translatex(-4px)", + "translatex(3px)", "translatex(0px) translatex(1px) translatex(2px) translatex(3px) translatex(4px)", - "translatey(4em)", "translate(3px)", "translate(10px, -3px)", - "rotate(45deg)", "rotate(45grad)", "rotate(45rad)", - "rotate(0.25turn)", "rotate(0)", "scalex(10)", "scaley(10)", - "scale(10)", "scale(10, 20)", "skewx(30deg)", "skewx(0)", - "skewy(0)", "skewx(30grad)", "skewx(30rad)", "skewx(0.08turn)", - "skewy(30deg)", "skewy(30grad)", "skewy(30rad)", "skewy(0.08turn)", - "rotate(45deg) scale(2, 1)", "skewx(45deg) skewx(-50grad)", + "translatey(4em)", + "translate(3px)", + "translate(10px, -3px)", + "rotate(45deg)", + "rotate(45grad)", + "rotate(45rad)", + "rotate(0.25turn)", + "rotate(0)", + "scalex(10)", + "scaley(10)", + "scale(10)", + "scale(10, 20)", + "skewx(30deg)", + "skewx(0)", + "skewy(0)", + "skewx(30grad)", + "skewx(30rad)", + "skewx(0.08turn)", + "skewy(30deg)", + "skewy(30grad)", + "skewy(30rad)", + "skewy(0.08turn)", + "rotate(45deg) scale(2, 1)", + "skewx(45deg) skewx(-50grad)", "translate(0, 0) scale(1, 1) skewx(0) skewy(0) matrix(1, 0, 0, 1, 0, 0)", - "translatex(50%)", "translatey(50%)", "translate(50%)", - "translate(3%, 5px)", "translate(5px, 3%)", + "translatex(50%)", + "translatey(50%)", + "translate(50%)", + "translate(3%, 5px)", + "translate(5px, 3%)", "matrix(1, 2, 3, 4, 5, 6)", /* valid calc() values */ "translatex(calc(5px + 10%))", @@ -2647,27 +3670,53 @@ var gCSSProperties = { "translate(calc(5px - 10% * 3))", "translate(calc(5px - 3 * 10%), 50px)", "translate(-50px, calc(5px - 10% * 3))", - "translatez(1px)", "translatez(4em)", "translatez(-4px)", - "translatez(0px)", "translatez(2px) translatez(5px)", - "translate3d(3px, 4px, 5px)", "translate3d(2em, 3px, 1em)", + "translatez(1px)", + "translatez(4em)", + "translatez(-4px)", + "translatez(0px)", + "translatez(2px) translatez(5px)", + "translate3d(3px, 4px, 5px)", + "translate3d(2em, 3px, 1em)", "translatex(2px) translate3d(4px, 5px, 6px) translatey(1px)", - "scale3d(4, 4, 4)", "scale3d(-2, 3, -7)", "scalez(4)", - "scalez(-6)", "rotate3d(2, 3, 4, 45deg)", - "rotate3d(-3, 7, 0, 12rad)", "rotatex(15deg)", "rotatey(-12grad)", - "rotatez(72rad)", "rotatex(0.125turn)", "rotate3d(0, 0, 0, 0rad)", - "perspective(0px)", "perspective(1000px)", + "scale3d(4, 4, 4)", + "scale3d(-2, 3, -7)", + "scalez(4)", + "scalez(-6)", + "rotate3d(2, 3, 4, 45deg)", + "rotate3d(-3, 7, 0, 12rad)", + "rotatex(15deg)", + "rotatey(-12grad)", + "rotatez(72rad)", + "rotatex(0.125turn)", + "rotate3d(0, 0, 0, 0rad)", + "perspective(0px)", + "perspective(1000px)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)", ], - invalid_values: ["1px", "#0000ff", "red", "auto", - "translatex(1)", "translatey(1)", "translate(2)", + invalid_values: [ + "1px", + "#0000ff", + "red", + "auto", + "translatex(1)", + "translatey(1)", + "translate(2)", "translate(-3, -4)", - "translatex(1px 1px)", "translatex(translatex(1px))", - "translatex(#0000ff)", "translatex(red)", "translatey()", - "matrix(1px, 2px, 3px, 4px, 5px, 6px)", "scale(150%)", - "skewx(red)", "matrix(1%, 0, 0, 0, 0px, 0px)", - "matrix(0, 1%, 2, 3, 4px,5px)", "matrix(0, 1, 2%, 3, 4px, 5px)", - "matrix(0, 1, 2, 3%, 4%, 5%)", "matrix(1, 2, 3, 4, 5px, 6%)", - "matrix(1, 2, 3, 4, 5%, 6px)", "matrix(1, 2, 3, 4, 5%, 6%)", + "translatex(1px 1px)", + "translatex(translatex(1px))", + "translatex(#0000ff)", + "translatex(red)", + "translatey()", + "matrix(1px, 2px, 3px, 4px, 5px, 6px)", + "scale(150%)", + "skewx(red)", + "matrix(1%, 0, 0, 0, 0px, 0px)", + "matrix(0, 1%, 2, 3, 4px,5px)", + "matrix(0, 1, 2%, 3, 4px, 5px)", + "matrix(0, 1, 2, 3%, 4%, 5%)", + "matrix(1, 2, 3, 4, 5px, 6%)", + "matrix(1, 2, 3, 4, 5%, 6px)", + "matrix(1, 2, 3, 4, 5%, 6%)", "matrix(1, 2, 3, 4, 5px, 6em)", /* invalid calc() values */ "translatey(-moz-min(5px,10%))", @@ -2675,14 +3724,17 @@ var gCSSProperties = { "translate(10px, calc(min(5px,10%)))", "translate(calc(max(5px,10%)), 10%)", "matrix(1, 0, 0, 1, max(5px * 3), calc(10% - 3px))", - "perspective(-10px)", "matrix3d(dinosaur)", + "perspective(-10px)", + "matrix3d(dinosaur)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15%, 16)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16px)", - "rotatey(words)", "rotatex(7)", "translate3d(3px, 4px, 1px, 7px)", + "rotatey(words)", + "rotatex(7)", + "translate3d(3px, 4px, 1px, 7px)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13px, 14em, 15px, 16)", - "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 20%, 10%, 15, 16)" + "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 20%, 10%, 15, 16)", ], }, "transform-origin": { @@ -2690,14 +3742,30 @@ var gCSSProperties = { inherited: false, type: CSS_TYPE_LONGHAND, /* no subproperties */ - prerequisites: { "width": "10px", "height": "10px", "display": "block"}, - initial_values: [ "50% 50%", "center", "center center" ], - other_values: [ "25% 25%", "6px 5px", "20% 3em", "0 0", "0in 1in", - "top", "bottom","top left", "top right", - "top center", "center left", "center right", - "bottom left", "bottom right", "bottom center", - "20% center", "6px center", "13in bottom", - "left 50px", "right 13%", "center 40px", + prerequisites: { width: "10px", height: "10px", display: "block" }, + initial_values: ["50% 50%", "center", "center center"], + other_values: [ + "25% 25%", + "6px 5px", + "20% 3em", + "0 0", + "0in 1in", + "top", + "bottom", + "top left", + "top right", + "top center", + "center left", + "center right", + "bottom left", + "bottom right", + "bottom center", + "20% center", + "6px center", + "13in bottom", + "left 50px", + "right 13%", + "center 40px", "calc(20px)", "calc(20px) 10px", "10px calc(20px)", @@ -2709,114 +3777,189 @@ var gCSSProperties = { "calc(-20px) calc(-50%)", "calc(-20%) calc(-50%)", "6px 5px 5px", - "top center 10px" + "top center 10px", + ], + invalid_values: [ + "red", + "auto", + "none", + "0.5 0.5", + "40px #0000ff", + "border", + "center red", + "right diagonal", + "#00ffff bottom", + "0px calc(0px + rubbish)", + "0px 0px calc(0px + rubbish)", ], - invalid_values: ["red", "auto", "none", "0.5 0.5", "40px #0000ff", - "border", "center red", "right diagonal", - "#00ffff bottom", "0px calc(0px + rubbish)", - "0px 0px calc(0px + rubbish)"] }, "perspective-origin": { domProp: "perspectiveOrigin", inherited: false, type: CSS_TYPE_LONGHAND, /* no subproperties */ - prerequisites: { "width": "10px", "height": "10px", "display": "block"}, - initial_values: [ "50% 50%", "center", "center center" ], - other_values: [ "25% 25%", "6px 5px", "20% 3em", "0 0", "0in 1in", - "top", "bottom","top left", "top right", - "top center", "center left", "center right", - "bottom left", "bottom right", "bottom center", - "20% center", "6px center", "13in bottom", - "left 50px", "right 13%", "center 40px", - "calc(20px)", - "calc(20px) 10px", - "10px calc(20px)", - "calc(20px) 25%", - "25% calc(20px)", - "calc(20px) calc(20px)", - "calc(20px + 1em) calc(20px / 2)", - "calc(20px + 50%) calc(50% - 10px)", - "calc(-20px) calc(-50%)", - "calc(-20%) calc(-50%)" ], - invalid_values: [ "red", "auto", "none", "0.5 0.5", "40px #0000ff", - "border", "center red", "right diagonal", - "#00ffff bottom"] + prerequisites: { width: "10px", height: "10px", display: "block" }, + initial_values: ["50% 50%", "center", "center center"], + other_values: [ + "25% 25%", + "6px 5px", + "20% 3em", + "0 0", + "0in 1in", + "top", + "bottom", + "top left", + "top right", + "top center", + "center left", + "center right", + "bottom left", + "bottom right", + "bottom center", + "20% center", + "6px center", + "13in bottom", + "left 50px", + "right 13%", + "center 40px", + "calc(20px)", + "calc(20px) 10px", + "10px calc(20px)", + "calc(20px) 25%", + "25% calc(20px)", + "calc(20px) calc(20px)", + "calc(20px + 1em) calc(20px / 2)", + "calc(20px + 50%) calc(50% - 10px)", + "calc(-20px) calc(-50%)", + "calc(-20%) calc(-50%)", + ], + invalid_values: [ + "red", + "auto", + "none", + "0.5 0.5", + "40px #0000ff", + "border", + "center red", + "right diagonal", + "#00ffff bottom", + ], }, - "perspective": { + perspective: { domProp: "perspective", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "1000px", "500.2px", "0", "0px" ], - invalid_values: [ "pants", "200", "-100px", "-27.2em" ] + initial_values: ["none"], + other_values: ["1000px", "500.2px", "0", "0px"], + invalid_values: ["pants", "200", "-100px", "-27.2em"], }, "backface-visibility": { domProp: "backfaceVisibility", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "visible" ], - other_values: [ "hidden" ], - invalid_values: [ "collapse" ] + initial_values: ["visible"], + other_values: ["hidden"], + invalid_values: ["collapse"], }, "transform-style": { domProp: "transformStyle", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "flat" ], - other_values: [ "preserve-3d" ], - invalid_values: [] + initial_values: ["flat"], + other_values: ["preserve-3d"], + invalid_values: [], }, "-moz-user-focus": { domProp: "MozUserFocus", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "normal", "ignore", "select-all", "select-before", "select-after", "select-same", "select-menu" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "normal", + "ignore", + "select-all", + "select-before", + "select-after", + "select-same", + "select-menu", + ], + invalid_values: [], }, "-moz-user-input": { domProp: "MozUserInput", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "none" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["none"], + invalid_values: [], }, "-moz-user-modify": { domProp: "MozUserModify", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "read-only" ], - other_values: [ "read-write", "write-only" ], - invalid_values: [] + initial_values: ["read-only"], + other_values: ["read-write", "write-only"], + invalid_values: [], }, "-moz-user-select": { domProp: "MozUserSelect", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "user-select", - subproperties: [ "user-select" ], + subproperties: ["user-select"], }, "user-select": { domProp: "userSelect", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "none", "text", "all", "-moz-none" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["none", "text", "all", "-moz-none"], + invalid_values: [], }, - "background": { + background: { domProp: "background", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "background-attachment", "background-color", "background-image", "background-position-x", "background-position-y", "background-repeat", "background-clip", "background-origin", "background-size" ], - initial_values: [ "transparent", "none", "repeat", "scroll", "0% 0%", "top left", "left top", "0% 0% / auto", "top left / auto", "left top / auto", "0% 0% / auto auto", - "transparent none", "top left none", "left top none", "none left top", "none top left", "none 0% 0%", "left top / auto none", "left top / auto auto none", - "transparent none repeat scroll top left", "left top repeat none scroll transparent", "transparent none repeat scroll top left / auto", "left top / auto repeat none scroll transparent", "none repeat scroll 0% 0% / auto auto transparent", - "padding-box border-box" ], + subproperties: [ + "background-attachment", + "background-color", + "background-image", + "background-position-x", + "background-position-y", + "background-repeat", + "background-clip", + "background-origin", + "background-size", + ], + initial_values: [ + "transparent", + "none", + "repeat", + "scroll", + "0% 0%", + "top left", + "left top", + "0% 0% / auto", + "top left / auto", + "left top / auto", + "0% 0% / auto auto", + "transparent none", + "top left none", + "left top none", + "none left top", + "none top left", + "none 0% 0%", + "left top / auto none", + "left top / auto auto none", + "transparent none repeat scroll top left", + "left top repeat none scroll transparent", + "transparent none repeat scroll top left / auto", + "left top / auto repeat none scroll transparent", + "none repeat scroll 0% 0% / auto auto transparent", + "padding-box border-box", + ], other_values: [ - /* without multiple backgrounds */ + /* without multiple backgrounds */ "green", "none green repeat scroll left top", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", @@ -2875,13 +4018,15 @@ var gCSSProperties = { ], invalid_values: [ /* mixes with keywords have to be in correct order */ - "50% left", "top 50%", + "50% left", + "top 50%", /* 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%)", /* bug 258080: don't accept background-position separated */ - "left url(404.png) top", "top url(404.png) left", + "left url(404.png) top", + "top url(404.png) left", /* not allowed to have color in non-bottom layer */ "url(404.png) transparent, url(404.png)", "url(404.png) red, url(404.png)", @@ -2898,7 +4043,7 @@ var gCSSProperties = { "-moz-element(#a rubbish) black", "content-box text text", "padding-box text url(404.png) text", - ] + ], }, "background-attachment": { domProp: "backgroundAttachment", @@ -2908,9 +4053,16 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "scroll" ], - other_values: [ "fixed", "local", "scroll,scroll", "fixed, scroll", "scroll, fixed, local, scroll", "fixed, fixed" ], - invalid_values: [] + initial_values: ["scroll"], + other_values: [ + "fixed", + "local", + "scroll,scroll", + "fixed, scroll", + "scroll, fixed, local, scroll", + "fixed, fixed", + ], + invalid_values: [], }, "background-blend-mode": { domProp: "backgroundBlendMode", @@ -2920,9 +4072,24 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", - "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity" ], + initial_values: ["normal"], + other_values: [ + "multiply", + "screen", + "overlay", + "darken", + "lighten", + "color-dodge", + "color-burn", + "hard-light", + "soft-light", + "difference", + "exclusion", + "hue", + "saturation", + "color", + "luminosity", + ], invalid_values: ["none", "10px", "multiply multiply"], }, "background-clip": { @@ -2937,9 +4104,26 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "border-box" ], - other_values: [ "content-box", "padding-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box", "text", "content-box, text", "text, border-box", "text, text" ], - invalid_values: [ "margin-box", "border-box border-box", "fill-box", "stroke-box", "view-box", "no-clip" ] + initial_values: ["border-box"], + other_values: [ + "content-box", + "padding-box", + "border-box, padding-box", + "padding-box, padding-box, padding-box", + "border-box, border-box", + "text", + "content-box, text", + "text, border-box", + "text, text", + ], + invalid_values: [ + "margin-box", + "border-box border-box", + "fill-box", + "stroke-box", + "view-box", + "no-clip", + ], }, "background-color": { domProp: "backgroundColor", @@ -2949,9 +4133,30 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "transparent", "rgba(0, 0, 0, 0)" ], - other_values: [ "green", "rgb(255, 0, 128)", "#fc2", "#96ed2a", "black", "rgba(255,255,0,3)", "hsl(240, 50%, 50%)", "rgb(50%, 50%, 50%)", "-moz-default-background-color", "rgb(100, 100.0, 100)", "rgba(255, 127, 15, 0)", "hsla(240, 97%, 50%, 0.0)", "rgba(255,255,255,-3.7)" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "rgb(100, 100%, 100)" ], + initial_values: ["transparent", "rgba(0, 0, 0, 0)"], + other_values: [ + "green", + "rgb(255, 0, 128)", + "#fc2", + "#96ed2a", + "black", + "rgba(255,255,0,3)", + "hsl(240, 50%, 50%)", + "rgb(50%, 50%, 50%)", + "-moz-default-background-color", + "rgb(100, 100.0, 100)", + "rgba(255, 127, 15, 0)", + "hsla(240, 97%, 50%, 0.0)", + "rgba(255,255,255,-3.7)", + ], + invalid_values: [ + "#0", + "#00", + "#00000", + "#0000000", + "#000000000", + "rgb(100, 100%, 100)", + ], quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" }, }, "background-image": { @@ -2962,19 +4167,19 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "none" ], + initial_values: ["none"], other_values: [ - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', - "none, none", - "none, none, none, none, none", - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", - "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", + "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", + 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', + "none, none", + "none, none, none, none, none", + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", + "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", ].concat(validGradientAndElementValues), - invalid_values: [ - ].concat(invalidGradientAndElementValues), - unbalanced_values: [ - ].concat(unbalancedGradientAndElementValues) + invalid_values: [].concat(invalidGradientAndElementValues), + unbalanced_values: [].concat(unbalancedGradientAndElementValues), }, "background-origin": { domProp: "backgroundOrigin", @@ -2984,9 +4189,22 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "padding-box" ], - other_values: [ "border-box", "content-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ], - invalid_values: [ "margin-box", "padding-box padding-box", "fill-box", "stroke-box", "view-box", "no-clip" ] + initial_values: ["padding-box"], + other_values: [ + "border-box", + "content-box", + "border-box, padding-box", + "padding-box, padding-box, padding-box", + "border-box, border-box", + ], + invalid_values: [ + "margin-box", + "padding-box padding-box", + "fill-box", + "stroke-box", + "view-box", + "no-clip", + ], }, "background-position": { domProp: "backgroundPosition", @@ -2996,8 +4214,44 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "top 0% left 0%", "top 0% left", "top left", "left top", "0% 0%", "0% top", "left 0%" ], - other_values: [ "top", "left", "right", "bottom", "center", "center bottom", "bottom center", "center right", "right center", "center top", "top center", "center left", "left center", "right bottom", "bottom right", "50%", "top left, top left", "top left, top right", "top right, top left", "left top, 0% 0%", "10% 20%, 30%, 40%", "top left, bottom right", "right bottom, left top", "0%", "0px", "30px", "0%, 10%, 20%, 30%", "top, top, top, top, top", + initial_values: [ + "top 0% left 0%", + "top 0% left", + "top left", + "left top", + "0% 0%", + "0% top", + "left 0%", + ], + other_values: [ + "top", + "left", + "right", + "bottom", + "center", + "center bottom", + "bottom center", + "center right", + "right center", + "center top", + "top center", + "center left", + "left center", + "right bottom", + "bottom right", + "50%", + "top left, top left", + "top left, top right", + "top right, top left", + "left top, 0% 0%", + "10% 20%, 30%, 40%", + "top left, bottom right", + "right bottom, left top", + "0%", + "0px", + "30px", + "0%, 10%, 20%, 30%", + "top, top, top, top, top", "calc(20px)", "calc(20px) 10px", "10px calc(20px)", @@ -3025,15 +4279,25 @@ var gCSSProperties = { "left top 15px", "left 10px top", "left 20%", - "right 20%" + "right 20%", + ], + subproperties: ["background-position-x", "background-position-y"], + invalid_values: [ + "center 10px center 4px", + "center 10px center", + "top 20%", + "bottom 20%", + "50% left", + "top 50%", + "50% bottom 10%", + "right 10% 50%", + "left right", + "top bottom", + "left 10% right", + "top 20px bottom 20px", + "left left", + "0px calc(0px + rubbish)", ], - subproperties: [ "background-position-x", "background-position-y" ], - invalid_values: [ "center 10px center 4px", "center 10px center", - "top 20%", "bottom 20%", "50% left", "top 50%", - "50% bottom 10%", "right 10% 50%", "left right", - "top bottom", "left 10% right", - "top 20px bottom 20px", "left left", - "0px calc(0px + rubbish)"], quirks_values: { "20 20": "20px 20px", "10 5px": "10px 5px", @@ -3048,8 +4312,20 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "left 0%", "left", "0%" ], - other_values: [ "right", "center", "50%", "left, left", "left, right", "right, left", "left, 0%", "10%, 20%, 40%", "0px", "30px", "0%, 10%, 20%, 30%", "left, left, left, left, left", + initial_values: ["left 0%", "left", "0%"], + other_values: [ + "right", + "center", + "50%", + "left, left", + "left, right", + "right, left", + "left, 0%", + "10%, 20%, 40%", + "0px", + "30px", + "0%, 10%, 20%, 30%", + "left, left, left, left, left", "calc(20px)", "calc(20px + 1em)", "calc(20px / 2)", @@ -3065,10 +4341,23 @@ var gCSSProperties = { "right 20px", "right 3em", ], - invalid_values: [ "center 10px", "right 10% 50%", "left right", "left left", - "bottom 20px", "top 10%", "bottom 3em", - "top", "bottom", "top, top", "top, bottom", "bottom, top", "top, 0%", "top, top, top, top, top", - "calc(0px + rubbish)"], + invalid_values: [ + "center 10px", + "right 10% 50%", + "left right", + "left left", + "bottom 20px", + "top 10%", + "bottom 3em", + "top", + "bottom", + "top, top", + "top, bottom", + "bottom, top", + "top, 0%", + "top, top, top, top, top", + "calc(0px + rubbish)", + ], }, "background-position-y": { domProp: "backgroundPositionY", @@ -3078,8 +4367,20 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "top 0%", "top", "0%" ], - other_values: [ "bottom", "center", "50%", "top, top", "top, bottom", "bottom, top", "top, 0%", "10%, 20%, 40%", "0px", "30px", "0%, 10%, 20%, 30%", "top, top, top, top, top", + initial_values: ["top 0%", "top", "0%"], + other_values: [ + "bottom", + "center", + "50%", + "top, top", + "top, bottom", + "bottom, top", + "top, 0%", + "10%, 20%, 40%", + "0px", + "30px", + "0%, 10%, 20%, 30%", + "top, top, top, top, top", "calc(20px)", "calc(20px + 1em)", "calc(20px / 2)", @@ -3095,10 +4396,23 @@ var gCSSProperties = { "bottom 20px", "bottom 3em", ], - invalid_values: [ "center 10px", "bottom 10% 50%", "top bottom", "top top", - "right 20px", "left 10%", "right 3em", - "left", "right", "left, left", "left, right", "right, left", "left, 0%", "left, left, left, left, left", - "calc(0px + rubbish)"], + invalid_values: [ + "center 10px", + "bottom 10% 50%", + "top bottom", + "top top", + "right 20px", + "left 10%", + "right 3em", + "left", + "right", + "left, left", + "left, right", + "right, left", + "left, 0%", + "left, left, left, left, left", + "calc(0px + rubbish)", + ], }, "background-repeat": { domProp: "backgroundRepeat", @@ -3108,8 +4422,11 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "repeat", "repeat repeat" ], - other_values: [ "repeat-x", "repeat-y", "no-repeat", + initial_values: ["repeat", "repeat repeat"], + other_values: [ + "repeat-x", + "repeat-y", + "no-repeat", "repeat-x, repeat-x", "repeat, no-repeat", "repeat-y, no-repeat, repeat-y", @@ -3126,24 +4443,26 @@ var gCSSProperties = { "space repeat, repeat-x", "space no-repeat, repeat-y", "space space", - "space round" + "space round", + ], + invalid_values: [ + "repeat repeat repeat", + "repeat-x repeat-y", + "repeat repeat-x", + "repeat repeat-y", + "repeat-x repeat", + "repeat-y repeat", + "round round round", + "repeat-x round", + "round repeat-x", + "repeat-y round", + "round repeat-y", + "space space space", + "repeat-x space", + "space repeat-x", + "repeat-y space", + "space repeat-y", ], - invalid_values: [ "repeat repeat repeat", - "repeat-x repeat-y", - "repeat repeat-x", - "repeat repeat-y", - "repeat-x repeat", - "repeat-y repeat", - "round round round", - "repeat-x round", - "round repeat-x", - "repeat-y round", - "round repeat-y", - "space space space", - "repeat-x space", - "space repeat-x", - "repeat-y space", - "space repeat-y" ] }, "background-size": { domProp: "backgroundSize", @@ -3153,8 +4472,16 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "auto", "auto auto" ], - other_values: [ "contain", "cover", "100px auto", "auto 100px", "100% auto", "auto 100%", "25% 50px", "3em 40%", + initial_values: ["auto", "auto auto"], + other_values: [ + "contain", + "cover", + "100px auto", + "auto 100px", + "100% auto", + "auto 100%", + "25% 50px", + "3em 40%", "calc(20px)", "calc(20px) 10px", "10px calc(20px)", @@ -3164,37 +4491,100 @@ var gCSSProperties = { "calc(20px + 1em) calc(20px / 2)", "calc(20px + 50%) calc(50% - 10px)", "calc(-20px) calc(-50%)", - "calc(-20%) calc(-50%)" + "calc(-20%) calc(-50%)", + ], + invalid_values: [ + "contain contain", + "cover cover", + "cover auto", + "auto cover", + "contain cover", + "cover contain", + "-5px 3px", + "3px -5px", + "auto -5px", + "-5px auto", + "5 3", + "10px calc(10px + rubbish)", ], - invalid_values: [ "contain contain", "cover cover", "cover auto", "auto cover", "contain cover", "cover contain", "-5px 3px", "3px -5px", "auto -5px", "-5px auto", "5 3", "10px calc(10px + rubbish)" ] }, - "border": { + border: { domProp: "border", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-bottom-color", "border-bottom-style", "border-bottom-width", "border-left-color", "border-left-style", "border-left-width", "border-right-color", "border-right-style", "border-right-width", "border-top-color", "border-top-style", "border-top-width", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor", "calc(4px - 1px) none" ], - other_values: [ "solid", "medium solid", "green solid", "10px solid", "thick solid", "calc(2px) solid blue" ], - invalid_values: [ "5%", "medium solid ff00ff", "5 solid green" ] + subproperties: [ + "border-bottom-color", + "border-bottom-style", + "border-bottom-width", + "border-left-color", + "border-left-style", + "border-left-width", + "border-right-color", + "border-right-style", + "border-right-width", + "border-top-color", + "border-top-style", + "border-top-width", + "border-image-source", + "border-image-slice", + "border-image-width", + "border-image-outset", + "border-image-repeat", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + "calc(4px - 1px) none", + ], + other_values: [ + "solid", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "calc(2px) solid blue", + ], + invalid_values: ["5%", "medium solid ff00ff", "5 solid green"], }, "border-bottom": { domProp: "borderBottom", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-bottom-color", "border-bottom-style", "border-bottom-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 solid green" ] + subproperties: [ + "border-bottom-color", + "border-bottom-style", + "border-bottom-width", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: ["5%", "5", "5 solid green"], }, "border-bottom-color": { domProp: "borderBottomColor", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - prerequisites: { "color": "black" }, - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000" ], + prerequisites: { color: "black" }, + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000"], quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" }, }, "border-bottom-style": { @@ -3203,9 +4593,18 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, /* XXX hidden is sometimes the same as initial */ - initial_values: [ "none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + ], + invalid_values: [], }, "border-bottom-width": { domProp: "borderBottomWidth", @@ -3213,8 +4612,12 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, prerequisites: { "border-bottom-style": "solid" }, - initial_values: [ "medium", "3px", "calc(4px - 1px)" ], - other_values: [ "thin", "thick", "1px", "2em", + initial_values: ["medium", "3px", "calc(4px - 1px)"], + other_values: [ + "thin", + "thick", + "1px", + "2em", "calc(2px)", "calc(-2px)", "calc(0em)", @@ -3224,46 +4627,95 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "5%" ], + invalid_values: ["5%"], quirks_values: { "5": "5px" }, }, "border-collapse": { domProp: "borderCollapse", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "separate" ], - other_values: [ "collapse" ], - invalid_values: [] + initial_values: ["separate"], + other_values: ["collapse"], + invalid_values: [], }, "border-color": { domProp: "borderColor", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-top-color", "border-right-color", "border-bottom-color", "border-left-color" ], - initial_values: [ "currentColor", "currentColor currentColor", "currentColor currentColor currentColor", "currentColor currentColor currentcolor CURRENTcolor" ], - other_values: [ "green", "currentColor green", "currentColor currentColor green", "currentColor currentColor currentColor green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "red rgb(nonsense)", "red 1px" ], - unbalanced_values: [ "red rgb(" ], + subproperties: [ + "border-top-color", + "border-right-color", + "border-bottom-color", + "border-left-color", + ], + initial_values: [ + "currentColor", + "currentColor currentColor", + "currentColor currentColor currentColor", + "currentColor currentColor currentcolor CURRENTcolor", + ], + other_values: [ + "green", + "currentColor green", + "currentColor currentColor green", + "currentColor currentColor currentColor green", + "rgba(255,128,0,0.5)", + "transparent", + ], + invalid_values: [ + "#0", + "#00", + "#00000", + "#0000000", + "#000000000", + "red rgb(nonsense)", + "red 1px", + ], + unbalanced_values: ["red rgb("], quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" }, }, "border-left": { domProp: "borderLeft", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-left-color", "border-left-style", "border-left-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 solid green", "calc(5px + rubbish) green solid", "5px rgb(0, rubbish, 0) solid" ] + subproperties: [ + "border-left-color", + "border-left-style", + "border-left-width", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: [ + "5%", + "5", + "5 solid green", + "calc(5px + rubbish) green solid", + "5px rgb(0, rubbish, 0) solid", + ], }, "border-left-color": { domProp: "borderLeftColor", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - prerequisites: { "color": "black" }, - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000" ], + prerequisites: { color: "black" }, + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000"], quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" }, }, "border-left-style": { @@ -3272,9 +4724,18 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, /* XXX hidden is sometimes the same as initial */ - initial_values: [ "none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + ], + invalid_values: [], }, "border-left-width": { domProp: "borderLeftWidth", @@ -3282,8 +4743,12 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, prerequisites: { "border-left-style": "solid" }, - initial_values: [ "medium", "3px", "calc(4px - 1px)" ], - other_values: [ "thin", "thick", "1px", "2em", + initial_values: ["medium", "3px", "calc(4px - 1px)"], + other_values: [ + "thin", + "thick", + "1px", + "2em", "calc(2px)", "calc(-2px)", "calc(0em)", @@ -3293,27 +4758,45 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "5%" ], + invalid_values: ["5%"], quirks_values: { "5": "5px" }, }, "border-right": { domProp: "borderRight", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-right-color", "border-right-style", "border-right-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 solid green" ] + subproperties: [ + "border-right-color", + "border-right-style", + "border-right-width", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: ["5%", "5", "5 solid green"], }, "border-right-color": { domProp: "borderRightColor", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - prerequisites: { "color": "black" }, - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000" ], + prerequisites: { color: "black" }, + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000"], quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" }, }, "border-right-style": { @@ -3322,9 +4805,18 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, /* XXX hidden is sometimes the same as initial */ - initial_values: [ "none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + ], + invalid_values: [], }, "border-right-width": { domProp: "borderRightWidth", @@ -3332,8 +4824,12 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, prerequisites: { "border-right-style": "solid" }, - initial_values: [ "medium", "3px", "calc(4px - 1px)" ], - other_values: [ "thin", "thick", "1px", "2em", + initial_values: ["medium", "3px", "calc(4px - 1px)"], + other_values: [ + "thin", + "thick", + "1px", + "2em", "calc(2px)", "calc(-2px)", "calc(0em)", @@ -3343,16 +4839,48 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "5%" ], + invalid_values: ["5%"], quirks_values: { "5": "5px" }, }, "border-spacing": { domProp: "borderSpacing", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "0", "0 0", "0px", "0 0px", "calc(0px)", "calc(0px) calc(0em)", "calc(2em - 2em) calc(3px + 7px - 10px)", "calc(-5px)", "calc(-5px) calc(-5px)" ], - other_values: [ "3px", "4em 2px", "4em 0", "0px 2px", "calc(7px)", "0 calc(7px)", "calc(7px) 0", "calc(0px) calc(7px)", "calc(7px) calc(0px)", "7px calc(0px)", "calc(0px) 7px", "7px calc(0px)", "3px calc(2em)" ], - invalid_values: [ "0%", "0 0%", "-5px", "-5px -5px", "0 -5px", "-5px 0", "0 calc(0px + rubbish)" ], + initial_values: [ + "0", + "0 0", + "0px", + "0 0px", + "calc(0px)", + "calc(0px) calc(0em)", + "calc(2em - 2em) calc(3px + 7px - 10px)", + "calc(-5px)", + "calc(-5px) calc(-5px)", + ], + other_values: [ + "3px", + "4em 2px", + "4em 0", + "0px 2px", + "calc(7px)", + "0 calc(7px)", + "calc(7px) 0", + "calc(0px) calc(7px)", + "calc(7px) calc(0px)", + "7px calc(0px)", + "calc(0px) 7px", + "7px calc(0px)", + "3px calc(2em)", + ], + invalid_values: [ + "0%", + "0 0%", + "-5px", + "-5px -5px", + "0 -5px", + "-5px 0", + "0 calc(0px + rubbish)", + ], quirks_values: { "2px 5": "2px 5px", "7": "7px", @@ -3363,30 +4891,70 @@ var gCSSProperties = { domProp: "borderStyle", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-top-style", "border-right-style", "border-bottom-style", "border-left-style" ], + subproperties: [ + "border-top-style", + "border-right-style", + "border-bottom-style", + "border-left-style", + ], /* XXX hidden is sometimes the same as initial */ - initial_values: [ "none", "none none", "none none none", "none none none none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge", "none solid", "none none solid", "none none none solid", "groove none none none", "none ridge none none", "none none double none", "none none none dotted" ], - invalid_values: [] + initial_values: [ + "none", + "none none", + "none none none", + "none none none none", + ], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + "none solid", + "none none solid", + "none none none solid", + "groove none none none", + "none ridge none none", + "none none double none", + "none none none dotted", + ], + invalid_values: [], }, "border-top": { domProp: "borderTop", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-top-color", "border-top-style", "border-top-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 solid green" ] + subproperties: ["border-top-color", "border-top-style", "border-top-width"], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: ["5%", "5", "5 solid green"], }, "border-top-color": { domProp: "borderTopColor", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - prerequisites: { "color": "black" }, - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000" ], + prerequisites: { color: "black" }, + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000"], quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" }, }, "border-top-style": { @@ -3395,9 +4963,18 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, /* XXX hidden is sometimes the same as initial */ - initial_values: [ "none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + ], + invalid_values: [], }, "border-top-width": { domProp: "borderTopWidth", @@ -3405,8 +4982,12 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, prerequisites: { "border-top-style": "solid" }, - initial_values: [ "medium", "3px", "calc(4px - 1px)" ], - other_values: [ "thin", "thick", "1px", "2em", + initial_values: ["medium", "3px", "calc(4px - 1px)"], + other_values: [ + "thin", + "thick", + "1px", + "2em", "calc(2px)", "calc(-2px)", "calc(0em)", @@ -3416,30 +4997,45 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "5%" ], + invalid_values: ["5%"], quirks_values: { "5": "5px" }, }, "border-width": { domProp: "borderWidth", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-top-width", "border-right-width", "border-bottom-width", "border-left-width" ], + subproperties: [ + "border-top-width", + "border-right-width", + "border-bottom-width", + "border-left-width", + ], prerequisites: { "border-style": "solid" }, - initial_values: [ "medium", "3px", "medium medium", "3px medium medium", "medium 3px medium medium", "calc(3px) 3px calc(5px - 2px) calc(2px - -1px)" ], - other_values: [ "thin", "thick", "1px", "2em", "2px 0 0px 1em", "calc(2em)" ], - invalid_values: [ "5%", "1px calc(nonsense)", "1px red" ], - unbalanced_values: [ "1px calc(" ], + initial_values: [ + "medium", + "3px", + "medium medium", + "3px medium medium", + "medium 3px medium medium", + "calc(3px) 3px calc(5px - 2px) calc(2px - -1px)", + ], + other_values: ["thin", "thick", "1px", "2em", "2px 0 0px 1em", "calc(2em)"], + invalid_values: ["5%", "1px calc(nonsense)", "1px red"], + unbalanced_values: ["1px calc("], quirks_values: { "5": "5px" }, }, - "bottom": { + bottom: { domProp: "bottom", inherited: false, type: CSS_TYPE_LONGHAND, /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, + prerequisites: { position: "relative" }, /* XXX 0 may or may not be equal to auto */ - initial_values: [ "auto" ], - other_values: [ "32px", "-3em", "12%", + initial_values: ["auto"], + other_values: [ + "32px", + "-3em", + "12%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -3455,11 +5051,24 @@ var gCSSProperties = { inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "none" ], - prerequisites: { "color": "blue" }, - other_values: [ "2px 2px", "2px 2px 1px", "2px 2px 2px 2px", "blue 3px 2px", "2px 2px 1px 5px green", "2px 2px red", "green 2px 2px 1px", "green 2px 2px, blue 1px 3px 4px", "currentColor 3px 3px", "blue 2px 2px, currentColor 1px 2px, 1px 2px 3px 2px orange", "3px 0 0 0", "inset 2px 2px 3px 4px black", "2px -2px green inset, 4px 4px 3px blue, inset 2px 2px", + initial_values: ["none"], + prerequisites: { color: "blue" }, + other_values: [ + "2px 2px", + "2px 2px 1px", + "2px 2px 2px 2px", + "blue 3px 2px", + "2px 2px 1px 5px green", + "2px 2px red", + "green 2px 2px 1px", + "green 2px 2px, blue 1px 3px 4px", + "currentColor 3px 3px", + "blue 2px 2px, currentColor 1px 2px, 1px 2px 3px 2px orange", + "3px 0 0 0", + "inset 2px 2px 3px 4px black", + "2px -2px green inset, 4px 4px 3px blue, inset 2px 2px", /* calc() values */ - "2px 2px calc(-5px)", /* clamped */ + "2px 2px calc(-5px)" /* clamped */, "calc(3em - 2px) 2px green", "green calc(3em - 2px) 2px", "2px calc(2px + 0.2em)", @@ -3469,48 +5078,77 @@ var gCSSProperties = { "-2px -2px", "calc(2px) calc(2px)", "calc(2px) calc(2px) calc(2px)", - "calc(2px) calc(2px) calc(2px) calc(2px)" + "calc(2px) calc(2px) calc(2px) calc(2px)", + ], + invalid_values: [ + "3% 3%", + "1px 1px 1px 1px 1px", + "2px 2px, none", + "red 2px 2px blue", + "inherit, 2px 2px", + "2px 2px, inherit", + "2px 2px -5px", + "inset 4px 4px black inset", + "inset inherit", + "inset none", + "3 3", + "3px 3", + "3 3px", + "3px 3px 3", + "3px 3px 3px 3", + "3px calc(3px + rubbish)", + "3px 3px calc(3px + rubbish)", + "3px 3px 3px calc(3px + rubbish)", + "3px 3px 3px 3px rgb(0, rubbish, 0)", + "unset, 2px 2px", + "2px 2px, unset", + "inset unset", ], - invalid_values: [ "3% 3%", "1px 1px 1px 1px 1px", "2px 2px, none", "red 2px 2px blue", "inherit, 2px 2px", "2px 2px, inherit", "2px 2px -5px", "inset 4px 4px black inset", "inset inherit", "inset none", "3 3", "3px 3", "3 3px", "3px 3px 3", "3px 3px 3px 3", "3px calc(3px + rubbish)", "3px 3px calc(3px + rubbish)", "3px 3px 3px calc(3px + rubbish)", "3px 3px 3px 3px rgb(0, rubbish, 0)", "unset, 2px 2px", "2px 2px, unset", "inset unset" ] }, "caption-side": { domProp: "captionSide", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "top" ], - other_values: [ "bottom", "left", "right", "top-outside", "bottom-outside" ], - invalid_values: [] + initial_values: ["top"], + other_values: ["bottom", "left", "right", "top-outside", "bottom-outside"], + invalid_values: [], }, "caret-color": { domProp: "caretColor", inherited: true, type: CSS_TYPE_LONGHAND, - prerequisites: { "color": "black" }, + prerequisites: { color: "black" }, // Though "auto" is an independent computed-value time keyword value, // it is not distinguishable from currentcolor because getComputedStyle // always returns used value for . - initial_values: [ "auto", "currentcolor", "black", "rgb(0,0,0)" ], - other_values: [ "green", "transparent", "rgba(128,128,128,.5)", "#123" ], - invalid_values: [ "#0", "#00", "#00000", "cc00ff" ] + initial_values: ["auto", "currentcolor", "black", "rgb(0,0,0)"], + other_values: ["green", "transparent", "rgba(128,128,128,.5)", "#123"], + invalid_values: ["#0", "#00", "#00000", "cc00ff"], }, - "clear": { + clear: { domProp: "clear", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "left", "right", "both", "inline-start", "inline-end" ], - invalid_values: [] + initial_values: ["none"], + other_values: ["left", "right", "both", "inline-start", "inline-end"], + invalid_values: [], }, - "clip": { + clip: { domProp: "clip", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "rect(0 0 0 0)", "rect(auto,auto,auto,auto)", "rect(3px, 4px, 4em, 0)", "rect(auto, 3em, 4pt, 2px)", "rect(2px 3px 4px 5px)" ], - invalid_values: [ "rect(auto, 3em, 2%, 5px)" ], + initial_values: ["auto"], + other_values: [ + "rect(0 0 0 0)", + "rect(auto,auto,auto,auto)", + "rect(3px, 4px, 4em, 0)", + "rect(auto, 3em, 4pt, 2px)", + "rect(2px 3px 4px 5px)", + ], + invalid_values: ["rect(auto, 3em, 2%, 5px)"], quirks_values: { "rect(1, 2, 3, 4)": "rect(1px, 2px, 3px, 4px)" }, }, - "color": { + color: { domProp: "color", inherited: true, type: CSS_TYPE_LONGHAND, @@ -3520,116 +5158,311 @@ var gCSSProperties = { applies_to_placeholder: true, applies_to_cue: true, /* XXX should test currentColor, but may or may not be initial */ - initial_values: [ "black", "#000", "#000f", "#000000ff", "-moz-default-color", "rgb(0, 0, 0)", "rgb(0%, 0%, 0%)", + initial_values: [ + "black", + "#000", + "#000f", + "#000000ff", + "-moz-default-color", + "rgb(0, 0, 0)", + "rgb(0%, 0%, 0%)", /* css-color-4: */ /* rgb() and rgba() are aliases of each other. */ - "rgb(0, 0, 0)", "rgba(0, 0, 0)", "rgb(0, 0, 0, 1)", "rgba(0, 0, 0, 1)", + "rgb(0, 0, 0)", + "rgba(0, 0, 0)", + "rgb(0, 0, 0, 1)", + "rgba(0, 0, 0, 1)", /* hsl() and hsla() are aliases of each other. */ - "hsl(0, 0%, 0%)", "hsla(0, 0%, 0%)", "hsl(0, 0%, 0%, 1)", "hsla(0, 0%, 0%, 1)", + "hsl(0, 0%, 0%)", + "hsla(0, 0%, 0%)", + "hsl(0, 0%, 0%, 1)", + "hsla(0, 0%, 0%, 1)", /* rgb() and rgba() functions now accept rather than . */ - "rgb(0.0, 0.0, 0.0)", "rgba(0.0, 0.0, 0.0)", "rgb(0.0, 0.0, 0.0, 1)", "rgba(0.0, 0.0, 0.0, 1)", + "rgb(0.0, 0.0, 0.0)", + "rgba(0.0, 0.0, 0.0)", + "rgb(0.0, 0.0, 0.0, 1)", + "rgba(0.0, 0.0, 0.0, 1)", /* now accepts as well as in rgba() and hsla(). */ - "rgb(0.0, 0.0, 0.0, 100%)", "hsl(0, 0%, 0%, 100%)", + "rgb(0.0, 0.0, 0.0, 100%)", + "hsl(0, 0%, 0%, 100%)", /* rgb() and hsl() now support comma-less expression. */ - "rgb(0 0 0)", "rgb(0 0 0 / 1)", "rgb(0/* comment */0/* comment */0)", "rgb(0/* comment */0/* comment*/0/1.0)", - "hsl(0 0% 0%)", "hsl(0 0% 0% / 1)", "hsl(0/* comment */0%/* comment */0%)", "hsl(0/* comment */0%/* comment */0%/1)", + "rgb(0 0 0)", + "rgb(0 0 0 / 1)", + "rgb(0/* comment */0/* comment */0)", + "rgb(0/* comment */0/* comment*/0/1.0)", + "hsl(0 0% 0%)", + "hsl(0 0% 0% / 1)", + "hsl(0/* comment */0%/* comment */0%)", + "hsl(0/* comment */0%/* comment */0%/1)", /* Support for hsl() hue component. */ - "hsl(0deg, 0%, 0%)", "hsl(360deg, 0%, 0%)", "hsl(0grad, 0%, 0%)", "hsl(400grad, 0%, 0%)", "hsl(0rad, 0%, 0%)", "hsl(0turn, 0%, 0%)", "hsl(1turn, 0%, 0%)", + "hsl(0deg, 0%, 0%)", + "hsl(360deg, 0%, 0%)", + "hsl(0grad, 0%, 0%)", + "hsl(400grad, 0%, 0%)", + "hsl(0rad, 0%, 0%)", + "hsl(0turn, 0%, 0%)", + "hsl(1turn, 0%, 0%)", ], - other_values: [ "green", "#f3c", "#fed292", "rgba(45,300,12,2)", "transparent", "-moz-nativehyperlinktext", "rgba(255,128,0,0.5)", "#e0fc", "#10fcee72", + other_values: [ + "green", + "#f3c", + "#fed292", + "rgba(45,300,12,2)", + "transparent", + "-moz-nativehyperlinktext", + "rgba(255,128,0,0.5)", + "#e0fc", + "#10fcee72", /* css-color-4: */ - "rgb(100, 100.0, 100)", "rgb(300 300 300 / 200%)", "rgb(300.0 300.0 300.0 / 2.0)", "hsl(720, 200%, 200%, 2.0)", "hsla(720 200% 200% / 200%)", - "hsl(480deg, 20%, 30%, 0.3)", "hsl(55grad, 400%, 30%)", "hsl(0.5grad 400% 500% / 9.0)", "hsl(33rad 100% 90% / 4)", "hsl(0.33turn, 40%, 40%, 10%)", "hsl(63e292, 41%, 34%)", + "rgb(100, 100.0, 100)", + "rgb(300 300 300 / 200%)", + "rgb(300.0 300.0 300.0 / 2.0)", + "hsl(720, 200%, 200%, 2.0)", + "hsla(720 200% 200% / 200%)", + "hsl(480deg, 20%, 30%, 0.3)", + "hsl(55grad, 400%, 30%)", + "hsl(0.5grad 400% 500% / 9.0)", + "hsl(33rad 100% 90% / 4)", + "hsl(0.33turn, 40%, 40%, 10%)", + "hsl(63e292, 41%, 34%)", ], - invalid_values: [ "#f", "#ff", "#fffff", "#fffffff", "#fffffffff", - "rgb(100%, 0, 100%)", "rgba(100, 0, 100%, 30%)", - "hsl(0, 0, 0%)", "hsla(0%, 0%, 0%, 0.1)", + invalid_values: [ + "#f", + "#ff", + "#fffff", + "#fffffff", + "#fffffffff", + "rgb(100%, 0, 100%)", + "rgba(100, 0, 100%, 30%)", + "hsl(0, 0, 0%)", + "hsla(0%, 0%, 0%, 0.1)", /* trailing commas */ - "rgb(0, 0, 0,)", "rgba(0, 0, 0, 0,)", - "hsl(0, 0%, 0%,)", "hsla(0, 0%, 0%, 1,)", + "rgb(0, 0, 0,)", + "rgba(0, 0, 0, 0,)", + "hsl(0, 0%, 0%,)", + "hsla(0, 0%, 0%, 1,)", /* css-color-4: */ /* comma and comma-less expressions should not mix together. */ - "rgb(0, 0, 0 / 1)", "rgb(0 0 0, 1)", "rgb(0, 0 0, 1)", "rgb(0 0, 0 / 1)", - "hsl(0, 0%, 0% / 1)", "hsl(0 0% 0%, 1)", "hsl(0 0% 0%, 1)", "hsl(0 0%, 0% / 1)", + "rgb(0, 0, 0 / 1)", + "rgb(0 0 0, 1)", + "rgb(0, 0 0, 1)", + "rgb(0 0, 0 / 1)", + "hsl(0, 0%, 0% / 1)", + "hsl(0 0% 0%, 1)", + "hsl(0 0% 0%, 1)", + "hsl(0 0%, 0% / 1)", /* trailing slash */ - "rgb(0 0 0 /)", "rgb(0, 0, 0 /)", - "hsl(0 0% 0% /)", "hsl(0, 0%, 0% /)", + "rgb(0 0 0 /)", + "rgb(0, 0, 0 /)", + "hsl(0 0% 0% /)", + "hsl(0, 0%, 0% /)", ], - quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a", "fff": "#ffffff", "ffffff": "#ffffff", }, + quirks_values: { + "000000": "#000000", + "96ed2a": "#96ed2a", + fff: "#ffffff", + ffffff: "#ffffff", + }, }, - "content": { + content: { domProp: "content", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_marker: true, /* XXX needs to be on pseudo-elements */ - initial_values: [ "normal", "none" ], - other_values: [ '""', "''", '"hello"', "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', 'counter(foo)', 'counter(bar, upper-roman)', 'counters(foo, ".")', "counters(bar, '-', lower-greek)", "'-' counter(foo) '.'", "attr(title)", "open-quote", "close-quote", "no-open-quote", "no-close-quote", "close-quote attr(title) counters(foo, '.', upper-alpha)", "counter(foo, none)", "counters(bar, '.', none)", "attr(\\32)", "attr(\\2)", "attr(-\\2)", "attr(-\\32)", "counter(\\2)", "counters(\\32, '.')", "counter(-\\32, upper-roman)", "counters(-\\2, '-', lower-greek)", "counter(\\()", "counters(a\\+b, '.')", "counter(\\}, upper-alpha)", "-moz-alt-content", "counter(foo, symbols('*'))", "counter(foo, symbols(numeric '0' '1'))", "counters(foo, '.', symbols('*'))", "counters(foo, '.', symbols(numeric '0' '1'))" ], - invalid_values: [ 'counters(foo)', 'counter(foo, ".")', 'attr("title")', "attr('title')", "attr(2)", "attr(-2)", "counter(2)", "counters(-2, '.')", "-moz-alt-content 'foo'", "'foo' -moz-alt-content", "counter(one, two, three) 'foo'" ] + initial_values: ["normal", "none"], + other_values: [ + '""', + "''", + '"hello"', + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", + "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", + 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', + "counter(foo)", + "counter(bar, upper-roman)", + 'counters(foo, ".")', + "counters(bar, '-', lower-greek)", + "'-' counter(foo) '.'", + "attr(title)", + "open-quote", + "close-quote", + "no-open-quote", + "no-close-quote", + "close-quote attr(title) counters(foo, '.', upper-alpha)", + "counter(foo, none)", + "counters(bar, '.', none)", + "attr(\\32)", + "attr(\\2)", + "attr(-\\2)", + "attr(-\\32)", + "counter(\\2)", + "counters(\\32, '.')", + "counter(-\\32, upper-roman)", + "counters(-\\2, '-', lower-greek)", + "counter(\\()", + "counters(a\\+b, '.')", + "counter(\\}, upper-alpha)", + "-moz-alt-content", + "counter(foo, symbols('*'))", + "counter(foo, symbols(numeric '0' '1'))", + "counters(foo, '.', symbols('*'))", + "counters(foo, '.', symbols(numeric '0' '1'))", + ], + invalid_values: [ + "counters(foo)", + 'counter(foo, ".")', + 'attr("title")', + "attr('title')", + "attr(2)", + "attr(-2)", + "counter(2)", + "counters(-2, '.')", + "-moz-alt-content 'foo'", + "'foo' -moz-alt-content", + "counter(one, two, three) 'foo'", + ], }, "counter-increment": { domProp: "counterIncrement", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "foo 1", "bar", "foo 3 bar baz 2", "\\32 1", "-\\32 1", "-c 1", "\\32 1", "-\\32 1", "\\2 1", "-\\2 1", "-c 1", "\\2 1", "-\\2 1", "-\\7f \\9e 1" ], - invalid_values: [ "none foo", "none foo 3", "foo none", "foo 3 none" ], - unbalanced_values: [ "foo 1 (" ] + initial_values: ["none"], + other_values: [ + "foo 1", + "bar", + "foo 3 bar baz 2", + "\\32 1", + "-\\32 1", + "-c 1", + "\\32 1", + "-\\32 1", + "\\2 1", + "-\\2 1", + "-c 1", + "\\2 1", + "-\\2 1", + "-\\7f \\9e 1", + ], + invalid_values: ["none foo", "none foo 3", "foo none", "foo 3 none"], + unbalanced_values: ["foo 1 ("], }, "counter-reset": { domProp: "counterReset", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "foo 1", "bar", "foo 3 bar baz 2", "\\32 1", "-\\32 1", "-c 1", "\\32 1", "-\\32 1", "\\2 1", "-\\2 1", "-c 1", "\\2 1", "-\\2 1", "-\\7f \\9e 1" ], - invalid_values: [ "none foo", "none foo 3", "foo none", "foo 3 none" ] + initial_values: ["none"], + other_values: [ + "foo 1", + "bar", + "foo 3 bar baz 2", + "\\32 1", + "-\\32 1", + "-c 1", + "\\32 1", + "-\\32 1", + "\\2 1", + "-\\2 1", + "-c 1", + "\\2 1", + "-\\2 1", + "-\\7f \\9e 1", + ], + invalid_values: ["none foo", "none foo 3", "foo none", "foo 3 none"], }, "counter-set": { domProp: "counterSet", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "foo 1", "bar", "foo 3 bar baz 2", "\\32 1", "-\\32 1", "-c 1", "\\32 1", "-\\32 1", "\\2 1", "-\\2 1", "-c 1", "\\2 1", "-\\2 1", "-\\7f \\9e 1" ], - invalid_values: [ "none foo", "none foo 3", "foo none", "foo 3 none" ] + initial_values: ["none"], + other_values: [ + "foo 1", + "bar", + "foo 3 bar baz 2", + "\\32 1", + "-\\32 1", + "-c 1", + "\\32 1", + "-\\32 1", + "\\2 1", + "-\\2 1", + "-c 1", + "\\2 1", + "-\\2 1", + "-\\7f \\9e 1", + ], + invalid_values: ["none foo", "none foo 3", "foo none", "foo 3 none"], }, - "cursor": { + cursor: { domProp: "cursor", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: [ - "crosshair", "default", "pointer", "move", "e-resize", "ne-resize", - "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", - "text", "wait", "help", "progress", "copy", "alias", "context-menu", - "cell", "not-allowed", "col-resize", "row-resize", "no-drop", - "vertical-text", "all-scroll", "nesw-resize", "nwse-resize", "ns-resize", - "ew-resize", "none", "grab", "grabbing", "zoom-in", "zoom-out", - "-moz-grab", "-moz-grabbing", "-moz-zoom-in", "-moz-zoom-out", + "crosshair", + "default", + "pointer", + "move", + "e-resize", + "ne-resize", + "nw-resize", + "n-resize", + "se-resize", + "sw-resize", + "s-resize", + "w-resize", + "text", + "wait", + "help", + "progress", + "copy", + "alias", + "context-menu", + "cell", + "not-allowed", + "col-resize", + "row-resize", + "no-drop", + "vertical-text", + "all-scroll", + "nesw-resize", + "nwse-resize", + "ns-resize", + "ew-resize", + "none", + "grab", + "grabbing", + "zoom-in", + "zoom-out", + "-moz-grab", + "-moz-grabbing", + "-moz-zoom-in", + "-moz-zoom-out", "url(foo.png), move", "url(foo.png) 5 7, move", "url(foo.png) 12 3, url(bar.png), no-drop", "url(foo.png), url(bar.png) 7 2, wait", "url(foo.png) 3 2, url(bar.png) 7 9, pointer", - "url(foo.png) calc(1 + 2) calc(3), pointer" ], - invalid_values: [ "url(foo.png)", "url(foo.png) 5 5" ] + "url(foo.png) calc(1 + 2) calc(3), pointer", + ], + invalid_values: ["url(foo.png)", "url(foo.png) 5 5"], }, - "direction": { + direction: { domProp: "direction", inherited: true, type: CSS_TYPE_LONGHAND, applies_to_marker: true, - initial_values: [ "ltr" ], - other_values: [ "rtl" ], - invalid_values: [] + initial_values: ["ltr"], + other_values: ["rtl"], + invalid_values: [], }, - "display": { + display: { domProp: "display", inherited: false, type: CSS_TYPE_LONGHAND, // No applies_to_placeholder because we have a !important rule in forms.css. - initial_values: [ "inline" ], + initial_values: ["inline"], /* XXX none will really mess with other properties */ - prerequisites: { "float": "none", "position": "static", "contain": "none" }, + prerequisites: { float: "none", position: "static", contain: "none" }, other_values: [ "block", "flex", @@ -3652,42 +5485,78 @@ var gCSSProperties = { "ruby-text", "ruby-text-container", "contents", - "none" + "none", ], - invalid_values: [] + invalid_values: [], }, "empty-cells": { domProp: "emptyCells", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "show" ], - other_values: [ "hide" ], - invalid_values: [] + initial_values: ["show"], + other_values: ["hide"], + invalid_values: [], }, - "float": { + float: { domProp: "cssFloat", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "none" ], - other_values: [ "left", "right", "inline-start", "inline-end" ], - invalid_values: [] + initial_values: ["none"], + other_values: ["left", "right", "inline-start", "inline-end"], + invalid_values: [], }, - "font": { + font: { domProp: "font", inherited: true, type: CSS_TYPE_TRUE_SHORTHAND, prerequisites: { "writing-mode": "initial" }, - subproperties: [ "font-style", "font-variant", "font-weight", "font-size", "line-height", "font-family", "font-stretch", - "font-size-adjust", "font-feature-settings", "font-language-override", - "font-kerning", "font-variant-alternates", "font-variant-caps", "font-variant-east-asian", - "font-variant-ligatures", "font-variant-numeric", "font-variant-position" ], - initial_values: [ (gInitialFontFamilyIsSansSerif ? "medium sans-serif" : "medium serif") ], - other_values: [ "large serif", "9px fantasy", "condensed bold italic small-caps 24px/1.4 Times New Roman, serif", "small inherit roman", "small roman inherit", + subproperties: [ + "font-style", + "font-variant", + "font-weight", + "font-size", + "line-height", + "font-family", + "font-stretch", + "font-size-adjust", + "font-feature-settings", + "font-language-override", + "font-kerning", + "font-variant-alternates", + "font-variant-caps", + "font-variant-east-asian", + "font-variant-ligatures", + "font-variant-numeric", + "font-variant-position", + ], + initial_values: [ + gInitialFontFamilyIsSansSerif ? "medium sans-serif" : "medium serif", + ], + other_values: [ + "large serif", + "9px fantasy", + "condensed bold italic small-caps 24px/1.4 Times New Roman, serif", + "small inherit roman", + "small roman inherit", // system fonts - "caption", "icon", "menu", "message-box", "small-caption", "status-bar", + "caption", + "icon", + "menu", + "message-box", + "small-caption", + "status-bar", // Gecko-specific system fonts - "-moz-window", "-moz-document", "-moz-desktop", "-moz-info", "-moz-dialog", "-moz-button", "-moz-pull-down-menu", "-moz-list", "-moz-field", "-moz-workspace", + "-moz-window", + "-moz-document", + "-moz-desktop", + "-moz-info", + "-moz-dialog", + "-moz-button", + "-moz-pull-down-menu", + "-moz-list", + "-moz-field", + "-moz-workspace", // line-height with calc() "condensed bold italic small-caps 24px/calc(2px) Times New Roman, serif", "condensed bold italic small-caps 24px/calc(50%) Times New Roman, serif", @@ -3696,11 +5565,13 @@ var gCSSProperties = { "condensed bold italic small-caps 24px/calc(3*25px + 50%) Times New Roman, serif", "condensed bold italic small-caps 24px/calc(1 + 2*3/4) Times New Roman, serif", ], - invalid_values: [ "9 fantasy", "-2px fantasy", + invalid_values: [ + "9 fantasy", + "-2px fantasy", // line-height with calc() "condensed bold italic small-caps 24px/calc(1 + 2px) Times New Roman, serif", "condensed bold italic small-caps 24px/calc(100% + 0.1) Times New Roman, serif", - ] + ], }, "font-family": { domProp: "fontFamily", @@ -3711,9 +5582,30 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ (gInitialFontFamilyIsSansSerif ? "sans-serif" : "serif") ], - other_values: [ (gInitialFontFamilyIsSansSerif ? "serif" : "sans-serif"), "Times New Roman, serif", "'Times New Roman', serif", "cursive", "fantasy", "\\\"Times New Roman", "\"Times New Roman\"", "Times, \\\"Times New Roman", "Times, \"Times New Roman\"", "-no-such-font-installed", "inherit roman", "roman inherit", "Times, inherit roman", "inherit roman, Times", "roman inherit, Times", "Times, roman inherit" ], - invalid_values: [ "\"Times New\" Roman", "\"Times New Roman\n", "Times, \"Times New Roman\n" ] + initial_values: [gInitialFontFamilyIsSansSerif ? "sans-serif" : "serif"], + other_values: [ + gInitialFontFamilyIsSansSerif ? "serif" : "sans-serif", + "Times New Roman, serif", + "'Times New Roman', serif", + "cursive", + "fantasy", + '\\"Times New Roman', + '"Times New Roman"', + 'Times, \\"Times New Roman', + 'Times, "Times New Roman"', + "-no-such-font-installed", + "inherit roman", + "roman inherit", + "Times, inherit roman", + "inherit roman, Times", + "roman inherit, Times", + "Times, roman inherit", + ], + invalid_values: [ + '"Times New" Roman', + '"Times New Roman\n', + 'Times, "Times New Roman\n', + ], }, "font-feature-settings": { domProp: "fontFeatureSettings", @@ -3724,21 +5616,42 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], + initial_values: ["normal"], other_values: [ - "'liga' on", "'liga'", "\"liga\" 1", "'liga', 'clig' 1", - "\"liga\" off", "\"liga\" 0", '"cv01" 3, "cv02" 4', - '"cswh", "smcp" off, "salt" 4', '"cswh" 1, "smcp" off, "salt" 4', + "'liga' on", + "'liga'", + '"liga" 1', + "'liga', 'clig' 1", + '"liga" off', + '"liga" 0', + '"cv01" 3, "cv02" 4', + '"cswh", "smcp" off, "salt" 4', + '"cswh" 1, "smcp" off, "salt" 4', '"cswh" 0, \'blah\', "liga", "smcp" off, "salt" 4', '"liga" ,"smcp" 0 , "blah"', - '"ab\\"c"', '"ab\\\\c"', "'vert' calc(2)" + '"ab\\"c"', + '"ab\\\\c"', + "'vert' calc(2)", ], invalid_values: [ - 'liga', 'liga 1', 'liga normal', '"liga" normal', 'normal liga', - 'normal "liga"', 'normal, "liga"', '"liga=1"', "'foobar' on", - '"blahblah" 0', '"liga" 3.14', '"liga" 1 3.14', '"liga" 1 normal', - '"liga" 1 off', '"liga" on off', '"liga" , 0 "smcp"', '"liga" "smcp"' - ] + "liga", + "liga 1", + "liga normal", + '"liga" normal', + "normal liga", + 'normal "liga"', + 'normal, "liga"', + '"liga=1"', + "'foobar' on", + '"blahblah" 0', + '"liga" 3.14', + '"liga" 1 3.14', + '"liga" 1 normal', + '"liga" 1 off', + '"liga" on off', + '"liga" , 0 "smcp"', + '"liga" "smcp"', + ], }, "font-kerning": { domProp: "fontKerning", @@ -3749,9 +5662,9 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "auto" ], - other_values: [ "normal", "none" ], - invalid_values: [ "on" ] + initial_values: ["auto"], + other_values: ["normal", "none"], + invalid_values: ["on"], }, "font-language-override": { domProp: "fontLanguageOverride", @@ -3762,9 +5675,9 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "'ENG'", "'TRK'", "\"TRK\"", "'N\\'Ko'" ], - invalid_values: [ "TRK", "ja" ] + initial_values: ["normal"], + other_values: ["'ENG'", "'TRK'", '"TRK"', "'N\\'Ko'"], + invalid_values: ["TRK", "ja"], }, "font-size": { domProp: "fontSize", @@ -3775,21 +5688,30 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "medium", + initial_values: [ + "medium", "1rem", "calc(1rem)", - "calc(0.75rem + 200% - 125% + 0.25rem - 75%)" + "calc(0.75rem + 200% - 125% + 0.25rem - 75%)", ], - other_values: [ "large", "2em", "50%", "xx-small", "36pt", "8px", "larger", "smaller", + other_values: [ + "large", + "2em", + "50%", + "xx-small", + "36pt", + "8px", + "larger", + "smaller", "0px", "0%", "calc(2em)", "calc(36pt + 75% + (30% + 2em + 2px))", "calc(-2em)", "calc(-50%)", - "calc(-1px)" + "calc(-1px)", ], - invalid_values: [ "-2em", "-50%", "-1px" ], + invalid_values: ["-2em", "-50%", "-1px"], quirks_values: { "5": "5px" }, }, "font-size-adjust": { @@ -3801,9 +5723,9 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "none" ], - other_values: [ "0.3", "0.5", "0.7", "0.0", "0", "3" ], - invalid_values: [ "-0.3", "-1" ] + initial_values: ["none"], + other_values: ["0.3", "0.5", "0.7", "0.0", "0", "3"], + invalid_values: ["-0.3", "-1"], }, "font-stretch": { domProp: "fontStretch", @@ -3814,9 +5736,18 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded" ], - invalid_values: [ "narrower", "wider" ] + initial_values: ["normal"], + other_values: [ + "ultra-condensed", + "extra-condensed", + "condensed", + "semi-condensed", + "semi-expanded", + "expanded", + "extra-expanded", + "ultra-expanded", + ], + invalid_values: ["narrower", "wider"], }, "font-style": { domProp: "fontStyle", @@ -3827,9 +5758,9 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "italic", "oblique" ], - invalid_values: [] + initial_values: ["normal"], + other_values: ["italic", "oblique"], + invalid_values: [], }, "font-synthesis": { domProp: "fontSynthesis", @@ -3840,24 +5771,56 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "weight style" ], - other_values: [ "none", "weight", "style" ], - invalid_values: [ "weight none", "style none", "none style", "weight 10px", "weight weight", "style style" ] + initial_values: ["weight style"], + other_values: ["none", "weight", "style"], + invalid_values: [ + "weight none", + "style none", + "none style", + "weight 10px", + "weight weight", + "style style", + ], }, "font-variant": { domProp: "fontVariant", inherited: true, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "font-variant-alternates", "font-variant-caps", "font-variant-east-asian", "font-variant-ligatures", "font-variant-numeric", "font-variant-position" ], - initial_values: [ "normal" ], - other_values: [ "small-caps", "none", "traditional oldstyle-nums", "all-small-caps", "common-ligatures no-discretionary-ligatures", - "proportional-nums oldstyle-nums", "proportional-nums slashed-zero diagonal-fractions oldstyle-nums ordinal", - "traditional historical-forms styleset(ok-alt-a, ok-alt-b)", "styleset(potato)" ], - invalid_values: [ "small-caps normal", "small-caps small-caps", "none common-ligatures", "common-ligatures none", "small-caps potato", - "small-caps jis83 all-small-caps", "super historical-ligatures sub", "stacked-fractions diagonal-fractions historical-ligatures", - "common-ligatures traditional common-ligatures", "lining-nums traditional slashed-zero ordinal normal", - "traditional historical-forms styleset(ok-alt-a, ok-alt-b) historical-forms", - "historical-forms styleset(ok-alt-a, ok-alt-b) traditional styleset(potato)", "annotation(a,b,c)" ] + subproperties: [ + "font-variant-alternates", + "font-variant-caps", + "font-variant-east-asian", + "font-variant-ligatures", + "font-variant-numeric", + "font-variant-position", + ], + initial_values: ["normal"], + other_values: [ + "small-caps", + "none", + "traditional oldstyle-nums", + "all-small-caps", + "common-ligatures no-discretionary-ligatures", + "proportional-nums oldstyle-nums", + "proportional-nums slashed-zero diagonal-fractions oldstyle-nums ordinal", + "traditional historical-forms styleset(ok-alt-a, ok-alt-b)", + "styleset(potato)", + ], + invalid_values: [ + "small-caps normal", + "small-caps small-caps", + "none common-ligatures", + "common-ligatures none", + "small-caps potato", + "small-caps jis83 all-small-caps", + "super historical-ligatures sub", + "stacked-fractions diagonal-fractions historical-ligatures", + "common-ligatures traditional common-ligatures", + "lining-nums traditional slashed-zero ordinal normal", + "traditional historical-forms styleset(ok-alt-a, ok-alt-b) historical-forms", + "historical-forms styleset(ok-alt-a, ok-alt-b) traditional styleset(potato)", + "annotation(a,b,c)", + ], }, "font-variant-alternates": { domProp: "fontVariantAlternates", @@ -3868,15 +5831,29 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "historical-forms", - "styleset(alt-a, alt-b)", "character-variant(a, b, c)", "annotation(circled)", - "swash(squishy)", "styleset(complex\\ blob, a)", "annotation(\\62 lah)" ], - invalid_values: [ "historical-forms normal", "historical-forms historical-forms", - "swash", "swash(3)", "annotation(a, b)", "ornaments(a,b)", - "styleset(1234blah)", "annotation(a), annotation(b)", "annotation(a) normal" ] + initial_values: ["normal"], + other_values: [ + "historical-forms", + "styleset(alt-a, alt-b)", + "character-variant(a, b, c)", + "annotation(circled)", + "swash(squishy)", + "styleset(complex\\ blob, a)", + "annotation(\\62 lah)", + ], + invalid_values: [ + "historical-forms normal", + "historical-forms historical-forms", + "swash", + "swash(3)", + "annotation(a, b)", + "ornaments(a,b)", + "styleset(1234blah)", + "annotation(a), annotation(b)", + "annotation(a) normal", + ], }, - "font-variant-caps": { + "font-variant-caps": { domProp: "fontVariantCaps", inherited: true, type: CSS_TYPE_LONGHAND, @@ -3885,9 +5862,20 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", "unicase" ], - invalid_values: [ "normal small-caps", "petite-caps normal", "unicase unicase" ] + initial_values: ["normal"], + other_values: [ + "small-caps", + "all-small-caps", + "petite-caps", + "all-petite-caps", + "titling-caps", + "unicase", + ], + invalid_values: [ + "normal small-caps", + "petite-caps normal", + "unicase unicase", + ], }, "font-variant-east-asian": { domProp: "fontVariantEastAsian", @@ -3898,11 +5886,30 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "jis78", "jis83", "jis90", "jis04", "simplified", "traditional", "full-width", "proportional-width", "ruby", - "jis78 full-width", "jis78 full-width ruby", "simplified proportional-width", "ruby simplified" ], - invalid_values: [ "jis78 normal", "jis90 jis04", "simplified traditional", "full-width proportional-width", - "ruby simplified ruby", "jis78 ruby simplified" ] + initial_values: ["normal"], + other_values: [ + "jis78", + "jis83", + "jis90", + "jis04", + "simplified", + "traditional", + "full-width", + "proportional-width", + "ruby", + "jis78 full-width", + "jis78 full-width ruby", + "simplified proportional-width", + "ruby simplified", + ], + invalid_values: [ + "jis78 normal", + "jis90 jis04", + "simplified traditional", + "full-width proportional-width", + "ruby simplified ruby", + "jis78 ruby simplified", + ], }, "font-variant-ligatures": { domProp: "fontVariantLigatures", @@ -3913,16 +5920,35 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "none", "common-ligatures", "no-common-ligatures", "discretionary-ligatures", "no-discretionary-ligatures", - "historical-ligatures", "no-historical-ligatures", "contextual", "no-contextual", - "common-ligatures no-discretionary-ligatures", "contextual no-discretionary-ligatures", - "historical-ligatures no-common-ligatures", "no-historical-ligatures discretionary-ligatures", - "common-ligatures no-discretionary-ligatures historical-ligatures no-contextual" ], - invalid_values: [ "common-ligatures normal", "common-ligatures no-common-ligatures", "common-ligatures common-ligatures", - "no-historical-ligatures historical-ligatures", "no-discretionary-ligatures discretionary-ligatures", - "no-contextual contextual", "common-ligatures no-discretionary-ligatures no-common-ligatures", - "common-ligatures none", "no-discretionary-ligatures none", "none common-ligatures" ] + initial_values: ["normal"], + other_values: [ + "none", + "common-ligatures", + "no-common-ligatures", + "discretionary-ligatures", + "no-discretionary-ligatures", + "historical-ligatures", + "no-historical-ligatures", + "contextual", + "no-contextual", + "common-ligatures no-discretionary-ligatures", + "contextual no-discretionary-ligatures", + "historical-ligatures no-common-ligatures", + "no-historical-ligatures discretionary-ligatures", + "common-ligatures no-discretionary-ligatures historical-ligatures no-contextual", + ], + invalid_values: [ + "common-ligatures normal", + "common-ligatures no-common-ligatures", + "common-ligatures common-ligatures", + "no-historical-ligatures historical-ligatures", + "no-discretionary-ligatures discretionary-ligatures", + "no-contextual contextual", + "common-ligatures no-discretionary-ligatures no-common-ligatures", + "common-ligatures none", + "no-discretionary-ligatures none", + "none common-ligatures", + ], }, "font-variant-numeric": { domProp: "fontVariantNumeric", @@ -3933,14 +5959,31 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums", "diagonal-fractions", - "stacked-fractions", "slashed-zero", "ordinal", "lining-nums diagonal-fractions", - "tabular-nums stacked-fractions", "tabular-nums slashed-zero stacked-fractions", - "proportional-nums slashed-zero diagonal-fractions oldstyle-nums ordinal" ], - invalid_values: [ "lining-nums normal", "lining-nums oldstyle-nums", "lining-nums normal slashed-zero ordinal", - "proportional-nums tabular-nums", "diagonal-fractions stacked-fractions", "slashed-zero diagonal-fractions slashed-zero", - "lining-nums slashed-zero diagonal-fractions oldstyle-nums", "diagonal-fractions diagonal-fractions" ] + initial_values: ["normal"], + other_values: [ + "lining-nums", + "oldstyle-nums", + "proportional-nums", + "tabular-nums", + "diagonal-fractions", + "stacked-fractions", + "slashed-zero", + "ordinal", + "lining-nums diagonal-fractions", + "tabular-nums stacked-fractions", + "tabular-nums slashed-zero stacked-fractions", + "proportional-nums slashed-zero diagonal-fractions oldstyle-nums ordinal", + ], + invalid_values: [ + "lining-nums normal", + "lining-nums oldstyle-nums", + "lining-nums normal slashed-zero ordinal", + "proportional-nums tabular-nums", + "diagonal-fractions stacked-fractions", + "slashed-zero diagonal-fractions slashed-zero", + "lining-nums slashed-zero diagonal-fractions oldstyle-nums", + "diagonal-fractions diagonal-fractions", + ], }, "font-variant-position": { domProp: "fontVariantPosition", @@ -3951,9 +5994,9 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "super", "sub" ], - invalid_values: [ "normal sub", "super sub" ] + initial_values: ["normal"], + other_values: ["super", "sub"], + invalid_values: ["normal sub", "super sub"], }, "font-weight": { domProp: "fontWeight", @@ -3964,51 +6007,80 @@ var gCSSProperties = { applies_to_marker: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal", "400" ], - other_values: [ "bold", "100", "200", "300", "500", "600", "700", "800", - "900", "bolder", "lighter", "10.5", "calc(10 + 10)", - "calc(10 - 99)", "100.0", "107", "399", "401", "699", - "710", "1000" ], - invalid_values: [ "0", "1001", "calc(10%)" ] + initial_values: ["normal", "400"], + other_values: [ + "bold", + "100", + "200", + "300", + "500", + "600", + "700", + "800", + "900", + "bolder", + "lighter", + "10.5", + "calc(10 + 10)", + "calc(10 - 99)", + "100.0", + "107", + "399", + "401", + "699", + "710", + "1000", + ], + invalid_values: ["0", "1001", "calc(10%)"], }, - "height": { + height: { domProp: "height", inherited: false, type: CSS_TYPE_LONGHAND, /* FIXME: test zero, and test calc clamping */ - initial_values: [ " auto" ], + initial_values: [" auto"], /* computed value tests for height test more with display:block */ - prerequisites: { "display": "block" }, - other_values: [ "15px", "3em", "15%", - "max-content", "min-content", "-moz-fit-content", "-moz-available", + prerequisites: { display: "block" }, + other_values: [ + "15px", + "3em", + "15%", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", // these two keywords are the aliases of above first two. - "-moz-max-content", "-moz-min-content", + "-moz-max-content", + "-moz-min-content", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "none" ], + invalid_values: ["none"], quirks_values: { "5": "5px" }, }, "ime-mode": { domProp: "imeMode", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "normal", "disabled", "active", "inactive" ], - invalid_values: [ "none", "enabled", "1px" ] + initial_values: ["auto"], + other_values: ["normal", "disabled", "active", "inactive"], + invalid_values: ["none", "enabled", "1px"], }, - "left": { + left: { domProp: "left", inherited: false, type: CSS_TYPE_LONGHAND, /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, + prerequisites: { position: "relative" }, /* XXX 0 may or may not be equal to auto */ - initial_values: [ "auto" ], - other_values: [ "32px", "-3em", "12%", + initial_values: ["auto"], + other_values: [ + "32px", + "-3em", + "12%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -4026,9 +6098,17 @@ var gCSSProperties = { applies_to_first_letter: true, applies_to_first_line: true, applies_to_placeholder: true, - initial_values: [ "normal", "0", "0px", "calc(0px)" ], - other_values: [ "1em", "2px", "-3px", "calc(1em)", "calc(1em + 3px)", - "calc(15px / 2)", "calc(15px/2)", "calc(-3px)" ], + initial_values: ["normal", "0", "0px", "calc(0px)"], + other_values: [ + "1em", + "2px", + "-3px", + "calc(1em)", + "calc(1em + 3px)", + "calc(15px / 2)", + "calc(15px/2)", + "calc(-3px)", + ], invalid_values: [], quirks_values: { "5": "5px" }, }, @@ -4036,9 +6116,9 @@ var gCSSProperties = { domProp: "lineBreak", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "loose", "normal", "strict", "anywhere" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["loose", "normal", "strict", "anywhere"], + invalid_values: [], }, "line-height": { domProp: "lineHeight", @@ -4055,26 +6135,83 @@ var gCSSProperties = { * value is. And they even require consistent font metrics for * computation of 'normal'. */ - prerequisites: { "font-size": "19px", "font-size-adjust": "none", "font-family": "serif", "font-weight": "normal", "font-style": "normal", "height": "18px", "display": "block", "writing-mode": "initial" }, + prerequisites: { + "font-size": "19px", + "font-size-adjust": "none", + "font-family": "serif", + "font-weight": "normal", + "font-style": "normal", + height: "18px", + display: "block", + "writing-mode": "initial", + }, - initial_values: [ "normal" ], - other_values: [ "1.0", "1", "1em", "47px", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", "calc(1 + 2*3/4)" ], - invalid_values: [ "calc(1 + 2px)", "calc(100% + 0.1)" ] + initial_values: ["normal"], + other_values: [ + "1.0", + "1", + "1em", + "47px", + "calc(2px)", + "calc(50%)", + "calc(3*25px)", + "calc(25px*3)", + "calc(3*25px + 50%)", + "calc(1 + 2*3/4)", + ], + invalid_values: ["calc(1 + 2px)", "calc(100% + 0.1)"], }, "list-style": { domProp: "listStyle", inherited: true, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "list-style-type", "list-style-position", "list-style-image" ], - initial_values: [ "outside", "disc", "disc outside", "outside disc", "disc none", "none disc", "none disc outside", "none outside disc", "disc none outside", "disc outside none", "outside none disc", "outside disc none" ], - other_values: [ "inside none", "none inside", "none none inside", "square", "none", "none none", "outside none none", "none outside none", "none none outside", "none outside", "outside none", "outside outside", "outside inside", "\\32 style", "\\32 style inside", - '"-"', "'-'", "inside '-'", "'-' outside", "none '-'", "inside none '-'", - "symbols(\"*\" \"\\2020\" \"\\2021\" \"\\A7\")", - "symbols(cyclic \"*\" \"\\2020\" \"\\2021\" \"\\A7\")", - "inside symbols(\"*\" \"\\2020\" \"\\2021\" \"\\A7\")", - "symbols(\"*\" \"\\2020\" \"\\2021\" \"\\A7\") outside", - "none symbols(\"*\" \"\\2020\" \"\\2021\" \"\\A7\")", - "inside none symbols(\"*\" \"\\2020\" \"\\2021\" \"\\A7\")", + subproperties: [ + "list-style-type", + "list-style-position", + "list-style-image", + ], + initial_values: [ + "outside", + "disc", + "disc outside", + "outside disc", + "disc none", + "none disc", + "none disc outside", + "none outside disc", + "disc none outside", + "disc outside none", + "outside none disc", + "outside disc none", + ], + other_values: [ + "inside none", + "none inside", + "none none inside", + "square", + "none", + "none none", + "outside none none", + "none outside none", + "none none outside", + "none outside", + "outside none", + "outside outside", + "outside inside", + "\\32 style", + "\\32 style inside", + '"-"', + "'-'", + "inside '-'", + "'-' outside", + "none '-'", + "inside none '-'", + 'symbols("*" "\\2020" "\\2021" "\\A7")', + 'symbols(cyclic "*" "\\2020" "\\2021" "\\A7")', + 'inside symbols("*" "\\2020" "\\2021" "\\A7")', + 'symbols("*" "\\2020" "\\2021" "\\A7") outside', + 'none symbols("*" "\\2020" "\\2021" "\\A7")', + 'inside none symbols("*" "\\2020" "\\2021" "\\A7")', 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', 'none url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") none', @@ -4085,82 +6222,147 @@ var gCSSProperties = { 'none url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") outside', 'none outside url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") outside none', - 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") none outside' + 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") none outside', + ], + invalid_values: [ + "disc disc", + "unknown value", + "none none none", + "none disc url(404.png)", + "none url(404.png) disc", + "disc none url(404.png)", + "disc url(404.png) none", + "url(404.png) none disc", + "url(404.png) disc none", + "none disc outside url(404.png)", ], - invalid_values: [ "disc disc", "unknown value", "none none none", "none disc url(404.png)", "none url(404.png) disc", "disc none url(404.png)", "disc url(404.png) none", "url(404.png) none disc", "url(404.png) disc none", "none disc outside url(404.png)" ] }, "list-style-image": { domProp: "listStyleImage", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', + initial_values: ["none"], + other_values: [ + 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', // Add some tests for interesting url() values here to test serialization, etc. - "url(\'data:text/plain,\"\')", - "url(\"data:text/plain,\'\")", - "url(\'data:text/plain,\\\'\')", - "url(\"data:text/plain,\\\"\")", - "url(\'data:text/plain,\\\"\')", - "url(\"data:text/plain,\\\'\")", + "url('data:text/plain,\"')", + 'url("data:text/plain,\'")', + "url('data:text/plain,\\'')", + 'url("data:text/plain,\\"")', + "url('data:text/plain,\\\"')", + 'url("data:text/plain,\\\'")', "url(data:text/plain,\\\\)", ], - invalid_values: [] + invalid_values: [], }, "list-style-position": { domProp: "listStylePosition", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "outside" ], - other_values: [ "inside" ], - invalid_values: [] + initial_values: ["outside"], + other_values: ["inside"], + invalid_values: [], }, "list-style-type": { domProp: "listStyleType", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "disc" ], - other_values: [ "none", "circle", "square", - "disclosure-closed", "disclosure-open", - "decimal", "decimal-leading-zero", - "lower-roman", "upper-roman", "lower-greek", - "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", - "hebrew", "armenian", "georgian", - "cjk-decimal", "cjk-ideographic", - "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", - "japanese-informal", "japanese-formal", "korean-hangul-formal", - "korean-hanja-informal", "korean-hanja-formal", - "simp-chinese-informal", "simp-chinese-formal", - "trad-chinese-informal", "trad-chinese-formal", + initial_values: ["disc"], + other_values: [ + "none", + "circle", + "square", + "disclosure-closed", + "disclosure-open", + "decimal", + "decimal-leading-zero", + "lower-roman", + "upper-roman", + "lower-greek", + "lower-alpha", + "lower-latin", + "upper-alpha", + "upper-latin", + "hebrew", + "armenian", + "georgian", + "cjk-decimal", + "cjk-ideographic", + "hiragana", + "katakana", + "hiragana-iroha", + "katakana-iroha", + "japanese-informal", + "japanese-formal", + "korean-hangul-formal", + "korean-hanja-informal", + "korean-hanja-formal", + "simp-chinese-informal", + "simp-chinese-formal", + "trad-chinese-informal", + "trad-chinese-formal", "ethiopic-numeric", - "-moz-cjk-heavenly-stem", "-moz-cjk-earthly-branch", - "-moz-trad-chinese-informal", "-moz-trad-chinese-formal", - "-moz-simp-chinese-informal", "-moz-simp-chinese-formal", - "-moz-japanese-informal", "-moz-japanese-formal", - "-moz-arabic-indic", "-moz-persian", "-moz-urdu", - "-moz-devanagari", "-moz-gurmukhi", "-moz-gujarati", - "-moz-oriya", "-moz-kannada", "-moz-malayalam", "-moz-bengali", - "-moz-tamil", "-moz-telugu", "-moz-thai", "-moz-lao", - "-moz-myanmar", "-moz-khmer", - "-moz-hangul", "-moz-hangul-consonant", - "-moz-ethiopic-halehame", "-moz-ethiopic-numeric", + "-moz-cjk-heavenly-stem", + "-moz-cjk-earthly-branch", + "-moz-trad-chinese-informal", + "-moz-trad-chinese-formal", + "-moz-simp-chinese-informal", + "-moz-simp-chinese-formal", + "-moz-japanese-informal", + "-moz-japanese-formal", + "-moz-arabic-indic", + "-moz-persian", + "-moz-urdu", + "-moz-devanagari", + "-moz-gurmukhi", + "-moz-gujarati", + "-moz-oriya", + "-moz-kannada", + "-moz-malayalam", + "-moz-bengali", + "-moz-tamil", + "-moz-telugu", + "-moz-thai", + "-moz-lao", + "-moz-myanmar", + "-moz-khmer", + "-moz-hangul", + "-moz-hangul-consonant", + "-moz-ethiopic-halehame", + "-moz-ethiopic-numeric", "-moz-ethiopic-halehame-am", - "-moz-ethiopic-halehame-ti-er", "-moz-ethiopic-halehame-ti-et", - "other-style", "inside", "outside", "\\32 style", - '"-"', "'-'", - "symbols(\"*\" \"\\2020\" \"\\2021\" \"\\A7\")", - "symbols(cyclic '*' '\\2020' '\\2021' '\\A7')" + "-moz-ethiopic-halehame-ti-er", + "-moz-ethiopic-halehame-ti-et", + "other-style", + "inside", + "outside", + "\\32 style", + '"-"', + "'-'", + 'symbols("*" "\\2020" "\\2021" "\\A7")', + "symbols(cyclic '*' '\\2020' '\\2021' '\\A7')", ], - invalid_values: [] + invalid_values: [], }, - "margin": { + margin: { domProp: "margin", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "margin-top", "margin-right", "margin-bottom", "margin-left" ], - initial_values: [ "0", "0px 0 0em", "0% 0px 0em 0pt" ], - other_values: [ "3px 0", "2em 4px 2pt", "1em 2em 3px 4px", "1em calc(2em + 3px) 4ex 5cm" ], - invalid_values: [ "1px calc(nonsense)", "1px red" ], - unbalanced_values: [ "1px calc(" ], + subproperties: [ + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + ], + initial_values: ["0", "0px 0 0em", "0% 0px 0em 0pt"], + other_values: [ + "3px 0", + "2em 4px 2pt", + "1em 2em 3px 4px", + "1em calc(2em + 3px) 4ex 5cm", + ], + invalid_values: ["1px calc(nonsense)", "1px red"], + unbalanced_values: ["1px calc("], quirks_values: { "5": "5px", "3px 6px 2 5px": "3px 6px 2px 5px" }, }, "margin-bottom": { @@ -4169,8 +6371,11 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, /* XXX testing auto has prerequisites */ - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)" ], - other_values: [ "1px", "2em", "5%", + initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -4178,7 +6383,7 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], quirks_values: { "5": "5px" }, }, "margin-left": { @@ -4187,8 +6392,22 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, /* XXX testing auto has prerequisites */ - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)" ], - other_values: [ "1px", "2em", "5%", ".5px", "+32px", "+.789px", "-.328px", "+0.56px", "-0.974px", "237px", "-289px", "-056px", "1987.45px", "-84.32px", + initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"], + other_values: [ + "1px", + "2em", + "5%", + ".5px", + "+32px", + "+.789px", + "-.328px", + "+0.56px", + "-0.974px", + "237px", + "-289px", + "-056px", + "1987.45px", + "-84.32px", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -4196,7 +6415,20 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ], + invalid_values: [ + "..25px", + ".+5px", + ".px", + "-.px", + "++5px", + "-+4px", + "+-3px", + "--7px", + "+-.6px", + "-+.5px", + "++.7px", + "--.4px", + ], quirks_values: { "5": "5px" }, }, "margin-right": { @@ -4205,8 +6437,11 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, /* XXX testing auto has prerequisites */ - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)" ], - other_values: [ "1px", "2em", "5%", + initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -4214,7 +6449,7 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], quirks_values: { "5": "5px" }, }, "margin-top": { @@ -4223,8 +6458,11 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, /* XXX testing auto has prerequisites */ - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)" ], - other_values: [ "1px", "2em", "5%", + initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -4232,19 +6470,26 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], quirks_values: { "5": "5px" }, }, "max-height": { domProp: "maxHeight", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "display": "block" }, - initial_values: [ "none" ], - other_values: [ "30px", "50%", "0", - "max-content", "min-content", "-moz-fit-content", "-moz-available", + prerequisites: { display: "block" }, + initial_values: ["none"], + other_values: [ + "30px", + "50%", + "0", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", // these two keywords are the aliases of above first two. - "-moz-max-content", "-moz-min-content", + "-moz-max-content", + "-moz-min-content", "calc(2px)", "calc(-2px)", "calc(0px)", @@ -4253,22 +6498,29 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "auto" ], + invalid_values: ["auto"], quirks_values: { "5": "5px" }, }, "max-width": { domProp: "maxWidth", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "display": "block" }, - initial_values: [ "none" ], - other_values: [ "30px", "50%", "0", + prerequisites: { display: "block" }, + initial_values: ["none"], + other_values: [ + "30px", + "50%", + "0", // these four keywords compute to the initial value only when the // writing mode is vertical, and we're testing with a horizontal // writing mode - "max-content", "min-content", "-moz-fit-content", "-moz-available", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", // these two keywords are the aliases of above first two. - "-moz-max-content", "-moz-min-content", + "-moz-max-content", + "-moz-min-content", "calc(2px)", "calc(-2px)", "calc(0px)", @@ -4277,19 +6529,25 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "auto" ], + invalid_values: ["auto"], quirks_values: { "5": "5px" }, }, "min-height": { domProp: "minHeight", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "display": "block" }, - initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)" ], - other_values: [ "30px", "50%", - "max-content", "min-content", "-moz-fit-content", "-moz-available", + prerequisites: { display: "block" }, + initial_values: ["auto", "0", "calc(0em)", "calc(-2px)"], + other_values: [ + "30px", + "50%", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", // these two keywords are the aliases of above first two. - "-moz-max-content", "-moz-min-content", + "-moz-max-content", + "-moz-min-content", "calc(-1%)", "calc(2px)", "calc(50%)", @@ -4304,15 +6562,21 @@ var gCSSProperties = { domProp: "minWidth", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "display": "block" }, - initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)" ], - other_values: [ "30px", "50%", + prerequisites: { display: "block" }, + initial_values: ["auto", "0", "calc(0em)", "calc(-2px)"], + other_values: [ + "30px", + "50%", // these four keywords compute to the initial value only when the // writing mode is vertical, and we're testing with a horizontal // writing mode - "max-content", "min-content", "-moz-fit-content", "-moz-available", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", // these two keywords are the aliases of above first two. - "-moz-max-content", "-moz-min-content", + "-moz-max-content", + "-moz-min-content", "calc(-1%)", "calc(2px)", "calc(50%)", @@ -4320,22 +6584,22 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "none" ], + invalid_values: ["none"], quirks_values: { "5": "5px" }, }, "object-fit": { domProp: "objectFit", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "fill" ], - other_values: [ "contain", "cover", "none", "scale-down" ], - invalid_values: [ "auto", "5px", "100%" ] + initial_values: ["fill"], + other_values: ["contain", "cover", "none", "scale-down"], + invalid_values: ["auto", "5px", "100%"], }, "object-position": { domProp: "objectPosition", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "50% 50%", "50%", "center", "center center" ], + initial_values: ["50% 50%", "50%", "center", "center center"], other_values: [ "calc(20px)", "calc(20px) 10px", @@ -4364,63 +6628,113 @@ var gCSSProperties = { "left top 15px", "left 10px top", "left 20%", - "right 20%" + "right 20%", + ], + invalid_values: [ + "center 10px center 4px", + "center 10px center", + "top 20%", + "bottom 20%", + "50% left", + "top 50%", + "50% bottom 10%", + "right 10% 50%", + "left right", + "top bottom", + "left 10% right", + "top 20px bottom 20px", + "left left", + "20 20", ], - invalid_values: [ "center 10px center 4px", "center 10px center", - "top 20%", "bottom 20%", "50% left", "top 50%", - "50% bottom 10%", "right 10% 50%", "left right", - "top bottom", "left 10% right", - "top 20px bottom 20px", "left left", "20 20" ] }, - "opacity": { + opacity: { domProp: "opacity", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "1", "17", "397.376", "3e1", "3e+1", "3e0", "3e+0", "3e-0" ], - other_values: [ "0", "0.4", "0.0000", "-3", "3e-1" ], - invalid_values: [ "0px", "1px" ] + initial_values: [ + "1", + "17", + "397.376", + "3e1", + "3e+1", + "3e0", + "3e+0", + "3e-0", + ], + other_values: ["0", "0.4", "0.0000", "-3", "3e-1"], + invalid_values: ["0px", "1px"], }, "-moz-orient": { domProp: "MozOrient", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "inline" ], - other_values: [ "horizontal", "vertical", "block" ], - invalid_values: [ "none" ] + initial_values: ["inline"], + other_values: ["horizontal", "vertical", "block"], + invalid_values: ["none"], }, - "outline": { + outline: { domProp: "outline", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "outline-color", "outline-style", "outline-width" ], + subproperties: ["outline-color", "outline-style", "outline-width"], initial_values: [ - "none", "medium", "thin", + "none", + "medium", + "thin", // XXX Should be invert, but currently currentcolor. //"invert", "none medium invert" - "currentColor", "none medium currentcolor" + "currentColor", + "none medium currentcolor", ], - other_values: [ "solid", "medium solid", "green solid", "10px solid", "thick solid" ], - invalid_values: [ "5%", "5", "5 solid green" ] + other_values: [ + "solid", + "medium solid", + "green solid", + "10px solid", + "thick solid", + ], + invalid_values: ["5%", "5", "5 solid green"], }, "outline-color": { domProp: "outlineColor", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_cue: true, - prerequisites: { "color": "black" }, - initial_values: [ "currentColor" ], // XXX should be invert - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000", "cc00ff" ] + prerequisites: { color: "black" }, + initial_values: ["currentColor"], // XXX should be invert + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: [ + "#0", + "#00", + "#00000", + "#0000000", + "#000000000", + "000000", + "cc00ff", + ], }, "outline-offset": { domProp: "outlineOffset", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0", "0px", "-0", "calc(0px)", "calc(3em + 2px - 2px - 3em)", "calc(-0em)" ], - other_values: [ "-3px", "1em", "calc(3em)", "calc(7pt + 3 * 2em)", "calc(-3px)" ], - invalid_values: [ "5%" ] + initial_values: [ + "0", + "0px", + "-0", + "calc(0px)", + "calc(3em + 2px - 2px - 3em)", + "calc(-0em)", + ], + other_values: [ + "-3px", + "1em", + "calc(3em)", + "calc(7pt + 3 * 2em)", + "calc(-3px)", + ], + invalid_values: ["5%"], }, "outline-style": { domProp: "outlineStyle", @@ -4428,9 +6742,19 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_cue: true, // XXX Should 'hidden' be the same as initial? - initial_values: [ "none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge", "auto" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + "auto", + ], + invalid_values: [], }, "outline-width": { domProp: "outlineWidth", @@ -4438,8 +6762,12 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_cue: true, prerequisites: { "outline-style": "solid" }, - initial_values: [ "medium", "3px", "calc(4px - 1px)" ], - other_values: [ "thin", "thick", "1px", "2em", + initial_values: ["medium", "3px", "calc(4px - 1px)"], + other_values: [ + "thin", + "thick", + "1px", + "2em", "calc(2px)", "calc(-2px)", "calc(0px)", @@ -4449,18 +6777,26 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "5%", "5" ] + invalid_values: ["5%", "5"], }, - "overflow": { + overflow: { domProp: "overflow", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - prerequisites: { "display": "block", "contain": "none" }, - subproperties: [ "overflow-x", "overflow-y" ], - initial_values: [ "visible" ], - other_values: [ "auto", "scroll", "hidden", "-moz-hidden-unscrollable", - "auto auto", "auto scroll", "hidden scroll", "auto hidden", - "-moz-hidden-unscrollable -moz-hidden-unscrollable" ], + prerequisites: { display: "block", contain: "none" }, + subproperties: ["overflow-x", "overflow-y"], + initial_values: ["visible"], + other_values: [ + "auto", + "scroll", + "hidden", + "-moz-hidden-unscrollable", + "auto auto", + "auto scroll", + "hidden scroll", + "auto hidden", + "-moz-hidden-unscrollable -moz-hidden-unscrollable", + ], invalid_values: [ "-moz-hidden-unscrollable -moz-scrollbars-none", "-moz-scrollbars-none", @@ -4473,20 +6809,28 @@ var gCSSProperties = { inherited: false, type: CSS_TYPE_LONGHAND, // No applies_to_placeholder because we have a !important rule in forms.css. - prerequisites: { "display": "block", "overflow-y": "visible", "contain": "none" }, - initial_values: [ "visible" ], - other_values: [ "auto", "scroll", "hidden", "-moz-hidden-unscrollable" ], - invalid_values: [] + prerequisites: { + display: "block", + "overflow-y": "visible", + contain: "none", + }, + initial_values: ["visible"], + other_values: ["auto", "scroll", "hidden", "-moz-hidden-unscrollable"], + invalid_values: [], }, "overflow-y": { domProp: "overflowY", inherited: false, type: CSS_TYPE_LONGHAND, // No applies_to_placeholder because we have a !important rule in forms.css. - prerequisites: { "display": "block", "overflow-x": "visible", "contain": "none" }, - initial_values: [ "visible" ], - other_values: [ "auto", "scroll", "hidden", "-moz-hidden-unscrollable" ], - invalid_values: [] + prerequisites: { + display: "block", + "overflow-x": "visible", + contain: "none", + }, + initial_values: ["visible"], + other_values: ["auto", "scroll", "hidden", "-moz-hidden-unscrollable"], + invalid_values: [], }, "overflow-inline": { domProp: "overflowInline", @@ -4494,10 +6838,14 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, // No applies_to_placeholder because we have a !important rule in forms.css. - prerequisites: { "display": "block", "overflow-block": "visible", "contain": "none" }, - initial_values: [ "visible" ], - other_values: [ "auto", "scroll", "hidden", "-moz-hidden-unscrollable" ], - invalid_values: [] + prerequisites: { + display: "block", + "overflow-block": "visible", + contain: "none", + }, + initial_values: ["visible"], + other_values: ["auto", "scroll", "hidden", "-moz-hidden-unscrollable"], + invalid_values: [], }, "overflow-block": { domProp: "overflowBlock", @@ -4505,41 +6853,55 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, // No applies_to_placeholder because we have a !important rule in forms.css. - prerequisites: { "display": "block", "overflow-inline": "visible", "contain": "none" }, - initial_values: [ "visible" ], - other_values: [ "auto", "scroll", "hidden", "-moz-hidden-unscrollable" ], - invalid_values: [] + prerequisites: { + display: "block", + "overflow-inline": "visible", + contain: "none", + }, + initial_values: ["visible"], + other_values: ["auto", "scroll", "hidden", "-moz-hidden-unscrollable"], + invalid_values: [], }, - "padding": { + padding: { domProp: "padding", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "padding-top", "padding-right", "padding-bottom", "padding-left" ], - initial_values: [ "0", "0px 0 0em", "0% 0px 0em 0pt", "calc(0px) calc(0em) calc(-2px) calc(-1%)" ], - other_values: [ "3px 0", "2em 4px 2pt", "1em 2em 3px 4px" ], - invalid_values: [ "1px calc(nonsense)", "1px red", "-1px" ], - unbalanced_values: [ "1px calc(" ], + subproperties: [ + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + ], + initial_values: [ + "0", + "0px 0 0em", + "0% 0px 0em 0pt", + "calc(0px) calc(0em) calc(-2px) calc(-1%)", + ], + other_values: ["3px 0", "2em 4px 2pt", "1em 2em 3px 4px"], + invalid_values: ["1px calc(nonsense)", "1px red", "-1px"], + unbalanced_values: ["1px calc("], quirks_values: { "5": "5px", "3px 6px 2 5px": "3px 6px 2px 5px" }, }, "padding-block": { domProp: "paddingBlock", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "padding-block-start", "padding-block-end" ], - initial_values: [ "0", "0px 0em" ], - other_values: [ "3px 0", "2% 4px", "1em", "calc(1px) calc(-1%)" ], - invalid_values: [ "1px calc(nonsense)", "1px red", "-1px", "auto", "none" ], - unbalanced_values: [ "1px calc(" ], + subproperties: ["padding-block-start", "padding-block-end"], + initial_values: ["0", "0px 0em"], + other_values: ["3px 0", "2% 4px", "1em", "calc(1px) calc(-1%)"], + invalid_values: ["1px calc(nonsense)", "1px red", "-1px", "auto", "none"], + unbalanced_values: ["1px calc("], }, "padding-inline": { domProp: "paddingInline", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "padding-inline-start", "padding-inline-end" ], - initial_values: [ "0", "0px 0em" ], - other_values: [ "3px 0", "2% 4px", "1em", "calc(1px) calc(-1%)" ], - invalid_values: [ "1px calc(nonsense)", "1px red", "-1px", "auto", "none" ], - unbalanced_values: [ "1px calc(" ], + subproperties: ["padding-inline-start", "padding-inline-end"], + initial_values: ["0", "0px 0em"], + other_values: ["3px 0", "2% 4px", "1em", "calc(1px) calc(-1%)"], + invalid_values: ["1px calc(nonsense)", "1px red", "-1px", "auto", "none"], + unbalanced_values: ["1px calc("], }, "padding-bottom": { domProp: "paddingBottom", @@ -4547,15 +6909,26 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, // No applies_to_placeholder because we have a !important rule in forms.css. - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)", "calc(-3px)", "calc(-1%)" ], - other_values: [ "1px", "2em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "calc(0pt)", + "calc(0% + 0px)", + "calc(-3px)", + "calc(-1%)", + ], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], quirks_values: { "5": "5px" }, }, "padding-left": { @@ -4564,15 +6937,26 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, // No applies_to_placeholder because we have a !important rule in forms.css. - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)", "calc(-3px)", "calc(-1%)" ], - other_values: [ "1px", "2em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "calc(0pt)", + "calc(0% + 0px)", + "calc(-3px)", + "calc(-1%)", + ], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], quirks_values: { "5": "5px" }, }, "padding-right": { @@ -4581,15 +6965,26 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, // No applies_to_placeholder because we have a !important rule in forms.css. - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)", "calc(-3px)", "calc(-1%)" ], - other_values: [ "1px", "2em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "calc(0pt)", + "calc(0% + 0px)", + "calc(-3px)", + "calc(-1%)", + ], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], quirks_values: { "5": "5px" }, }, "padding-top": { @@ -4598,15 +6993,26 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, // No applies_to_placeholder because we have a !important rule in forms.css. - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)", "calc(-3px)", "calc(-1%)" ], - other_values: [ "1px", "2em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "calc(0pt)", + "calc(0% + 0px)", + "calc(-3px)", + "calc(-1%)", + ], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], quirks_values: { "5": "5px" }, }, "page-break-after": { @@ -4614,102 +7020,121 @@ var gCSSProperties = { inherited: false, type: CSS_TYPE_LEGACY_SHORTHAND, alias_for: "break-after", - subproperties: [ "break-after" ], - initial_values: [ "auto" ], - other_values: [ "always", "avoid", "left", "right" ], + subproperties: ["break-after"], + initial_values: ["auto"], + other_values: ["always", "avoid", "left", "right"], legacy_mapping: { always: "page", }, - invalid_values: [ "page", "column" ] + invalid_values: ["page", "column"], }, "page-break-before": { domProp: "pageBreakBefore", inherited: false, type: CSS_TYPE_LEGACY_SHORTHAND, alias_for: "break-before", - subproperties: [ "break-before" ], - initial_values: [ "auto" ], - other_values: [ "always", "avoid", "left", "right" ], + subproperties: ["break-before"], + initial_values: ["auto"], + other_values: ["always", "avoid", "left", "right"], legacy_mapping: { always: "page", }, - invalid_values: [ "page", "column" ] + invalid_values: ["page", "column"], }, "break-after": { domProp: "breakAfter", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "always", "page", "avoid", "left", "right" ], - invalid_values: [ ] + initial_values: ["auto"], + other_values: ["always", "page", "avoid", "left", "right"], + invalid_values: [], }, "break-before": { domProp: "breakBefore", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "always", "page", "avoid", "left", "right" ], - invalid_values: [ ] + initial_values: ["auto"], + other_values: ["always", "page", "avoid", "left", "right"], + invalid_values: [], }, "break-inside": { domProp: "breakInside", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "avoid" ], - invalid_values: [ "left", "right", "always" ] + initial_values: ["auto"], + other_values: ["avoid"], + invalid_values: ["left", "right", "always"], }, "page-break-inside": { domProp: "pageBreakInside", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "break-inside", - subproperties: [ "break-inside" ], + subproperties: ["break-inside"], }, "paint-order": { domProp: "paintOrder", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "fill", "fill stroke", "fill stroke markers", "stroke markers fill" ], - invalid_values: [ "fill stroke markers fill", "fill normal" ] + initial_values: ["normal"], + other_values: [ + "fill", + "fill stroke", + "fill stroke markers", + "stroke markers fill", + ], + invalid_values: ["fill stroke markers fill", "fill normal"], }, "pointer-events": { domProp: "pointerEvents", inherited: true, type: CSS_TYPE_LONGHAND, // No applies_to_placeholder because we have a !important rule in forms.css. - initial_values: [ "auto" ], - other_values: [ "visiblePainted", "visibleFill", "visibleStroke", "visible", - "painted", "fill", "stroke", "all", "none" ], - invalid_values: [] + initial_values: ["auto"], + other_values: [ + "visiblePainted", + "visibleFill", + "visibleStroke", + "visible", + "painted", + "fill", + "stroke", + "all", + "none", + ], + invalid_values: [], }, - "position": { + position: { domProp: "position", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "static" ], - other_values: [ "relative", "absolute", "fixed", "sticky" ], - invalid_values: [] + initial_values: ["static"], + other_values: ["relative", "absolute", "fixed", "sticky"], + invalid_values: [], }, - "quotes": { + quotes: { domProp: "quotes", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ '"\u201C" "\u201D" "\u2018" "\u2019"', - '"\\201C" "\\201D" "\\2018" "\\2019"' ], - other_values: [ "none", "'\"' '\"'" ], - invalid_values: [] + initial_values: [ + '"\u201C" "\u201D" "\u2018" "\u2019"', + '"\\201C" "\\201D" "\\2018" "\\2019"', + ], + other_values: ["none", "'\"' '\"'"], + invalid_values: [], }, - "right": { + right: { domProp: "right", inherited: false, type: CSS_TYPE_LONGHAND, /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, + prerequisites: { position: "relative" }, /* XXX 0 may or may not be equal to auto */ - initial_values: [ "auto" ], - other_values: [ "32px", "-3em", "12%", + initial_values: ["auto"], + other_values: [ + "32px", + "-3em", + "12%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -4724,39 +7149,45 @@ var gCSSProperties = { domProp: "rubyAlign", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "space-around" ], - other_values: [ "start", "center", "space-between" ], - invalid_values: [ - "end", "1", "10px", "50%", "start center" - ] + initial_values: ["space-around"], + other_values: ["start", "center", "space-between"], + invalid_values: ["end", "1", "10px", "50%", "start center"], }, "ruby-position": { domProp: "rubyPosition", inherited: true, type: CSS_TYPE_LONGHAND, applies_to_cue: true, - initial_values: [ "over" ], - other_values: [ "under" ], + initial_values: ["over"], + other_values: ["under"], invalid_values: [ - "left", "right", "auto", "none", "not_a_position", - "over left", "right under", "0", "100px", "50%" - ] + "left", + "right", + "auto", + "none", + "not_a_position", + "over left", + "right under", + "0", + "100px", + "50%", + ], }, "scroll-behavior": { domProp: "scrollBehavior", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "smooth" ], - invalid_values: [ "none", "1px" ], + initial_values: ["auto"], + other_values: ["smooth"], + invalid_values: ["none", "1px"], }, "table-layout": { domProp: "tableLayout", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "fixed" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["fixed"], + invalid_values: [], }, "text-align": { domProp: "textAlign", @@ -4764,17 +7195,24 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_placeholder: true, // don't know whether left and right are same as start - initial_values: [ "start" ], - other_values: [ "center", "justify", "end", "match-parent" ], - invalid_values: [ "true", "true true", "char", "-moz-center-or-inherit", "true left", "unsafe left" ] + initial_values: ["start"], + other_values: ["center", "justify", "end", "match-parent"], + invalid_values: [ + "true", + "true true", + "char", + "-moz-center-or-inherit", + "true left", + "unsafe left", + ], }, "text-align-last": { domProp: "textAlignLast", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "center", "justify", "start", "end", "left", "right" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["center", "justify", "start", "end", "left", "right"], + invalid_values: [], }, "text-combine-upright": { domProp: "textCombineUpright", @@ -4782,11 +7220,24 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_cue: true, applies_to_marker: true, - initial_values: [ "none" ], - other_values: [ "all" ], - invalid_values: [ "auto", "all 2", "none all", "digits -3", "digits 0", - "digits 12", "none 3", "digits 3.1415", "digits3", "digits 1", - "digits 3 all", "digits foo", "digits all", "digits 3.0" ] + initial_values: ["none"], + other_values: ["all"], + invalid_values: [ + "auto", + "all 2", + "none all", + "digits -3", + "digits 0", + "digits 12", + "none 3", + "digits 3.1415", + "digits3", + "digits 1", + "digits 3 all", + "digits foo", + "digits all", + "digits 3.0", + ], }, "text-decoration": { domProp: "textDecoration", @@ -4796,11 +7247,37 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - subproperties: [ "text-decoration-color", "text-decoration-line", "text-decoration-style" ], - initial_values: [ "none" ], - other_values: [ "underline", "overline", "line-through", "blink", "blink line-through underline", "underline overline line-through blink", - "underline red solid", "underline #ff0000", "solid underline", "red underline", "#ff0000 underline", "dotted underline" ], - invalid_values: [ "none none", "underline none", "none underline", "blink none", "none blink", "line-through blink line-through", "underline overline line-through blink none", "underline overline line-throuh blink blink", "rgb(0, rubbish, 0) underline" ] + subproperties: [ + "text-decoration-color", + "text-decoration-line", + "text-decoration-style", + ], + initial_values: ["none"], + other_values: [ + "underline", + "overline", + "line-through", + "blink", + "blink line-through underline", + "underline overline line-through blink", + "underline red solid", + "underline #ff0000", + "solid underline", + "red underline", + "#ff0000 underline", + "dotted underline", + ], + invalid_values: [ + "none none", + "underline none", + "none underline", + "blink none", + "none blink", + "line-through blink line-through", + "underline overline line-through blink none", + "underline overline line-throuh blink blink", + "rgb(0, rubbish, 0) underline", + ], }, "text-decoration-color": { domProp: "textDecorationColor", @@ -4810,10 +7287,18 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - prerequisites: { "color": "black" }, - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000", "ff00ff" ] + prerequisites: { color: "black" }, + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: [ + "#0", + "#00", + "#00000", + "#0000000", + "#000000000", + "000000", + "ff00ff", + ], }, "text-decoration-line": { domProp: "textDecorationLine", @@ -4823,9 +7308,23 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "none" ], - other_values: [ "underline", "overline", "line-through", "blink", "blink line-through underline", "underline overline line-through blink" ], - invalid_values: [ "none none", "underline none", "none underline", "line-through blink line-through", "underline overline line-through blink none", "underline overline line-throuh blink blink" ] + initial_values: ["none"], + other_values: [ + "underline", + "overline", + "line-through", + "blink", + "blink line-through underline", + "underline overline line-through blink", + ], + invalid_values: [ + "none none", + "underline none", + "none underline", + "line-through blink line-through", + "underline overline line-through blink none", + "underline overline line-throuh blink blink", + ], }, "text-decoration-style": { domProp: "textDecorationStyle", @@ -4835,147 +7334,179 @@ var gCSSProperties = { applies_to_first_line: true, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "solid" ], - other_values: [ "double", "dotted", "dashed", "wavy", "-moz-none" ], - invalid_values: [ "none", "groove", "ridge", "inset", "outset", "solid dashed", "wave" ] + initial_values: ["solid"], + other_values: ["double", "dotted", "dashed", "wavy", "-moz-none"], + invalid_values: [ + "none", + "groove", + "ridge", + "inset", + "outset", + "solid dashed", + "wave", + ], }, "text-decoration-skip-ink": { - domProp: "textDecorationSkipInk", - inherited: true, - type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: ["none"], - invalid_values: ["13", "15%", "-1", "0", "otto", "trash", "non", "nada", "!@#$%^", "none auto", "auto none"] + domProp: "textDecorationSkipInk", + inherited: true, + type: CSS_TYPE_LONGHAND, + initial_values: ["auto"], + other_values: ["none"], + invalid_values: [ + "13", + "15%", + "-1", + "0", + "otto", + "trash", + "non", + "nada", + "!@#$%^", + "none auto", + "auto none", + ], }, "text-underline-offset": { domProp: "textUnderlineOffset", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: ["0", "-14px", "25px", "100em", "-45em"], - invalid_values: ["13", "-25", "rubbish", ",./!@#$", "43%", "-10%"] + invalid_values: ["13", "-25", "rubbish", ",./!@#$", "43%", "-10%"], }, "text-decoration-width": { domProp: "textDecorationWidth", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: ["0", "-14px", "25px", "100em", "-45em"], - invalid_values: ["13", "-25", "rubbish", ",./!@#$", "43%", "-10%"] + invalid_values: ["13", "-25", "rubbish", ",./!@#$", "43%", "-10%"], }, "text-emphasis": { domProp: "textEmphasis", inherited: true, type: CSS_TYPE_TRUE_SHORTHAND, - prerequisites: { "color": "black" }, - subproperties: [ "text-emphasis-style", "text-emphasis-color" ], - initial_values: [ "none currentColor", "currentColor none", "none", "currentColor", "none black" ], - other_values: [ "filled dot black", "#f00 circle open", "sesame filled rgba(0,0,255,0.5)", "red", "green none", "currentColor filled", "currentColor open" ], - invalid_values: [ "filled black dot", "filled filled red", "open open circle #000", "circle dot #f00", "rubbish" ] + prerequisites: { color: "black" }, + subproperties: ["text-emphasis-style", "text-emphasis-color"], + initial_values: [ + "none currentColor", + "currentColor none", + "none", + "currentColor", + "none black", + ], + other_values: [ + "filled dot black", + "#f00 circle open", + "sesame filled rgba(0,0,255,0.5)", + "red", + "green none", + "currentColor filled", + "currentColor open", + ], + invalid_values: [ + "filled black dot", + "filled filled red", + "open open circle #000", + "circle dot #f00", + "rubbish", + ], }, "text-emphasis-color": { domProp: "textEmphasisColor", inherited: true, type: CSS_TYPE_LONGHAND, - prerequisites: { "color": "black" }, - initial_values: [ "currentColor", "black", "rgb(0,0,0)" ], - other_values: [ "red", "rgba(255,255,255,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000", "ff00ff", "rgb(255,xxx,255)" ] + prerequisites: { color: "black" }, + initial_values: ["currentColor", "black", "rgb(0,0,0)"], + other_values: ["red", "rgba(255,255,255,0.5)", "transparent"], + invalid_values: [ + "#0", + "#00", + "#00000", + "#0000000", + "#000000000", + "000000", + "ff00ff", + "rgb(255,xxx,255)", + ], }, "text-emphasis-position": { domProp: "textEmphasisPosition", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "over right", "right over" ], - other_values: [ "over left", "left over", "under left", "left under", "under right", "right under" ], - invalid_values: [ "over over", "left left", "over right left", "rubbish left", "over rubbish" ] + initial_values: ["over right", "right over"], + other_values: [ + "over left", + "left over", + "under left", + "left under", + "under right", + "right under", + ], + invalid_values: [ + "over over", + "left left", + "over right left", + "rubbish left", + "over rubbish", + ], }, "text-emphasis-style": { domProp: "textEmphasisStyle", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "filled", "open", "dot", "circle", "double-circle", "triangle", "sesame", "'#'", - "filled dot", "filled circle", "filled double-circle", "filled triangle", "filled sesame", - "dot filled", "circle filled", "double-circle filled", "triangle filled", "sesame filled", - "dot open", "circle open", "double-circle open", "triangle open", "sesame open" ], - invalid_values: [ "rubbish", "dot rubbish", "rubbish dot", "open rubbish", "rubbish open", "open filled", "dot circle", - "open '#'", "'#' filled", "dot '#'", "'#' circle", "1", "1 open", "open 1" ] + initial_values: ["none"], + other_values: [ + "filled", + "open", + "dot", + "circle", + "double-circle", + "triangle", + "sesame", + "'#'", + "filled dot", + "filled circle", + "filled double-circle", + "filled triangle", + "filled sesame", + "dot filled", + "circle filled", + "double-circle filled", + "triangle filled", + "sesame filled", + "dot open", + "circle open", + "double-circle open", + "triangle open", + "sesame open", + ], + invalid_values: [ + "rubbish", + "dot rubbish", + "rubbish dot", + "open rubbish", + "rubbish open", + "open filled", + "dot circle", + "open '#'", + "'#' filled", + "dot '#'", + "'#' circle", + "1", + "1 open", + "open 1", + ], }, "text-indent": { domProp: "textIndent", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "0", "calc(3em - 5em + 2px + 2em - 2px)" ], - other_values: [ "2em", "5%", "-10px", - "calc(2px)", - "calc(-2px)", - "calc(50%)", - "calc(3*25px)", - "calc(25px*3)", - "calc(3*25px + 50%)", - ], - invalid_values: [ ], - quirks_values: { "5": "5px" }, - }, - "text-overflow": { - domProp: "textOverflow", - inherited: false, - type: CSS_TYPE_LONGHAND, - applies_to_placeholder: true, - initial_values: [ "clip" ], - other_values: [ "ellipsis", '""', "''", '"hello"', 'clip clip', 'ellipsis ellipsis', 'clip ellipsis', 'clip ""', '"hello" ""', '"" ellipsis' ], - invalid_values: [ "none", "auto", '"hello" inherit', 'inherit "hello"', 'clip initial', 'initial clip', 'initial inherit', 'inherit initial', 'inherit none', '"hello" unset', 'unset "hello"', 'clip unset', 'unset clip', 'unset inherit', 'unset none', 'initial unset'] - }, - "text-shadow": { - domProp: "textShadow", - inherited: true, - type: CSS_TYPE_LONGHAND, - applies_to_first_letter: true, - applies_to_first_line: true, - applies_to_placeholder: true, - applies_to_cue: true, - prerequisites: { "color": "blue" }, - initial_values: [ "none" ], - other_values: [ "2px 2px", "2px 2px 1px", "2px 2px green", "2px 2px 1px green", "green 2px 2px", "green 2px 2px 1px", "green 2px 2px, blue 1px 3px 4px", "currentColor 3px 3px", "blue 2px 2px, currentColor 1px 2px", - /* calc() values */ - "2px 2px calc(-5px)", /* clamped */ - "calc(3em - 2px) 2px green", - "green calc(3em - 2px) 2px", - "2px calc(2px + 0.2em)", - "blue 2px calc(2px + 0.2em)", - "2px calc(2px + 0.2em) blue", - "calc(-2px) calc(-2px)", - "-2px -2px", - "calc(2px) calc(2px)", - "calc(2px) calc(2px) calc(2px)", - ], - invalid_values: [ "3% 3%", "2px 2px -5px", "2px 2px 2px 2px", "2px 2px, none", "none, 2px 2px", "inherit, 2px 2px", "2px 2px, inherit", "2 2px", "2px 2", "2px 2px 2", "2px 2px 2px 2", - "calc(2px) calc(2px) calc(2px) calc(2px)", "3px 3px calc(3px + rubbish)", "unset, 2px 2px", "2px 2px, unset" - ] - }, - "text-transform": { - domProp: "textTransform", - inherited: true, - type: CSS_TYPE_LONGHAND, - applies_to_first_letter: true, - applies_to_first_line: true, - applies_to_placeholder: true, - initial_values: [ "none" ], - other_values: [ "capitalize", "uppercase", "lowercase", "full-width", "full-size-kana", - "uppercase full-width", "full-size-kana capitalize", "full-width lowercase full-size-kana" ], - invalid_values: [ "none none", "none uppercase", "full-width none", "uppercase lowercase", - "full-width capitalize full-width", "uppercase full-width lowercase" ] - }, - "top": { - domProp: "top", - inherited: false, - type: CSS_TYPE_LONGHAND, - /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, - /* XXX 0 may or may not be equal to auto */ - initial_values: [ "auto" ], - other_values: [ "32px", "-3em", "12%", + initial_values: ["0", "calc(3em - 5em + 2px + 2em - 2px)"], + other_values: [ + "2em", + "5%", + "-10px", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -4986,55 +7517,338 @@ var gCSSProperties = { invalid_values: [], quirks_values: { "5": "5px" }, }, - "transition": { + "text-overflow": { + domProp: "textOverflow", + inherited: false, + type: CSS_TYPE_LONGHAND, + applies_to_placeholder: true, + initial_values: ["clip"], + other_values: [ + "ellipsis", + '""', + "''", + '"hello"', + "clip clip", + "ellipsis ellipsis", + "clip ellipsis", + 'clip ""', + '"hello" ""', + '"" ellipsis', + ], + invalid_values: [ + "none", + "auto", + '"hello" inherit', + 'inherit "hello"', + "clip initial", + "initial clip", + "initial inherit", + "inherit initial", + "inherit none", + '"hello" unset', + 'unset "hello"', + "clip unset", + "unset clip", + "unset inherit", + "unset none", + "initial unset", + ], + }, + "text-shadow": { + domProp: "textShadow", + inherited: true, + type: CSS_TYPE_LONGHAND, + applies_to_first_letter: true, + applies_to_first_line: true, + applies_to_placeholder: true, + applies_to_cue: true, + prerequisites: { color: "blue" }, + initial_values: ["none"], + other_values: [ + "2px 2px", + "2px 2px 1px", + "2px 2px green", + "2px 2px 1px green", + "green 2px 2px", + "green 2px 2px 1px", + "green 2px 2px, blue 1px 3px 4px", + "currentColor 3px 3px", + "blue 2px 2px, currentColor 1px 2px", + /* calc() values */ + "2px 2px calc(-5px)" /* clamped */, + "calc(3em - 2px) 2px green", + "green calc(3em - 2px) 2px", + "2px calc(2px + 0.2em)", + "blue 2px calc(2px + 0.2em)", + "2px calc(2px + 0.2em) blue", + "calc(-2px) calc(-2px)", + "-2px -2px", + "calc(2px) calc(2px)", + "calc(2px) calc(2px) calc(2px)", + ], + invalid_values: [ + "3% 3%", + "2px 2px -5px", + "2px 2px 2px 2px", + "2px 2px, none", + "none, 2px 2px", + "inherit, 2px 2px", + "2px 2px, inherit", + "2 2px", + "2px 2", + "2px 2px 2", + "2px 2px 2px 2", + "calc(2px) calc(2px) calc(2px) calc(2px)", + "3px 3px calc(3px + rubbish)", + "unset, 2px 2px", + "2px 2px, unset", + ], + }, + "text-transform": { + domProp: "textTransform", + inherited: true, + type: CSS_TYPE_LONGHAND, + applies_to_first_letter: true, + applies_to_first_line: true, + applies_to_placeholder: true, + initial_values: ["none"], + other_values: [ + "capitalize", + "uppercase", + "lowercase", + "full-width", + "full-size-kana", + "uppercase full-width", + "full-size-kana capitalize", + "full-width lowercase full-size-kana", + ], + invalid_values: [ + "none none", + "none uppercase", + "full-width none", + "uppercase lowercase", + "full-width capitalize full-width", + "uppercase full-width lowercase", + ], + }, + top: { + domProp: "top", + inherited: false, + type: CSS_TYPE_LONGHAND, + /* FIXME: run tests with multiple prerequisites */ + prerequisites: { position: "relative" }, + /* XXX 0 may or may not be equal to auto */ + initial_values: ["auto"], + other_values: [ + "32px", + "-3em", + "12%", + "calc(2px)", + "calc(-2px)", + "calc(50%)", + "calc(3*25px)", + "calc(25px*3)", + "calc(3*25px + 50%)", + ], + invalid_values: [], + quirks_values: { "5": "5px" }, + }, + transition: { domProp: "transition", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "transition-property", "transition-duration", "transition-timing-function", "transition-delay" ], - initial_values: [ "all 0s ease 0s", "all", "0s", "0s 0s", "ease" ], - other_values: [ "all 0s cubic-bezier(0.25, 0.1, 0.25, 1.0) 0s", "width 1s linear 2s", "width 1s 2s linear", "width linear 1s 2s", "linear width 1s 2s", "linear 1s width 2s", "linear 1s 2s width", "1s width linear 2s", "1s width 2s linear", "1s 2s width linear", "1s linear width 2s", "1s linear 2s width", "1s 2s linear width", "width linear 1s", "width 1s linear", "linear width 1s", "linear 1s width", "1s width linear", "1s linear width", "1s 2s width", "1s width 2s", "width 1s 2s", "1s 2s linear", "1s linear 2s", "linear 1s 2s", "width 1s", "1s width", "linear 1s", "1s linear", "1s 2s", "2s 1s", "width", "linear", "1s", "height", "2s", "ease-in-out", "2s ease-in", "opacity linear", "ease-out 2s", "2s color, 1s width, 500ms height linear, 1s opacity 4s cubic-bezier(0.0, 0.1, 1.0, 1.0)", "1s \\32width linear 2s", "1s -width linear 2s", "1s -\\32width linear 2s", "1s \\32 0width linear 2s", "1s -\\32 0width linear 2s", "1s \\2width linear 2s", "1s -\\2width linear 2s", "2s, 1s width", "1s width, 2s", "2s all, 1s width", "1s width, 2s all", "2s all, 1s width", "2s width, 1s all", "3s --my-color", "none", "none 2s linear 2s" ], - invalid_values: [ "1s width, 2s none", "2s none, 1s width", "2s inherit", "inherit 2s", "2s width, 1s inherit", "2s inherit, 1s width", "2s initial", "1s width,,2s color", "1s width, ,2s color", "bounce 1s cubic-bezier(0, rubbish) 2s", "bounce 1s steps(rubbish) 2s", "2s unset" ] + subproperties: [ + "transition-property", + "transition-duration", + "transition-timing-function", + "transition-delay", + ], + initial_values: ["all 0s ease 0s", "all", "0s", "0s 0s", "ease"], + other_values: [ + "all 0s cubic-bezier(0.25, 0.1, 0.25, 1.0) 0s", + "width 1s linear 2s", + "width 1s 2s linear", + "width linear 1s 2s", + "linear width 1s 2s", + "linear 1s width 2s", + "linear 1s 2s width", + "1s width linear 2s", + "1s width 2s linear", + "1s 2s width linear", + "1s linear width 2s", + "1s linear 2s width", + "1s 2s linear width", + "width linear 1s", + "width 1s linear", + "linear width 1s", + "linear 1s width", + "1s width linear", + "1s linear width", + "1s 2s width", + "1s width 2s", + "width 1s 2s", + "1s 2s linear", + "1s linear 2s", + "linear 1s 2s", + "width 1s", + "1s width", + "linear 1s", + "1s linear", + "1s 2s", + "2s 1s", + "width", + "linear", + "1s", + "height", + "2s", + "ease-in-out", + "2s ease-in", + "opacity linear", + "ease-out 2s", + "2s color, 1s width, 500ms height linear, 1s opacity 4s cubic-bezier(0.0, 0.1, 1.0, 1.0)", + "1s \\32width linear 2s", + "1s -width linear 2s", + "1s -\\32width linear 2s", + "1s \\32 0width linear 2s", + "1s -\\32 0width linear 2s", + "1s \\2width linear 2s", + "1s -\\2width linear 2s", + "2s, 1s width", + "1s width, 2s", + "2s all, 1s width", + "1s width, 2s all", + "2s all, 1s width", + "2s width, 1s all", + "3s --my-color", + "none", + "none 2s linear 2s", + ], + invalid_values: [ + "1s width, 2s none", + "2s none, 1s width", + "2s inherit", + "inherit 2s", + "2s width, 1s inherit", + "2s inherit, 1s width", + "2s initial", + "1s width,,2s color", + "1s width, ,2s color", + "bounce 1s cubic-bezier(0, rubbish) 2s", + "bounce 1s steps(rubbish) 2s", + "2s unset", + ], }, "transition-delay": { domProp: "transitionDelay", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0s", "0ms" ], - other_values: [ "1s", "250ms", "-100ms", "-1s", "1s, 250ms, 2.3s"], - invalid_values: [ "0", "0px" ] + initial_values: ["0s", "0ms"], + other_values: ["1s", "250ms", "-100ms", "-1s", "1s, 250ms, 2.3s"], + invalid_values: ["0", "0px"], }, "transition-duration": { domProp: "transitionDuration", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0s", "0ms" ], - other_values: [ "1s", "250ms", "1s, 250ms, 2.3s"], - invalid_values: [ "0", "0px", "-1ms", "-2s" ] + initial_values: ["0s", "0ms"], + other_values: ["1s", "250ms", "1s, 250ms, 2.3s"], + invalid_values: ["0", "0px", "-1ms", "-2s"], }, "transition-property": { domProp: "transitionProperty", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "all" ], - other_values: [ "none", "left", "top", "color", "width, height, opacity", "foobar", "auto", "\\32width", "-width", "-\\32width", "\\32 0width", "-\\32 0width", "\\2width", "-\\2width", "all, all", "all, color", "color, all", "--my-color" ], - invalid_values: [ "none, none", "color, none", "none, color", "inherit, color", "color, inherit", "initial, color", "color, initial", "none, color", "color, none", "unset, color", "color, unset" ] + initial_values: ["all"], + other_values: [ + "none", + "left", + "top", + "color", + "width, height, opacity", + "foobar", + "auto", + "\\32width", + "-width", + "-\\32width", + "\\32 0width", + "-\\32 0width", + "\\2width", + "-\\2width", + "all, all", + "all, color", + "color, all", + "--my-color", + ], + invalid_values: [ + "none, none", + "color, none", + "none, color", + "inherit, color", + "color, inherit", + "initial, color", + "color, initial", + "none, color", + "color, none", + "unset, color", + "color, unset", + ], }, "transition-timing-function": { domProp: "transitionTimingFunction", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "ease" ], - other_values: [ "cubic-bezier(0.25, 0.1, 0.25, 1.0)", "linear", "ease-in", "ease-out", "ease-in-out", "linear, ease-in, cubic-bezier(0.1, 0.2, 0.8, 0.9)", "cubic-bezier(0.5, 0.5, 0.5, 0.5)", "cubic-bezier(0.25, 1.5, 0.75, -0.5)", "step-start", "step-end", "steps(1)", "steps(2, start)", "steps(386)", "steps(3, end)" ], - invalid_values: [ "none", "auto", "cubic-bezier(0.25, 0.1, 0.25)", "cubic-bezier(0.25, 0.1, 0.25, 0.25, 1.0)", "cubic-bezier(-0.5, 0.5, 0.5, 0.5)", "cubic-bezier(1.5, 0.5, 0.5, 0.5)", "cubic-bezier(0.5, 0.5, -0.5, 0.5)", "cubic-bezier(0.5, 0.5, 1.5, 0.5)", "steps(2, step-end)", "steps(0)", "steps(-2)", "steps(0, step-end, 1)" ] + initial_values: ["ease"], + other_values: [ + "cubic-bezier(0.25, 0.1, 0.25, 1.0)", + "linear", + "ease-in", + "ease-out", + "ease-in-out", + "linear, ease-in, cubic-bezier(0.1, 0.2, 0.8, 0.9)", + "cubic-bezier(0.5, 0.5, 0.5, 0.5)", + "cubic-bezier(0.25, 1.5, 0.75, -0.5)", + "step-start", + "step-end", + "steps(1)", + "steps(2, start)", + "steps(386)", + "steps(3, end)", + ], + invalid_values: [ + "none", + "auto", + "cubic-bezier(0.25, 0.1, 0.25)", + "cubic-bezier(0.25, 0.1, 0.25, 0.25, 1.0)", + "cubic-bezier(-0.5, 0.5, 0.5, 0.5)", + "cubic-bezier(1.5, 0.5, 0.5, 0.5)", + "cubic-bezier(0.5, 0.5, -0.5, 0.5)", + "cubic-bezier(0.5, 0.5, 1.5, 0.5)", + "steps(2, step-end)", + "steps(0)", + "steps(-2)", + "steps(0, step-end, 1)", + ], }, "unicode-bidi": { domProp: "unicodeBidi", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_marker: true, - initial_values: [ "normal" ], - other_values: [ "embed", "bidi-override", "isolate", "plaintext", "isolate-override" ], - invalid_values: [ "auto", "none", "-moz-isolate", "-moz-plaintext", "-moz-isolate-override" ] + initial_values: ["normal"], + other_values: [ + "embed", + "bidi-override", + "isolate", + "plaintext", + "isolate-override", + ], + invalid_values: [ + "auto", + "none", + "-moz-isolate", + "-moz-plaintext", + "-moz-isolate-override", + ], }, "vertical-align": { domProp: "verticalAlign", @@ -5043,8 +7857,21 @@ var gCSSProperties = { applies_to_first_letter: true, applies_to_first_line: true, applies_to_placeholder: true, - initial_values: [ "baseline" ], - other_values: [ "sub", "super", "top", "text-top", "middle", "bottom", "text-bottom", "-moz-middle-with-baseline", "15%", "3px", "0.2em", "-5px", "-3%", + initial_values: ["baseline"], + other_values: [ + "sub", + "super", + "top", + "text-top", + "middle", + "bottom", + "text-bottom", + "-moz-middle-with-baseline", + "15%", + "3px", + "0.2em", + "-5px", + "-3%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -5052,17 +7879,17 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], quirks_values: { "5": "5px" }, }, - "visibility": { + visibility: { domProp: "visibility", inherited: true, type: CSS_TYPE_LONGHAND, applies_to_cue: true, - initial_values: [ "visible" ], - other_values: [ "hidden", "collapse" ], - invalid_values: [] + initial_values: ["visible"], + other_values: ["hidden", "collapse"], + invalid_values: [], }, "white-space": { domProp: "whiteSpace", @@ -5070,38 +7897,71 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_placeholder: true, applies_to_cue: true, - initial_values: [ "normal" ], - other_values: [ "pre", "nowrap", "pre-wrap", "pre-line", "-moz-pre-space", "break-spaces" ], - invalid_values: [] + initial_values: ["normal"], + other_values: [ + "pre", + "nowrap", + "pre-wrap", + "pre-line", + "-moz-pre-space", + "break-spaces", + ], + invalid_values: [], }, - "width": { + width: { domProp: "width", inherited: false, type: CSS_TYPE_LONGHAND, prerequisites: { // computed value tests for width test more with display:block - "display": "block", + display: "block", // add some margin to avoid the initial "auto" value getting // resolved to the same length as the parent element. "margin-left": "5px", }, - initial_values: [ " auto" ], + initial_values: [" auto"], /* XXX these have prerequisites */ - other_values: [ "15px", "3em", "15%", + other_values: [ + "15px", + "3em", + "15%", // these three keywords compute to the initial value only when the // writing mode is vertical, and we're testing with a horizontal // writing mode - "max-content", "min-content", "-moz-fit-content", + "max-content", + "min-content", + "-moz-fit-content", // these two keywords are the aliases of above first two. - "-moz-max-content", "-moz-min-content", + "-moz-max-content", + "-moz-min-content", // whether -moz-available computes to the initial value depends on // the container size, and for the container size we're testing // with, it does // "-moz-available", - "3e1px", "3e+1px", "3e0px", "3e+0px", "3e-0px", "3e-1px", - "3.2e1px", "3.2e+1px", "3.2e0px", "3.2e+0px", "3.2e-0px", "3.2e-1px", - "3e1%", "3e+1%", "3e0%", "3e+0%", "3e-0%", "3e-1%", - "3.2e1%", "3.2e+1%", "3.2e0%", "3.2e+0%", "3.2e-0%", "3.2e-1%", + "3e1px", + "3e+1px", + "3e0px", + "3e+0px", + "3e-0px", + "3e-1px", + "3.2e1px", + "3.2e+1px", + "3.2e0px", + "3.2e+0px", + "3.2e-0px", + "3.2e-1px", + "3e1%", + "3e+1%", + "3e0%", + "3e+0%", + "3e-0%", + "3e-1%", + "3.2e1%", + "3.2e+1%", + "3.2e0%", + "3.2e+0%", + "3.2e-0%", + "3.2e-1%", /* valid calc() values */ "calc(-2px)", "calc(2px)", @@ -5129,8 +7989,10 @@ var gCSSProperties = { "calc(50px/2)", "calc(50px/(2 - 1))", ], - invalid_values: [ "none", "-2px", - "content", /* (valid for 'flex-basis' but not 'width') */ + invalid_values: [ + "none", + "-2px", + "content" /* (valid for 'flex-basis' but not 'width') */, /* invalid calc() values */ "calc(50%+ 2px)", "calc(50% +2px)", @@ -5165,17 +8027,37 @@ var gCSSProperties = { domProp: "willChange", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "scroll-position", "contents", "transform", "opacity", "scroll-position, transform", "transform, opacity", "contents, transform", "property-that-doesnt-exist-yet" ], - invalid_values: [ "none", "all", "default", "auto, scroll-position", "scroll-position, auto", "transform scroll-position", ",", "trailing,", "will-change", "transform, will-change" ] + initial_values: ["auto"], + other_values: [ + "scroll-position", + "contents", + "transform", + "opacity", + "scroll-position, transform", + "transform, opacity", + "contents, transform", + "property-that-doesnt-exist-yet", + ], + invalid_values: [ + "none", + "all", + "default", + "auto, scroll-position", + "scroll-position, auto", + "transform scroll-position", + ",", + "trailing,", + "will-change", + "transform, will-change", + ], }, "word-break": { domProp: "wordBreak", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "break-all", "keep-all" ], - invalid_values: [] + initial_values: ["normal"], + other_values: ["break-all", "keep-all"], + invalid_values: [], }, "word-spacing": { domProp: "wordSpacing", @@ -5184,14 +8066,21 @@ var gCSSProperties = { applies_to_first_letter: true, applies_to_first_line: true, applies_to_placeholder: true, - initial_values: [ "normal", "0", "0px", "-0em", - "calc(-0px)", "calc(0em)" - ], - other_values: [ "1em", "2px", "-3px", "0%", "50%", "-120%", - "calc(1em)", "calc(1em + 3px)", - "calc(15px / 2)", "calc(15px/2)", - "calc(-2em)", "calc(0% + 0px)", - "calc(-10%/2 - 1em)" + initial_values: ["normal", "0", "0px", "-0em", "calc(-0px)", "calc(0em)"], + other_values: [ + "1em", + "2px", + "-3px", + "0%", + "50%", + "-120%", + "calc(1em)", + "calc(1em + 3px)", + "calc(15px / 2)", + "calc(15px/2)", + "calc(-2em)", + "calc(0% + 0px)", + "calc(-10%/2 - 1em)", ], invalid_values: [], quirks_values: { "5": "5px" }, @@ -5200,101 +8089,132 @@ var gCSSProperties = { domProp: "overflowWrap", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "break-word" ], - invalid_values: [] + initial_values: ["normal"], + other_values: ["break-word"], + invalid_values: [], }, - "hyphens": { + hyphens: { domProp: "hyphens", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "manual" ], - other_values: [ "none", "auto" ], - invalid_values: [] + initial_values: ["manual"], + other_values: ["none", "auto"], + invalid_values: [], }, "z-index": { domProp: "zIndex", inherited: false, type: CSS_TYPE_LONGHAND, /* XXX requires position */ - initial_values: [ "auto" ], - other_values: [ "0", "3", "-7000", "12000" ], - invalid_values: [ "3.0", "17.5", "3e1" ] - } - , + initial_values: ["auto"], + other_values: ["0", "3", "-7000", "12000"], + invalid_values: ["3.0", "17.5", "3e1"], + }, "clip-path": { domProp: "clipPath", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], + initial_values: ["none"], other_values: [ - "url(#mypath)", "url('404.svg#mypath')", "url(#my-clip-path)" - ].concat(basicShapeSVGBoxValues).concat(basicShapeOtherValues), + "url(#mypath)", + "url('404.svg#mypath')", + "url(#my-clip-path)", + ] + .concat(basicShapeSVGBoxValues) + .concat(basicShapeOtherValues), invalid_values: basicShapeInvalidValues, - unbalanced_values: basicShapeUnbalancedValues + unbalanced_values: basicShapeUnbalancedValues, }, "clip-rule": { domProp: "clipRule", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "nonzero" ], - other_values: [ "evenodd" ], - invalid_values: [] + initial_values: ["nonzero"], + other_values: ["evenodd"], + invalid_values: [], }, "color-interpolation": { domProp: "colorInterpolation", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "sRGB" ], - other_values: [ "auto", "linearRGB" ], - invalid_values: [] + initial_values: ["sRGB"], + other_values: ["auto", "linearRGB"], + invalid_values: [], }, "color-interpolation-filters": { domProp: "colorInterpolationFilters", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "linearRGB" ], - other_values: [ "sRGB", "auto" ], - invalid_values: [] + initial_values: ["linearRGB"], + other_values: ["sRGB", "auto"], + invalid_values: [], }, "dominant-baseline": { domProp: "dominantBaseline", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "use-script", "no-change", "reset-size", "ideographic", "alphabetic", "hanging", "mathematical", "central", "middle", "text-after-edge", "text-before-edge" ], - invalid_values: [] + initial_values: ["auto"], + other_values: [ + "use-script", + "no-change", + "reset-size", + "ideographic", + "alphabetic", + "hanging", + "mathematical", + "central", + "middle", + "text-after-edge", + "text-before-edge", + ], + invalid_values: [], }, - "fill": { + fill: { domProp: "fill", inherited: true, type: CSS_TYPE_LONGHAND, - prerequisites: { "color": "blue" }, - initial_values: [ "black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)" ], - other_values: [ "green", "#fc3", "url('#myserver')", "url(foo.svg#myserver)", 'url("#myserver") green', "none", "currentColor", "context-fill", "context-stroke" ], - invalid_values: [ "000000", "ff00ff", "url('#myserver') rgb(0, rubbish, 0)" ] + prerequisites: { color: "blue" }, + initial_values: ["black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)"], + other_values: [ + "green", + "#fc3", + "url('#myserver')", + "url(foo.svg#myserver)", + 'url("#myserver") green', + "none", + "currentColor", + "context-fill", + "context-stroke", + ], + invalid_values: ["000000", "ff00ff", "url('#myserver') rgb(0, rubbish, 0)"], }, "fill-opacity": { domProp: "fillOpacity", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "1", "2.8", "1.000", ], - other_values: [ "0", "0.3", "-7.3", "context-fill-opacity", "context-stroke-opacity" ], - invalid_values: [] + initial_values: ["1", "2.8", "1.000"], + other_values: [ + "0", + "0.3", + "-7.3", + "context-fill-opacity", + "context-stroke-opacity", + ], + invalid_values: [], }, "fill-rule": { domProp: "fillRule", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "nonzero" ], - other_values: [ "evenodd" ], - invalid_values: [] + initial_values: ["nonzero"], + other_values: ["evenodd"], + invalid_values: [], }, - "filter": { + filter: { domProp: "filter", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], + initial_values: ["none"], other_values: [ // SVG reference filters "url(#my-filter)", @@ -5349,7 +8269,7 @@ var gCSSProperties = { "drop-shadow(green 2px 2px)", "drop-shadow(green 2px 2px 1px)", "drop-shadow(currentColor 3px 3px)", - "drop-shadow(2px 2px calc(-5px))", /* clamped */ + "drop-shadow(2px 2px calc(-5px))" /* clamped */, "drop-shadow(calc(3em - 2px) 2px green)", "drop-shadow(green calc(3em - 2px) 2px)", "drop-shadow(2px calc(2px + 0.2em))", @@ -5522,46 +8442,52 @@ var gCSSProperties = { "sepia(#my-filter)", "sepia(10px)", "sepia(-1)", - ] + ], }, "flood-color": { domProp: "floodColor", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "color": "blue" }, - initial_values: [ "black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)" ], - other_values: [ "green", "#fc3", "currentColor" ], - invalid_values: [ "url('#myserver')", "url(foo.svg#myserver)", 'url("#myserver") green', "000000", "ff00ff" ] + prerequisites: { color: "blue" }, + initial_values: ["black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)"], + other_values: ["green", "#fc3", "currentColor"], + invalid_values: [ + "url('#myserver')", + "url(foo.svg#myserver)", + 'url("#myserver") green', + "000000", + "ff00ff", + ], }, "flood-opacity": { domProp: "floodOpacity", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "1", "2.8", "1.000" ], - other_values: [ "0", "0.3", "-7.3" ], - invalid_values: [] + initial_values: ["1", "2.8", "1.000"], + other_values: ["0", "0.3", "-7.3"], + invalid_values: [], }, "image-orientation": { domProp: "imageOrientation", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "from-image" ], - invalid_values: [ "0", "0deg" ], + initial_values: ["none"], + other_values: ["from-image"], + invalid_values: ["0", "0deg"], }, "image-rendering": { domProp: "imageRendering", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "optimizeSpeed", "optimizeQuality", "-moz-crisp-edges" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["optimizeSpeed", "optimizeQuality", "-moz-crisp-edges"], + invalid_values: [], }, - "isolation": { + isolation: { domProp: "isolation", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: ["isolate"], invalid_values: [], }, @@ -5569,51 +8495,84 @@ var gCSSProperties = { domProp: "lightingColor", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "color": "blue" }, - initial_values: [ "white", "#fff", "#ffffff", "rgb(255,255,255)", "rgba(255,255,255,1.0)", "rgba(255,255,255,42.0)" ], - other_values: [ "green", "#fc3", "currentColor" ], - invalid_values: [ "url('#myserver')", "url(foo.svg#myserver)", 'url("#myserver") green', "000000", "ff00ff" ] + prerequisites: { color: "blue" }, + initial_values: [ + "white", + "#fff", + "#ffffff", + "rgb(255,255,255)", + "rgba(255,255,255,1.0)", + "rgba(255,255,255,42.0)", + ], + other_values: ["green", "#fc3", "currentColor"], + invalid_values: [ + "url('#myserver')", + "url(foo.svg#myserver)", + 'url("#myserver") green', + "000000", + "ff00ff", + ], }, - "marker": { + marker: { domProp: "marker", inherited: true, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "marker-start", "marker-mid", "marker-end" ], - initial_values: [ "none" ], - other_values: [ "url(#mysym)" ], - invalid_values: [ "none none", "url(#mysym) url(#mysym)", "none url(#mysym)", "url(#mysym) none" ] + subproperties: ["marker-start", "marker-mid", "marker-end"], + initial_values: ["none"], + other_values: ["url(#mysym)"], + invalid_values: [ + "none none", + "url(#mysym) url(#mysym)", + "none url(#mysym)", + "url(#mysym) none", + ], }, "marker-end": { domProp: "markerEnd", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "url(#mysym)" ], - invalid_values: [] + initial_values: ["none"], + other_values: ["url(#mysym)"], + invalid_values: [], }, "marker-mid": { domProp: "markerMid", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "url(#mysym)" ], - invalid_values: [] + initial_values: ["none"], + other_values: ["url(#mysym)"], + invalid_values: [], }, "marker-start": { domProp: "markerStart", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "url(#mysym)" ], - invalid_values: [] + initial_values: ["none"], + other_values: ["url(#mysym)"], + invalid_values: [], }, "mix-blend-mode": { domProp: "mixBlendMode", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: ["multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", - "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], + initial_values: ["normal"], + other_values: [ + "multiply", + "screen", + "overlay", + "darken", + "lighten", + "color-dodge", + "color-burn", + "hard-light", + "soft-light", + "difference", + "exclusion", + "hue", + "saturation", + "color", + "luminosity", + ], invalid_values: [], }, "shape-image-threshold": { @@ -5621,28 +8580,37 @@ var gCSSProperties = { inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "0", "0.0000", "-3", ], - other_values: [ "0.4", "1", "17", "397.376", "3e1", "3e+1", "3e-1", "3e0", "3e+0", "3e-0" ], - invalid_values: [ "0px", "1px", "20%", "default", "auto" ] + initial_values: ["0", "0.0000", "-3"], + other_values: [ + "0.4", + "1", + "17", + "397.376", + "3e1", + "3e+1", + "3e-1", + "3e0", + "3e+0", + "3e-0", + ], + invalid_values: ["0px", "1px", "20%", "default", "auto"], }, "shape-margin": { domProp: "shapeMargin", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "0", ], - other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)" ], - invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%" ], + initial_values: ["0"], + other_values: ["2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)"], + invalid_values: ["-1px", "auto", "none", "1px 1px", "-1%"], }, "shape-outside": { domProp: "shapeOutside", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "none" ], - other_values: [ - "url(#my-shape-outside)", - ].concat( + initial_values: ["none"], + other_values: ["url(#my-shape-outside)"].concat( basicShapeOtherValues, validGradientAndElementValues ), @@ -5654,311 +8622,541 @@ var gCSSProperties = { unbalanced_values: [].concat( basicShapeUnbalancedValues, unbalancedGradientAndElementValues - ) + ), }, "shape-rendering": { domProp: "shapeRendering", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "optimizeSpeed", "crispEdges", "geometricPrecision" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["optimizeSpeed", "crispEdges", "geometricPrecision"], + invalid_values: [], }, "stop-color": { domProp: "stopColor", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "color": "blue" }, - initial_values: [ "black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)" ], - other_values: [ "green", "#fc3", "currentColor" ], - invalid_values: [ "url('#myserver')", "url(foo.svg#myserver)", 'url("#myserver") green', "000000", "ff00ff" ] + prerequisites: { color: "blue" }, + initial_values: ["black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)"], + other_values: ["green", "#fc3", "currentColor"], + invalid_values: [ + "url('#myserver')", + "url(foo.svg#myserver)", + 'url("#myserver") green', + "000000", + "ff00ff", + ], }, "stop-opacity": { domProp: "stopOpacity", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "1", "2.8", "1.000" ], - other_values: [ "0", "0.3", "-7.3" ], - invalid_values: [] + initial_values: ["1", "2.8", "1.000"], + other_values: ["0", "0.3", "-7.3"], + invalid_values: [], }, - "stroke": { + stroke: { domProp: "stroke", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)", "green", "#fc3", "url('#myserver')", "url(foo.svg#myserver)", 'url("#myserver") green', "currentColor", "context-fill", "context-stroke" ], - invalid_values: [ "000000", "ff00ff" ] + initial_values: ["none"], + other_values: [ + "black", + "#000", + "#000000", + "rgb(0,0,0)", + "rgba(0,0,0,1)", + "green", + "#fc3", + "url('#myserver')", + "url(foo.svg#myserver)", + 'url("#myserver") green', + "currentColor", + "context-fill", + "context-stroke", + ], + invalid_values: ["000000", "ff00ff"], }, "stroke-dasharray": { domProp: "strokeDasharray", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "5px,3px,2px", "5px 3px 2px", " 5px ,3px\t, 2px ", "1px", "5%", "3em", "0.0002", "context-value"], - invalid_values: [ "-5px,3px,2px", "5px,3px,-2px" ] + initial_values: ["none"], + other_values: [ + "5px,3px,2px", + "5px 3px 2px", + " 5px ,3px\t, 2px ", + "1px", + "5%", + "3em", + "0.0002", + "context-value", + ], + invalid_values: ["-5px,3px,2px", "5px,3px,-2px"], }, "stroke-dashoffset": { domProp: "strokeDashoffset", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "0", "-0px", "0em" ], - other_values: [ "3px", "3%", "1em", "0.0002", "context-value" ], - invalid_values: [] + initial_values: ["0", "-0px", "0em"], + other_values: ["3px", "3%", "1em", "0.0002", "context-value"], + invalid_values: [], }, "stroke-linecap": { domProp: "strokeLinecap", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "butt" ], - other_values: [ "round", "square" ], - invalid_values: [] + initial_values: ["butt"], + other_values: ["round", "square"], + invalid_values: [], }, "stroke-linejoin": { domProp: "strokeLinejoin", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "miter" ], - other_values: [ "round", "bevel" ], - invalid_values: [] + initial_values: ["miter"], + other_values: ["round", "bevel"], + invalid_values: [], }, "stroke-miterlimit": { domProp: "strokeMiterlimit", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "4" ], - other_values: [ "0", "0.9", "1", "7", "5000", "1.1" ], - invalid_values: [ "-1", "3px", "-0.3" ] + initial_values: ["4"], + other_values: ["0", "0.9", "1", "7", "5000", "1.1"], + invalid_values: ["-1", "3px", "-0.3"], }, "stroke-opacity": { domProp: "strokeOpacity", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "1", "2.8", "1.000" ], - other_values: [ "0", "0.3", "-7.3", "context-fill-opacity", "context-stroke-opacity" ], - invalid_values: [] + initial_values: ["1", "2.8", "1.000"], + other_values: [ + "0", + "0.3", + "-7.3", + "context-fill-opacity", + "context-stroke-opacity", + ], + invalid_values: [], }, "stroke-width": { domProp: "strokeWidth", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "1px" ], - other_values: [ "0", "0px", "-0em", "17px", "0.2em", "0.0002", "context-value" ], - invalid_values: [ "-0.1px", "-3px" ] + initial_values: ["1px"], + other_values: [ + "0", + "0px", + "-0em", + "17px", + "0.2em", + "0.0002", + "context-value", + ], + invalid_values: ["-0.1px", "-3px"], }, - "x": { + x: { domProp: "x", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0px" ], - other_values: [ "-1em", "17px", "0.2em", "23.4%" ], - invalid_values: [ "auto", "context-value", "0.0002" ] + initial_values: ["0px"], + other_values: ["-1em", "17px", "0.2em", "23.4%"], + invalid_values: ["auto", "context-value", "0.0002"], }, - "y": { + y: { domProp: "y", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0px" ], - other_values: [ "-1em", "17px", "0.2em", "23.4%" ], - invalid_values: [ "auto", "context-value", "0.0002" ] + initial_values: ["0px"], + other_values: ["-1em", "17px", "0.2em", "23.4%"], + invalid_values: ["auto", "context-value", "0.0002"], }, - "cx": { + cx: { domProp: "cx", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0px" ], - other_values: [ "-1em", "17px", "0.2em", "23.4%" ], - invalid_values: [ "auto", "context-value", "0.0002" ] + initial_values: ["0px"], + other_values: ["-1em", "17px", "0.2em", "23.4%"], + invalid_values: ["auto", "context-value", "0.0002"], }, - "cy": { + cy: { domProp: "cy", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0px" ], - other_values: [ "-1em", "17px", "0.2em", "23.4%" ], - invalid_values: [ "auto", "context-value", "0.0002" ] + initial_values: ["0px"], + other_values: ["-1em", "17px", "0.2em", "23.4%"], + invalid_values: ["auto", "context-value", "0.0002"], }, - "r": { + r: { domProp: "r", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0px" ], - other_values: [ "17px", "0.2em", "23.4%" ], - invalid_values: [ "auto", "-1", "-1.5px", "0.0002" ] + initial_values: ["0px"], + other_values: ["17px", "0.2em", "23.4%"], + invalid_values: ["auto", "-1", "-1.5px", "0.0002"], }, - "rx": { + rx: { domProp: "rx", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "17px", "0.2em", "23.4%" ], - invalid_values: [ "hello", "-12px", "0.0002" ] + initial_values: ["auto"], + other_values: ["17px", "0.2em", "23.4%"], + invalid_values: ["hello", "-12px", "0.0002"], }, - "ry": { + ry: { domProp: "ry", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "17px", "0.2em", "23.4%" ], - invalid_values: [ "hello", "-1.3px", "0.0002" ] + initial_values: ["auto"], + other_values: ["17px", "0.2em", "23.4%"], + invalid_values: ["hello", "-1.3px", "0.0002"], }, "text-anchor": { domProp: "textAnchor", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "start" ], - other_values: [ "middle", "end" ], - invalid_values: [] + initial_values: ["start"], + other_values: ["middle", "end"], + invalid_values: [], }, "text-rendering": { domProp: "textRendering", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "optimizeSpeed", "optimizeLegibility", "geometricPrecision" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["optimizeSpeed", "optimizeLegibility", "geometricPrecision"], + invalid_values: [], }, "vector-effect": { domProp: "vectorEffect", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "non-scaling-stroke" ], - invalid_values: [] + initial_values: ["none"], + other_values: ["non-scaling-stroke"], + invalid_values: [], }, "-moz-window-dragging": { domProp: "MozWindowDragging", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "default" ], - other_values: [ "drag", "no-drag" ], - invalid_values: [ "none" ] + initial_values: ["default"], + other_values: ["drag", "no-drag"], + invalid_values: ["none"], }, "align-content": { domProp: "alignContent", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "start", "end", "flex-start", "flex-end", "center", - "space-between", "space-around", "space-evenly", - "first baseline", "last baseline", "baseline", "stretch", "safe start", - "unsafe end", "safe end" ], - invalid_values: [ "none", "5", "self-end", "safe", "normal unsafe", "unsafe safe", - "safe baseline", "baseline unsafe", "baseline end", "end normal", - "safe end unsafe start", "safe end unsafe", "normal safe start", - "unsafe end start", "end start safe", "space-between unsafe", - "stretch safe", "auto", "first", "last" ] + initial_values: ["normal"], + other_values: [ + "start", + "end", + "flex-start", + "flex-end", + "center", + "space-between", + "space-around", + "space-evenly", + "first baseline", + "last baseline", + "baseline", + "stretch", + "safe start", + "unsafe end", + "safe end", + ], + invalid_values: [ + "none", + "5", + "self-end", + "safe", + "normal unsafe", + "unsafe safe", + "safe baseline", + "baseline unsafe", + "baseline end", + "end normal", + "safe end unsafe start", + "safe end unsafe", + "normal safe start", + "unsafe end start", + "end start safe", + "space-between unsafe", + "stretch safe", + "auto", + "first", + "last", + ], }, "align-items": { domProp: "alignItems", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "end", "flex-start", "flex-end", "self-start", "self-end", - "center", "stretch", "first baseline", "last baseline", "baseline", - "start", "unsafe center", "safe center" ], - invalid_values: [ "space-between", "abc", "5%", "legacy", "legacy end", - "end legacy", "unsafe", "unsafe baseline", "normal unsafe", - "safe left unsafe", "safe stretch", "end end", "auto" ] + initial_values: ["normal"], + other_values: [ + "end", + "flex-start", + "flex-end", + "self-start", + "self-end", + "center", + "stretch", + "first baseline", + "last baseline", + "baseline", + "start", + "unsafe center", + "safe center", + ], + invalid_values: [ + "space-between", + "abc", + "5%", + "legacy", + "legacy end", + "end legacy", + "unsafe", + "unsafe baseline", + "normal unsafe", + "safe left unsafe", + "safe stretch", + "end end", + "auto", + ], }, "align-self": { domProp: "alignSelf", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "normal", "start", "flex-start", "flex-end", "center", "stretch", - "first baseline", "last baseline", "baseline", - "unsafe center", "self-start", "safe self-end" ], - invalid_values: [ "space-between", "abc", "30px", "stretch safe", "safe" ] + initial_values: ["auto"], + other_values: [ + "normal", + "start", + "flex-start", + "flex-end", + "center", + "stretch", + "first baseline", + "last baseline", + "baseline", + "unsafe center", + "self-start", + "safe self-end", + ], + invalid_values: ["space-between", "abc", "30px", "stretch safe", "safe"], }, "justify-content": { domProp: "justifyContent", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "start", "end", "flex-start", "flex-end", "center", "left", - "right", "space-between", "space-around", "space-evenly", - "stretch", "safe start", "unsafe end", "safe end" ], - invalid_values: [ "30px", "5%", "self-end", "safe", "normal unsafe", "unsafe safe", - "safe baseline", "baseline unsafe", "baseline end", "normal end", - "safe end unsafe start", "safe end unsafe", "normal safe start", - "unsafe end start", "end start safe", "space-around unsafe", - "safe stretch", "auto", "first", "last" ] + initial_values: ["normal"], + other_values: [ + "start", + "end", + "flex-start", + "flex-end", + "center", + "left", + "right", + "space-between", + "space-around", + "space-evenly", + "stretch", + "safe start", + "unsafe end", + "safe end", + ], + invalid_values: [ + "30px", + "5%", + "self-end", + "safe", + "normal unsafe", + "unsafe safe", + "safe baseline", + "baseline unsafe", + "baseline end", + "normal end", + "safe end unsafe start", + "safe end unsafe", + "normal safe start", + "unsafe end start", + "end start safe", + "space-around unsafe", + "safe stretch", + "auto", + "first", + "last", + ], }, "justify-items": { domProp: "justifyItems", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "legacy", "normal" ], - other_values: [ "end", "flex-start", "flex-end", "self-start", "self-end", - "center", "left", "right", "stretch", "start", - "legacy left", "right legacy", "legacy center", - "unsafe right", "unsafe left", "safe right", - "safe center" ], - invalid_values: [ "auto", "space-between", "abc", "30px", "legacy start", - "end legacy", "legacy baseline", "legacy legacy", "unsafe", - "safe legacy left", "legacy left safe", "legacy safe left", - "safe left legacy", "legacy left legacy", "baseline unsafe", - "safe unsafe", "safe left unsafe", "safe stretch", "last" ] + initial_values: ["legacy", "normal"], + other_values: [ + "end", + "flex-start", + "flex-end", + "self-start", + "self-end", + "center", + "left", + "right", + "stretch", + "start", + "legacy left", + "right legacy", + "legacy center", + "unsafe right", + "unsafe left", + "safe right", + "safe center", + ], + invalid_values: [ + "auto", + "space-between", + "abc", + "30px", + "legacy start", + "end legacy", + "legacy baseline", + "legacy legacy", + "unsafe", + "safe legacy left", + "legacy left safe", + "legacy safe left", + "safe left legacy", + "legacy left legacy", + "baseline unsafe", + "safe unsafe", + "safe left unsafe", + "safe stretch", + "last", + ], }, "justify-self": { domProp: "justifySelf", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "normal", "start", "end", "flex-start", "flex-end", "self-start", - "self-end", "center", "left", "right", "stretch", "unsafe left", - "baseline", "last baseline", "first baseline", - "unsafe right", "safe right", "safe center" ], - invalid_values: [ "space-between", "abc", "30px", "none", "first", "last", - "legacy left", "right legacy", "baseline first", "baseline last" ] + initial_values: ["auto"], + other_values: [ + "normal", + "start", + "end", + "flex-start", + "flex-end", + "self-start", + "self-end", + "center", + "left", + "right", + "stretch", + "unsafe left", + "baseline", + "last baseline", + "first baseline", + "unsafe right", + "safe right", + "safe center", + ], + invalid_values: [ + "space-between", + "abc", + "30px", + "none", + "first", + "last", + "legacy left", + "right legacy", + "baseline first", + "baseline last", + ], }, "place-content": { domProp: "placeContent", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "align-content", "justify-content" ], - initial_values: [ "normal" ], - other_values: [ "normal start", "baseline end", "end end", - "space-between flex-end", "last baseline start", - "space-evenly", "flex-start", "end", "unsafe start", "safe center", - "baseline", "last baseline" ], - invalid_values: [ "none", "center safe", "right / end" ] + subproperties: ["align-content", "justify-content"], + initial_values: ["normal"], + other_values: [ + "normal start", + "baseline end", + "end end", + "space-between flex-end", + "last baseline start", + "space-evenly", + "flex-start", + "end", + "unsafe start", + "safe center", + "baseline", + "last baseline", + ], + invalid_values: ["none", "center safe", "right / end"], }, "place-items": { domProp: "placeItems", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "align-items", "justify-items" ], - initial_values: [ "normal" ], - other_values: [ "normal center", "baseline end", "end legacy", - "end", "flex-end left", "last baseline start", "stretch", - "safe center", "end legacy left" ], - invalid_values: [ "space-between", "start space-evenly", "none", "end/end", - "center safe", "auto start" ] + subproperties: ["align-items", "justify-items"], + initial_values: ["normal"], + other_values: [ + "normal center", + "baseline end", + "end legacy", + "end", + "flex-end left", + "last baseline start", + "stretch", + "safe center", + "end legacy left", + ], + invalid_values: [ + "space-between", + "start space-evenly", + "none", + "end/end", + "center safe", + "auto start", + ], }, "place-self": { domProp: "placeSelf", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "align-self", "justify-self" ], - initial_values: [ "auto" ], - other_values: [ "normal start", "first baseline end", "end auto", - "end", "normal", "baseline start", "baseline", - "start baseline", "self-end left", "last baseline start", - "stretch" ], - invalid_values: [ "space-between", "start space-evenly", "none", "end safe", - "auto legacy left", "legacy left", "auto/auto" ] + subproperties: ["align-self", "justify-self"], + initial_values: ["auto"], + other_values: [ + "normal start", + "first baseline end", + "end auto", + "end", + "normal", + "baseline start", + "baseline", + "start baseline", + "self-end left", + "last baseline start", + "stretch", + ], + invalid_values: [ + "space-between", + "start space-evenly", + "none", + "end safe", + "auto legacy left", + "legacy left", + "auto/auto", + ], }, - "flex": { + flex: { domProp: "flex", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ - "flex-grow", - "flex-shrink", - "flex-basis" - ], - initial_values: [ "0 1 auto", "auto 0 1", "0 auto", "auto 0" ], + subproperties: ["flex-grow", "flex-shrink", "flex-basis"], + initial_values: ["0 1 auto", "auto 0 1", "0 auto", "auto 0"], other_values: [ "none", "1", @@ -5978,7 +9176,7 @@ var gCSSProperties = { "1 2 max-content", "max-content 1", "max-content 1 2", - "-0" + "-0", ], invalid_values: [ "1 2px 3", @@ -5988,24 +9186,29 @@ var gCSSProperties = { "-1", "1 -1", "0 1 calc(0px + rubbish)", - ] + ], }, "flex-basis": { domProp: "flexBasis", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ " auto" ], - // NOTE: Besides "content", this is cribbed directly from the "width" - // chunk, since this property takes the exact same values as width - // (plus 'content' & with different semantics on 'auto'). - // XXXdholbert (Maybe these should get separated out into - // a reusable array defined at the top of this file?) + initial_values: [" auto"], + // NOTE: Besides "content", this is cribbed directly from the "width" + // chunk, since this property takes the exact same values as width + // (plus 'content' & with different semantics on 'auto'). + // XXXdholbert (Maybe these should get separated out into + // a reusable array defined at the top of this file?) other_values: [ "content", - "15px", "3em", "15%", - "max-content", "min-content", - "-moz-max-content", "-moz-min-content", - "-moz-fit-content", "-moz-available", + "15px", + "3em", + "15%", + "max-content", + "min-content", + "-moz-max-content", + "-moz-min-content", + "-moz-fit-content", + "-moz-available", // valid calc() values "calc(-2px)", "calc(2px)", @@ -6031,9 +9234,11 @@ var gCSSProperties = { "calc(2em)", "calc(50%)", "calc(50px/2)", - "calc(50px/(2 - 1))" + "calc(50px/(2 - 1))", ], - invalid_values: [ "none", "-2px", + invalid_values: [ + "none", + "-2px", // invalid calc() values "calc(50%+ 2px)", "calc(50% +2px)", @@ -6059,26 +9264,23 @@ var gCSSProperties = { "calc((3em / 100%) * 3em)", "calc(3em / 100% * 3em)", "calc(3em * (3em / 100%))", - "calc(3em * 3em / 100%)" - ] + "calc(3em * 3em / 100%)", + ], }, "flex-direction": { domProp: "flexDirection", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "row" ], - other_values: [ "row-reverse", "column", "column-reverse" ], - invalid_values: [ "10px", "30%", "justify", "column wrap" ] + initial_values: ["row"], + other_values: ["row-reverse", "column", "column-reverse"], + invalid_values: ["10px", "30%", "justify", "column wrap"], }, "flex-flow": { domProp: "flexFlow", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ - "flex-direction", - "flex-wrap" - ], - initial_values: [ "row nowrap", "nowrap row", "row", "nowrap" ], + subproperties: ["flex-direction", "flex-wrap"], + initial_values: ["row nowrap", "nowrap row", "row", "nowrap"], other_values: [ // only specifying one property: "column", @@ -6107,40 +9309,43 @@ var gCSSProperties = { "nowrap row wrap-reverse", "row nowrap wrap-reverse", // Invalid data-type / invalid keyword type: - "1px", "5%", "justify", "none" - ] + "1px", + "5%", + "justify", + "none", + ], }, "flex-grow": { domProp: "flexGrow", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0" ], - other_values: [ "3", "1", "1.0", "2.5", "123" ], - invalid_values: [ "0px", "-5", "1%", "3em", "stretch", "auto" ] + initial_values: ["0"], + other_values: ["3", "1", "1.0", "2.5", "123"], + invalid_values: ["0px", "-5", "1%", "3em", "stretch", "auto"], }, "flex-shrink": { domProp: "flexShrink", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "1" ], - other_values: [ "3", "0", "0.0", "2.5", "123" ], - invalid_values: [ "0px", "-5", "1%", "3em", "stretch", "auto" ] + initial_values: ["1"], + other_values: ["3", "0", "0.0", "2.5", "123"], + invalid_values: ["0px", "-5", "1%", "3em", "stretch", "auto"], }, "flex-wrap": { domProp: "flexWrap", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "nowrap" ], - other_values: [ "wrap", "wrap-reverse" ], - invalid_values: [ "10px", "30%", "justify", "column wrap", "auto" ] + initial_values: ["nowrap"], + other_values: ["wrap", "wrap-reverse"], + invalid_values: ["10px", "30%", "justify", "column wrap", "auto"], }, - "order": { + order: { domProp: "order", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0" ], - other_values: [ "1", "99999", "-1", "-50" ], - invalid_values: [ "0px", "1.0", "1.", "1%", "0.2", "3em", "stretch" ] + initial_values: ["0"], + other_values: ["1", "99999", "-1", "-50"], + invalid_values: ["0px", "1.0", "1.", "1%", "0.2", "3em", "stretch"], }, // Aliases @@ -6149,154 +9354,174 @@ var gCSSProperties = { inherited: true, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "overflow-wrap", - subproperties: [ "overflow-wrap" ], + subproperties: ["overflow-wrap"], }, "-moz-transform": { domProp: "MozTransform", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transform", - subproperties: [ "transform" ], + subproperties: ["transform"], }, "-moz-transform-origin": { domProp: "MozTransformOrigin", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transform-origin", - subproperties: [ "transform-origin" ], + subproperties: ["transform-origin"], }, "-moz-perspective-origin": { domProp: "MozPerspectiveOrigin", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "perspective-origin", - subproperties: [ "perspective-origin" ], + subproperties: ["perspective-origin"], }, "-moz-perspective": { domProp: "MozPerspective", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "perspective", - subproperties: [ "perspective" ], + subproperties: ["perspective"], }, "-moz-backface-visibility": { domProp: "MozBackfaceVisibility", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "backface-visibility", - subproperties: [ "backface-visibility" ], + subproperties: ["backface-visibility"], }, "-moz-transform-style": { domProp: "MozTransformStyle", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transform-style", - subproperties: [ "transform-style" ], + subproperties: ["transform-style"], }, "-moz-border-image": { domProp: "MozBorderImage", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "border-image", - subproperties: [ "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat" ], + subproperties: [ + "border-image-source", + "border-image-slice", + "border-image-width", + "border-image-outset", + "border-image-repeat", + ], }, "-moz-transition": { domProp: "MozTransition", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "transition", - subproperties: [ "transition-property", "transition-duration", "transition-timing-function", "transition-delay" ], + subproperties: [ + "transition-property", + "transition-duration", + "transition-timing-function", + "transition-delay", + ], }, "-moz-transition-delay": { domProp: "MozTransitionDelay", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transition-delay", - subproperties: [ "transition-delay" ], + subproperties: ["transition-delay"], }, "-moz-transition-duration": { domProp: "MozTransitionDuration", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transition-duration", - subproperties: [ "transition-duration" ], + subproperties: ["transition-duration"], }, "-moz-transition-property": { domProp: "MozTransitionProperty", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transition-property", - subproperties: [ "transition-property" ], + subproperties: ["transition-property"], }, "-moz-transition-timing-function": { domProp: "MozTransitionTimingFunction", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transition-timing-function", - subproperties: [ "transition-timing-function" ], + subproperties: ["transition-timing-function"], }, "-moz-animation": { domProp: "MozAnimation", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "animation", - subproperties: [ "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-direction", "animation-fill-mode", "animation-iteration-count", "animation-play-state" ], + subproperties: [ + "animation-name", + "animation-duration", + "animation-timing-function", + "animation-delay", + "animation-direction", + "animation-fill-mode", + "animation-iteration-count", + "animation-play-state", + ], }, "-moz-animation-delay": { domProp: "MozAnimationDelay", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-delay", - subproperties: [ "animation-delay" ], + subproperties: ["animation-delay"], }, "-moz-animation-direction": { domProp: "MozAnimationDirection", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-direction", - subproperties: [ "animation-direction" ], + subproperties: ["animation-direction"], }, "-moz-animation-duration": { domProp: "MozAnimationDuration", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-duration", - subproperties: [ "animation-duration" ], + subproperties: ["animation-duration"], }, "-moz-animation-fill-mode": { domProp: "MozAnimationFillMode", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-fill-mode", - subproperties: [ "animation-fill-mode" ], + subproperties: ["animation-fill-mode"], }, "-moz-animation-iteration-count": { domProp: "MozAnimationIterationCount", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-iteration-count", - subproperties: [ "animation-iteration-count" ], + subproperties: ["animation-iteration-count"], }, "-moz-animation-name": { domProp: "MozAnimationName", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-name", - subproperties: [ "animation-name" ], + subproperties: ["animation-name"], }, "-moz-animation-play-state": { domProp: "MozAnimationPlayState", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-play-state", - subproperties: [ "animation-play-state" ], + subproperties: ["animation-play-state"], }, "-moz-animation-timing-function": { domProp: "MozAnimationTimingFunction", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-timing-function", - subproperties: [ "animation-timing-function" ], + subproperties: ["animation-timing-function"], }, "-moz-font-feature-settings": { domProp: "MozFontFeatureSettings", @@ -6308,7 +9533,7 @@ var gCSSProperties = { applies_to_placeholder: true, applies_to_cue: true, alias_for: "font-feature-settings", - subproperties: [ "font-feature-settings" ], + subproperties: ["font-feature-settings"], }, "-moz-font-language-override": { domProp: "MozFontLanguageOverride", @@ -6320,31 +9545,46 @@ var gCSSProperties = { applies_to_placeholder: true, applies_to_cue: true, alias_for: "font-language-override", - subproperties: [ "font-language-override" ], + subproperties: ["font-language-override"], }, "-moz-hyphens": { domProp: "MozHyphens", inherited: true, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "hyphens", - subproperties: [ "hyphens" ], + subproperties: ["hyphens"], }, // vertical text properties "writing-mode": { domProp: "writingMode", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "horizontal-tb", "lr", "lr-tb", "rl", "rl-tb" ], - other_values: [ "vertical-lr", "vertical-rl", "sideways-rl", "sideways-lr", "tb", "tb-rl" ], - invalid_values: [ "10px", "30%", "justify", "auto", "1em" ] + initial_values: ["horizontal-tb", "lr", "lr-tb", "rl", "rl-tb"], + other_values: [ + "vertical-lr", + "vertical-rl", + "sideways-rl", + "sideways-lr", + "tb", + "tb-rl", + ], + invalid_values: ["10px", "30%", "justify", "auto", "1em"], }, "text-orientation": { domProp: "textOrientation", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "mixed" ], - other_values: [ "upright", "sideways", "sideways-right" ], /* sideways-right alias for backward compatibility */ - invalid_values: [ "none", "3em", "sideways-left" ] /* sideways-left removed from CSS Writing Modes */ + initial_values: ["mixed"], + other_values: [ + "upright", + "sideways", + "sideways-right", + ] /* sideways-right alias for backward compatibility */, + invalid_values: [ + "none", + "3em", + "sideways-left", + ] /* sideways-left removed from CSS Writing Modes */, }, "block-size": { domProp: "blockSize", @@ -6353,47 +9593,92 @@ var gCSSProperties = { logical: true, axis: true, /* XXX testing auto has prerequisites */ - initial_values: [ "auto" ], - prerequisites: { "display": "block" }, - other_values: [ "15px", "3em", "15%", + initial_values: ["auto"], + prerequisites: { display: "block" }, + other_values: [ + "15px", + "3em", + "15%", // These keywords are treated as initial value. - "max-content", "min-content", "-moz-fit-content", "-moz-available", - "-moz-max-content", "-moz-min-content", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", + "-moz-max-content", + "-moz-min-content", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "none" ], + invalid_values: ["none"], }, "border-block": { domProp: "borderBlock", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-block-start-color", "border-block-start-style", "border-block-start-width", - "border-block-end-color", "border-block-end-style", "border-block-end-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 solid green" ] + subproperties: [ + "border-block-start-color", + "border-block-start-style", + "border-block-start-width", + "border-block-end-color", + "border-block-end-style", + "border-block-end-width", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: ["5%", "5", "5 solid green"], }, "border-block-end": { domProp: "borderBlockEnd", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-block-end-color", "border-block-end-style", "border-block-end-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 solid green" ] + subproperties: [ + "border-block-end-color", + "border-block-end-style", + "border-block-end-width", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: ["5%", "5", "5 solid green"], }, "border-block-color": { domProp: "borderBlockColor", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-block-start-color", "border-block-end-color" ], - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5) blue", "blue transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ] + subproperties: ["border-block-start-color", "border-block-end-color"], + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5) blue", "blue transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"], }, "border-block-end-color": { domProp: "borderBlockEndColor", @@ -6401,19 +9686,27 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, logical: true, - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ] + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"], }, "border-block-style": { domProp: "borderBlockStyle", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-block-start-style", "border-block-end-style" ], - initial_values: [ "none" ], - other_values: [ "solid", "dashed solid", "solid dotted", "double double", "inset outset", - "inset double", "none groove", "ridge none" ], - invalid_values: [] + subproperties: ["border-block-start-style", "border-block-end-style"], + initial_values: ["none"], + other_values: [ + "solid", + "dashed solid", + "solid dotted", + "double double", + "inset outset", + "inset double", + "none groove", + "ridge none", + ], + invalid_values: [], }, "border-block-end-style": { domProp: "borderBlockEndStyle", @@ -6422,25 +9715,43 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, /* XXX hidden is sometimes the same as initial */ - initial_values: [ "none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + ], + invalid_values: [], }, "border-block-width": { domProp: "borderBlockWidth", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-block-start-width", "border-block-end-width" ], + subproperties: ["border-block-start-width", "border-block-end-width"], prerequisites: { "border-style": "solid" }, - initial_values: [ "medium", "3px", "medium medium" ], - other_values: [ "thin", "thick", "1px", "2em", - "calc(2px)", "calc(2px) thin", - "calc(-2px)", "calc(-2px) thick", - "calc(0em)", "medium calc(0em)", - "calc(0px)", "1px calc(0px)", - "calc(5em)", "1em calc(5em)", + initial_values: ["medium", "3px", "medium medium"], + other_values: [ + "thin", + "thick", + "1px", + "2em", + "calc(2px)", + "calc(2px) thin", + "calc(-2px)", + "calc(-2px) thick", + "calc(0em)", + "medium calc(0em)", + "calc(0px)", + "1px calc(0px)", + "calc(5em)", + "1em calc(5em)", ], - invalid_values: [ "5%", "5", "5 thin", "thin 5%", "blue", "solid" ] + invalid_values: ["5%", "5", "5 thin", "thin 5%", "blue", "solid"], }, "border-block-end-width": { domProp: "borderBlockEndWidth", @@ -6449,8 +9760,12 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, prerequisites: { "border-block-end-style": "solid" }, - initial_values: [ "medium", "3px", "calc(4px - 1px)" ], - other_values: [ "thin", "thick", "1px", "2em", + initial_values: ["medium", "3px", "calc(4px - 1px)"], + other_values: [ + "thin", + "thick", + "1px", + "2em", "calc(2px)", "calc(-2px)", "calc(0em)", @@ -6460,16 +9775,34 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "5%", "5" ] + invalid_values: ["5%", "5"], }, "border-block-start": { domProp: "borderBlockStart", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "border-block-start-color", "border-block-start-style", "border-block-start-width" ], - initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ], - other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ], - invalid_values: [ "5%", "5", "5 solid green" ] + subproperties: [ + "border-block-start-color", + "border-block-start-style", + "border-block-start-width", + ], + initial_values: [ + "none", + "medium", + "currentColor", + "thin", + "none medium currentcolor", + ], + other_values: [ + "solid", + "green", + "medium solid", + "green solid", + "10px solid", + "thick solid", + "5px green none", + ], + invalid_values: ["5%", "5", "5 solid green"], }, "border-block-start-color": { domProp: "borderBlockStartColor", @@ -6477,9 +9810,9 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, logical: true, - initial_values: [ "currentColor" ], - other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ] + initial_values: ["currentColor"], + other_values: ["green", "rgba(255,128,0,0.5)", "transparent"], + invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"], }, "border-block-start-style": { domProp: "borderBlockStartStyle", @@ -6488,9 +9821,18 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, /* XXX hidden is sometimes the same as initial */ - initial_values: [ "none" ], - other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ], - invalid_values: [] + initial_values: ["none"], + other_values: [ + "solid", + "dashed", + "dotted", + "double", + "outset", + "inset", + "groove", + "ridge", + ], + invalid_values: [], }, "border-block-start-width": { domProp: "borderBlockStartWidth", @@ -6499,8 +9841,12 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, prerequisites: { "border-block-start-style": "solid" }, - initial_values: [ "medium", "3px", "calc(4px - 1px)" ], - other_values: [ "thin", "thick", "1px", "2em", + initial_values: ["medium", "3px", "calc(4px - 1px)"], + other_values: [ + "thin", + "thick", + "1px", + "2em", "calc(2px)", "calc(-2px)", "calc(0em)", @@ -6510,14 +9856,18 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "5%", "5" ] + invalid_values: ["5%", "5"], }, "-moz-border-end": { domProp: "MozBorderEnd", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "border-inline-end", - subproperties: [ "-moz-border-end-color", "-moz-border-end-style", "-moz-border-end-width" ], + subproperties: [ + "-moz-border-end-color", + "-moz-border-end-style", + "-moz-border-end-width", + ], }, "-moz-border-end-color": { domProp: "MozBorderEndColor", @@ -6525,7 +9875,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-inline-end-color", - subproperties: [ "border-inline-end-color" ], + subproperties: ["border-inline-end-color"], }, "-moz-border-end-style": { domProp: "MozBorderEndStyle", @@ -6533,7 +9883,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-inline-end-style", - subproperties: [ "border-inline-end-style" ], + subproperties: ["border-inline-end-style"], }, "-moz-border-end-width": { domProp: "MozBorderEndWidth", @@ -6541,14 +9891,18 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-inline-end-width", - subproperties: [ "border-inline-end-width" ], + subproperties: ["border-inline-end-width"], }, "-moz-border-start": { domProp: "MozBorderStart", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "border-inline-start", - subproperties: [ "-moz-border-start-color", "-moz-border-start-style", "-moz-border-start-width" ], + subproperties: [ + "-moz-border-start-color", + "-moz-border-start-style", + "-moz-border-start-width", + ], }, "-moz-border-start-color": { domProp: "MozBorderStartColor", @@ -6556,7 +9910,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-inline-start-color", - subproperties: [ "border-inline-start-color" ], + subproperties: ["border-inline-start-color"], }, "-moz-border-start-style": { domProp: "MozBorderStartStyle", @@ -6564,7 +9918,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-inline-start-style", - subproperties: [ "border-inline-start-style" ], + subproperties: ["border-inline-start-style"], }, "-moz-border-start-width": { domProp: "MozBorderStartWidth", @@ -6572,7 +9926,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-inline-start-width", - subproperties: [ "border-inline-start-width" ], + subproperties: ["border-inline-start-width"], }, "inline-size": { domProp: "inlineSize", @@ -6581,20 +9935,26 @@ var gCSSProperties = { logical: true, axis: true, /* XXX testing auto has prerequisites */ - initial_values: [ "auto" ], + initial_values: ["auto"], prerequisites: { - "display": "block", + display: "block", // add some margin to avoid the initial "auto" value getting // resolved to the same length as the parent element. "margin-left": "5px", }, - other_values: [ "15px", "3em", "15%", + other_values: [ + "15px", + "3em", + "15%", // these three keywords compute to the initial value only when the // writing mode is vertical, and we're testing with a horizontal // writing mode - "max-content", "min-content", "-moz-fit-content", + "max-content", + "min-content", + "-moz-fit-content", // these two keywords are the aliases of above first two. - "-moz-max-content", "-moz-min-content", + "-moz-max-content", + "-moz-min-content", // whether -moz-available computes to the initial value depends on // the container size, and for the container size we're testing // with, it does @@ -6605,15 +9965,18 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "none" ], + invalid_values: ["none"], }, "margin-block": { domProp: "marginBlock", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "margin-block-start", "margin-block-end" ], - initial_values: [ "0", "0px 0em" ], - other_values: [ "1px", "3em 1%", "5%", + subproperties: ["margin-block-start", "margin-block-end"], + initial_values: ["0", "0px 0em"], + other_values: [ + "1px", + "3em 1%", + "5%", "calc(2px) 1%", "calc(-2px) 1%", "calc(50%) 1%", @@ -6621,7 +9984,21 @@ var gCSSProperties = { "calc(25px*3) 1em", "calc(3*25px + 50%) calc(3*25px - 50%)", ], - invalid_values: [ "5", "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ], + invalid_values: [ + "5", + "..25px", + ".+5px", + ".px", + "-.px", + "++5px", + "-+4px", + "+-3px", + "--7px", + "+-.6px", + "-+.5px", + "++.7px", + "--.4px", + ], }, "margin-block-end": { domProp: "marginBlockEnd", @@ -6630,8 +10007,11 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, /* XXX testing auto has prerequisites */ - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)" ], - other_values: [ "1px", "2em", "5%", + initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -6639,7 +10019,20 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ], + invalid_values: [ + "..25px", + ".+5px", + ".px", + "-.px", + "++5px", + "-+4px", + "+-3px", + "--7px", + "+-.6px", + "-+.5px", + "++.7px", + "--.4px", + ], }, "margin-block-start": { domProp: "marginBlockStart", @@ -6648,8 +10041,11 @@ var gCSSProperties = { applies_to_first_letter: true, logical: true, /* XXX testing auto has prerequisites */ - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)" ], - other_values: [ "1px", "2em", "5%", + initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -6657,7 +10053,20 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ], + invalid_values: [ + "..25px", + ".+5px", + ".px", + "-.px", + "++5px", + "-+4px", + "+-3px", + "--7px", + "+-.6px", + "-+.5px", + "++.7px", + "--.4px", + ], }, "-moz-margin-end": { domProp: "MozMarginEnd", @@ -6665,7 +10074,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "margin-inline-end", - subproperties: [ "margin-inline-end" ], + subproperties: ["margin-inline-end"], }, "-moz-margin-start": { domProp: "MozMarginStart", @@ -6673,7 +10082,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "margin-inline-start", - subproperties: [ "margin-inline-start" ], + subproperties: ["margin-inline-start"], }, "max-block-size": { domProp: "maxBlockSize", @@ -6681,19 +10090,25 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, axis: true, - prerequisites: { "display": "block" }, - initial_values: [ "none" ], - other_values: [ "30px", "50%", + prerequisites: { display: "block" }, + initial_values: ["none"], + other_values: [ + "30px", + "50%", // These keywords are treated as initial value. - "max-content", "min-content", "-moz-fit-content", "-moz-available", - "-moz-max-content", "-moz-min-content", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", + "-moz-max-content", + "-moz-min-content", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "auto", "5" ] + invalid_values: ["auto", "5"], }, "max-inline-size": { domProp: "maxInlineSize", @@ -6701,22 +10116,28 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, axis: true, - prerequisites: { "display": "block" }, - initial_values: [ "none" ], - other_values: [ "30px", "50%", + prerequisites: { display: "block" }, + initial_values: ["none"], + other_values: [ + "30px", + "50%", // these four keywords compute to the initial value only when the // writing mode is vertical, and we're testing with a horizontal // writing mode - "max-content", "min-content", "-moz-fit-content", "-moz-available", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", // these two keywords are the aliases of above first two. - "-moz-max-content", "-moz-min-content", + "-moz-max-content", + "-moz-min-content", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "auto", "5" ] + invalid_values: ["auto", "5"], }, "min-block-size": { domProp: "minBlockSize", @@ -6724,12 +10145,18 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, axis: true, - prerequisites: { "display": "block" }, - initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)" ], - other_values: [ "30px", "50%", + prerequisites: { display: "block" }, + initial_values: ["auto", "0", "calc(0em)", "calc(-2px)"], + other_values: [ + "30px", + "50%", // These keywords are treated as initial value. - "max-content", "min-content", "-moz-fit-content", "-moz-available", - "-moz-max-content", "-moz-min-content", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", + "-moz-max-content", + "-moz-min-content", "calc(-1%)", "calc(2px)", "calc(50%)", @@ -6737,7 +10164,7 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "none", "5" ] + invalid_values: ["none", "5"], }, "min-inline-size": { domProp: "minInlineSize", @@ -6745,15 +10172,21 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, axis: true, - prerequisites: { "display": "block" }, - initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)" ], - other_values: [ "30px", "50%", + prerequisites: { display: "block" }, + initial_values: ["auto", "0", "calc(0em)", "calc(-2px)"], + other_values: [ + "30px", + "50%", // these four keywords compute to the initial value only when the // writing mode is vertical, and we're testing with a horizontal // writing mode - "max-content", "min-content", "-moz-fit-content", "-moz-available", + "max-content", + "min-content", + "-moz-fit-content", + "-moz-available", // these two keywords are the aliases of above first two. - "-moz-max-content", "-moz-min-content", + "-moz-max-content", + "-moz-min-content", "calc(-1%)", "calc(2px)", "calc(50%)", @@ -6761,37 +10194,54 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ "none", "5" ] + invalid_values: ["none", "5"], }, - "inset": { + inset: { domProp: "inset", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "top", "right", "bottom", "left" ], + subproperties: ["top", "right", "bottom", "left"], /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, - initial_values: [ "auto" ], - other_values: [ "3px 0", "2em 4px 2pt", "1em 2em 3px 4px", "1em calc(2em + 3px) 4ex 5cm" ], - invalid_values: [ "1px calc(nonsense)", "1px red", "3" ], - unbalanced_values: [ "1px calc(" ], + prerequisites: { position: "relative" }, + initial_values: ["auto"], + other_values: [ + "3px 0", + "2em 4px 2pt", + "1em 2em 3px 4px", + "1em calc(2em + 3px) 4ex 5cm", + ], + invalid_values: ["1px calc(nonsense)", "1px red", "3"], + unbalanced_values: ["1px calc("], }, "inset-block": { domProp: "insetBlock", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "inset-block-start", "inset-block-end" ], + subproperties: ["inset-block-start", "inset-block-end"], /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, - initial_values: [ "auto", "auto auto" ], - other_values: [ "32px", "-3em", "12%", "32px auto", "auto -3em", "12% auto", - "calc(2px)", "calc(2px) auto", - "calc(-2px)", "auto calc(-2px)", - "calc(50%)", "auto calc(50%)", - "calc(3*25px)", "calc(3*25px) auto", - "calc(25px*3)", "auto calc(25px*3)", - "calc(3*25px + 50%)", "auto calc(3*25px + 50%)", + prerequisites: { position: "relative" }, + initial_values: ["auto", "auto auto"], + other_values: [ + "32px", + "-3em", + "12%", + "32px auto", + "auto -3em", + "12% auto", + "calc(2px)", + "calc(2px) auto", + "calc(-2px)", + "auto calc(-2px)", + "calc(50%)", + "auto calc(50%)", + "calc(3*25px)", + "calc(3*25px) auto", + "calc(25px*3)", + "auto calc(25px*3)", + "calc(3*25px + 50%)", + "auto calc(3*25px + 50%)", ], - invalid_values: [ "none" ] + invalid_values: ["none"], }, "inset-block-end": { domProp: "insetBlockEnd", @@ -6799,10 +10249,13 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, + prerequisites: { position: "relative" }, /* XXX 0 may or may not be equal to auto */ - initial_values: [ "auto" ], - other_values: [ "32px", "-3em", "12%", + initial_values: ["auto"], + other_values: [ + "32px", + "-3em", + "12%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -6810,7 +10263,7 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [] + invalid_values: [], }, "inset-block-start": { domProp: "insetBlockStart", @@ -6818,10 +10271,13 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, + prerequisites: { position: "relative" }, /* XXX 0 may or may not be equal to auto */ - initial_values: [ "auto" ], - other_values: [ "32px", "-3em", "12%", + initial_values: ["auto"], + other_values: [ + "32px", + "-3em", + "12%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -6829,25 +10285,37 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [] + invalid_values: [], }, "inset-inline": { domProp: "insetInline", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "inset-inline-start", "inset-inline-end" ], + subproperties: ["inset-inline-start", "inset-inline-end"], /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, - initial_values: [ "auto", "auto auto" ], - other_values: [ "32px", "-3em", "12%", "32px auto", "auto -3em", "12% auto", - "calc(2px)", "calc(2px) auto", - "calc(-2px)", "auto calc(-2px)", - "calc(50%)", "auto calc(50%)", - "calc(3*25px)", "calc(3*25px) auto", - "calc(25px*3)", "auto calc(25px*3)", - "calc(3*25px + 50%)", "auto calc(3*25px + 50%)", + prerequisites: { position: "relative" }, + initial_values: ["auto", "auto auto"], + other_values: [ + "32px", + "-3em", + "12%", + "32px auto", + "auto -3em", + "12% auto", + "calc(2px)", + "calc(2px) auto", + "calc(-2px)", + "auto calc(-2px)", + "calc(50%)", + "auto calc(50%)", + "calc(3*25px)", + "calc(3*25px) auto", + "calc(25px*3)", + "auto calc(25px*3)", + "calc(3*25px + 50%)", + "auto calc(3*25px + 50%)", ], - invalid_values: [ "none" ] + invalid_values: ["none"], }, "inset-inline-end": { domProp: "insetInlineEnd", @@ -6855,10 +10323,13 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, + prerequisites: { position: "relative" }, /* XXX 0 may or may not be equal to auto */ - initial_values: [ "auto" ], - other_values: [ "32px", "-3em", "12%", + initial_values: ["auto"], + other_values: [ + "32px", + "-3em", + "12%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -6866,7 +10337,7 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [] + invalid_values: [], }, "inset-inline-start": { domProp: "insetInlineStart", @@ -6874,10 +10345,13 @@ var gCSSProperties = { type: CSS_TYPE_LONGHAND, logical: true, /* FIXME: run tests with multiple prerequisites */ - prerequisites: { "position": "relative" }, + prerequisites: { position: "relative" }, /* XXX 0 may or may not be equal to auto */ - initial_values: [ "auto" ], - other_values: [ "32px", "-3em", "12%", + initial_values: ["auto"], + other_values: [ + "32px", + "-3em", + "12%", "calc(2px)", "calc(-2px)", "calc(50%)", @@ -6885,7 +10359,7 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [] + invalid_values: [], }, "padding-block-end": { domProp: "paddingBlockEnd", @@ -6894,15 +10368,26 @@ var gCSSProperties = { applies_to_first_letter: true, // No applies_to_placeholder because we have a !important rule in forms.css. logical: true, - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)", "calc(-3px)", "calc(-1%)" ], - other_values: [ "1px", "2em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "calc(0pt)", + "calc(0% + 0px)", + "calc(-3px)", + "calc(-1%)", + ], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], }, "padding-block-start": { domProp: "paddingBlockStart", @@ -6911,15 +10396,26 @@ var gCSSProperties = { applies_to_first_letter: true, // No applies_to_placeholder because we have a !important rule in forms.css. logical: true, - initial_values: [ "0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)", "calc(-3px)", "calc(-1%)" ], - other_values: [ "1px", "2em", "5%", + initial_values: [ + "0", + "0px", + "0%", + "calc(0pt)", + "calc(0% + 0px)", + "calc(-3px)", + "calc(-1%)", + ], + other_values: [ + "1px", + "2em", + "5%", "calc(2px)", "calc(50%)", "calc(3*25px)", "calc(25px*3)", "calc(3*25px + 50%)", ], - invalid_values: [ ], + invalid_values: [], }, "-moz-padding-end": { domProp: "MozPaddingEnd", @@ -6927,7 +10423,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "padding-inline-end", - subproperties: [ "padding-inline-end" ], + subproperties: ["padding-inline-end"], }, "-moz-padding-start": { domProp: "MozPaddingStart", @@ -6935,77 +10431,86 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "padding-inline-start", - subproperties: [ "padding-inline-start" ], + subproperties: ["padding-inline-start"], }, "-webkit-animation": { domProp: "webkitAnimation", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "animation", - subproperties: [ "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-direction", "animation-fill-mode", "animation-iteration-count", "animation-play-state" ], + subproperties: [ + "animation-name", + "animation-duration", + "animation-timing-function", + "animation-delay", + "animation-direction", + "animation-fill-mode", + "animation-iteration-count", + "animation-play-state", + ], }, "-webkit-animation-delay": { domProp: "webkitAnimationDelay", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-delay", - subproperties: [ "animation-delay" ], + subproperties: ["animation-delay"], }, "-webkit-animation-direction": { domProp: "webkitAnimationDirection", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-direction", - subproperties: [ "animation-direction" ], + subproperties: ["animation-direction"], }, "-webkit-animation-duration": { domProp: "webkitAnimationDuration", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-duration", - subproperties: [ "animation-duration" ], + subproperties: ["animation-duration"], }, "-webkit-animation-fill-mode": { domProp: "webkitAnimationFillMode", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-fill-mode", - subproperties: [ "animation-fill-mode" ], + subproperties: ["animation-fill-mode"], }, "-webkit-animation-iteration-count": { domProp: "webkitAnimationIterationCount", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-iteration-count", - subproperties: [ "animation-iteration-count" ], + subproperties: ["animation-iteration-count"], }, "-webkit-animation-name": { domProp: "webkitAnimationName", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-name", - subproperties: [ "animation-name" ], + subproperties: ["animation-name"], }, "-webkit-animation-play-state": { domProp: "webkitAnimationPlayState", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-play-state", - subproperties: [ "animation-play-state" ], + subproperties: ["animation-play-state"], }, "-webkit-animation-timing-function": { domProp: "webkitAnimationTimingFunction", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "animation-timing-function", - subproperties: [ "animation-timing-function" ], + subproperties: ["animation-timing-function"], }, "-webkit-filter": { domProp: "webkitFilter", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "filter", - subproperties: [ "filter" ], + subproperties: ["filter"], }, "-webkit-text-fill-color": { domProp: "webkitTextFillColor", @@ -7014,20 +10519,44 @@ var gCSSProperties = { applies_to_first_letter: true, applies_to_first_line: true, applies_to_placeholder: true, - prerequisites: { "color": "black" }, - initial_values: [ "currentColor", "black", "#000", "#000000", "rgb(0,0,0)" ], - other_values: [ "red", "rgba(255,255,255,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000", "ff00ff", "rgb(255,xxx,255)" ] + prerequisites: { color: "black" }, + initial_values: ["currentColor", "black", "#000", "#000000", "rgb(0,0,0)"], + other_values: ["red", "rgba(255,255,255,0.5)", "transparent"], + invalid_values: [ + "#0", + "#00", + "#00000", + "#0000000", + "#000000000", + "000000", + "ff00ff", + "rgb(255,xxx,255)", + ], }, "-webkit-text-stroke": { domProp: "webkitTextStroke", inherited: true, type: CSS_TYPE_TRUE_SHORTHAND, - prerequisites: { "color": "black" }, - subproperties: [ "-webkit-text-stroke-width", "-webkit-text-stroke-color" ], - initial_values: [ "0 currentColor", "currentColor 0px", "0", "currentColor", "0px black" ], - other_values: [ "thin black", "#f00 medium", "thick rgba(0,0,255,0.5)", "calc(4px - 8px) green", "2px", "green 0", "currentColor 4em", "currentColor calc(5px - 1px)" ], - invalid_values: [ "-3px black", "calc(50%+ 2px) #000", "30% #f00" ] + prerequisites: { color: "black" }, + subproperties: ["-webkit-text-stroke-width", "-webkit-text-stroke-color"], + initial_values: [ + "0 currentColor", + "currentColor 0px", + "0", + "currentColor", + "0px black", + ], + other_values: [ + "thin black", + "#f00 medium", + "thick rgba(0,0,255,0.5)", + "calc(4px - 8px) green", + "2px", + "green 0", + "currentColor 4em", + "currentColor calc(5px - 1px)", + ], + invalid_values: ["-3px black", "calc(50%+ 2px) #000", "30% #f00"], }, "-webkit-text-stroke-color": { domProp: "webkitTextStrokeColor", @@ -7036,10 +10565,19 @@ var gCSSProperties = { applies_to_first_letter: true, applies_to_first_line: true, applies_to_placeholder: true, - prerequisites: { "color": "black" }, - initial_values: [ "currentColor", "black", "#000", "#000000", "rgb(0,0,0)" ], - other_values: [ "red", "rgba(255,255,255,0.5)", "transparent" ], - invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000", "ff00ff", "rgb(255,xxx,255)" ] + prerequisites: { color: "black" }, + initial_values: ["currentColor", "black", "#000", "#000000", "rgb(0,0,0)"], + other_values: ["red", "rgba(255,255,255,0.5)", "transparent"], + invalid_values: [ + "#0", + "#00", + "#00000", + "#0000000", + "#000000000", + "000000", + "ff00ff", + "rgb(255,xxx,255)", + ], }, "-webkit-text-stroke-width": { domProp: "webkitTextStrokeWidth", @@ -7048,100 +10586,125 @@ var gCSSProperties = { applies_to_first_letter: true, applies_to_first_line: true, applies_to_placeholder: true, - initial_values: [ "0", "0px", "0em", "0ex", "calc(0pt)", "calc(4px - 8px)" ], - other_values: [ "thin", "medium", "thick", "17px", "0.2em", "calc(3*25px + 5em)", "calc(5px - 1px)" ], - invalid_values: [ "5%", "1px calc(nonsense)", "1px red", "-0.1px", "-3px", "30%" ] + initial_values: ["0", "0px", "0em", "0ex", "calc(0pt)", "calc(4px - 8px)"], + other_values: [ + "thin", + "medium", + "thick", + "17px", + "0.2em", + "calc(3*25px + 5em)", + "calc(5px - 1px)", + ], + invalid_values: [ + "5%", + "1px calc(nonsense)", + "1px red", + "-0.1px", + "-3px", + "30%", + ], }, "-webkit-text-size-adjust": { domProp: "webkitTextSizeAdjust", inherited: true, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "-moz-text-size-adjust", - subproperties: [ "-moz-text-size-adjust" ], + subproperties: ["-moz-text-size-adjust"], }, "-webkit-transform": { domProp: "webkitTransform", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transform", - subproperties: [ "transform" ], + subproperties: ["transform"], }, "-webkit-transform-origin": { domProp: "webkitTransformOrigin", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transform-origin", - subproperties: [ "transform-origin" ], + subproperties: ["transform-origin"], }, "-webkit-transform-style": { domProp: "webkitTransformStyle", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transform-style", - subproperties: [ "transform-style" ], + subproperties: ["transform-style"], }, "-webkit-backface-visibility": { domProp: "webkitBackfaceVisibility", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "backface-visibility", - subproperties: [ "backface-visibility" ], + subproperties: ["backface-visibility"], }, "-webkit-perspective": { domProp: "webkitPerspective", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "perspective", - subproperties: [ "perspective" ], + subproperties: ["perspective"], }, "-webkit-perspective-origin": { domProp: "webkitPerspectiveOrigin", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "perspective-origin", - subproperties: [ "perspective-origin" ], + subproperties: ["perspective-origin"], }, "-webkit-transition": { domProp: "webkitTransition", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "transition", - subproperties: [ "transition-property", "transition-duration", "transition-timing-function", "transition-delay" ], + subproperties: [ + "transition-property", + "transition-duration", + "transition-timing-function", + "transition-delay", + ], }, "-webkit-transition-delay": { domProp: "webkitTransitionDelay", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transition-delay", - subproperties: [ "transition-delay" ], + subproperties: ["transition-delay"], }, "-webkit-transition-duration": { domProp: "webkitTransitionDuration", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transition-duration", - subproperties: [ "transition-duration" ], + subproperties: ["transition-duration"], }, "-webkit-transition-property": { domProp: "webkitTransitionProperty", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transition-property", - subproperties: [ "transition-property" ], + subproperties: ["transition-property"], }, "-webkit-transition-timing-function": { domProp: "webkitTransitionTimingFunction", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "transition-timing-function", - subproperties: [ "transition-timing-function" ], + subproperties: ["transition-timing-function"], }, "-webkit-border-radius": { domProp: "webkitBorderRadius", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "border-radius", - subproperties: [ "border-bottom-left-radius", "border-bottom-right-radius", "border-top-left-radius", "border-top-right-radius" ], + subproperties: [ + "border-bottom-left-radius", + "border-bottom-right-radius", + "border-top-left-radius", + "border-top-right-radius", + ], }, "-webkit-border-top-left-radius": { domProp: "webkitBorderTopLeftRadius", @@ -7149,7 +10712,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-top-left-radius", - subproperties: [ "border-top-left-radius" ], + subproperties: ["border-top-left-radius"], }, "-webkit-border-top-right-radius": { domProp: "webkitBorderTopRightRadius", @@ -7157,7 +10720,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-top-right-radius", - subproperties: [ "border-top-right-radius" ], + subproperties: ["border-top-right-radius"], }, "-webkit-border-bottom-left-radius": { domProp: "webkitBorderBottomLeftRadius", @@ -7165,7 +10728,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-bottom-left-radius", - subproperties: [ "border-bottom-left-radius" ], + subproperties: ["border-bottom-left-radius"], }, "-webkit-border-bottom-right-radius": { domProp: "webkitBorderBottomRightRadius", @@ -7173,7 +10736,7 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "border-bottom-right-radius", - subproperties: [ "border-bottom-right-radius" ], + subproperties: ["border-bottom-right-radius"], }, "-webkit-background-clip": { domProp: "webkitBackgroundClip", @@ -7184,7 +10747,7 @@ var gCSSProperties = { applies_to_placeholder: true, applies_to_cue: true, alias_for: "background-clip", - subproperties: [ "background-clip" ], + subproperties: ["background-clip"], }, "-webkit-background-origin": { domProp: "webkitBackgroundOrigin", @@ -7195,7 +10758,7 @@ var gCSSProperties = { applies_to_placeholder: true, applies_to_cue: true, alias_for: "background-origin", - subproperties: [ "background-origin" ], + subproperties: ["background-origin"], }, "-webkit-background-size": { domProp: "webkitBackgroundSize", @@ -7206,14 +10769,20 @@ var gCSSProperties = { applies_to_placeholder: true, applies_to_cue: true, alias_for: "background-size", - subproperties: [ "background-size" ], + subproperties: ["background-size"], }, "-webkit-border-image": { domProp: "webkitBorderImage", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "border-image", - subproperties: [ "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat" ], + subproperties: [ + "border-image-source", + "border-image-slice", + "border-image-width", + "border-image-outset", + "border-image-repeat", + ], }, "-webkit-box-shadow": { domProp: "webkitBoxShadow", @@ -7221,161 +10790,170 @@ var gCSSProperties = { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, applies_to_first_letter: true, alias_for: "box-shadow", - subproperties: [ "box-shadow" ], + subproperties: ["box-shadow"], }, "-webkit-box-sizing": { domProp: "webkitBoxSizing", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "box-sizing", - subproperties: [ "box-sizing" ], + subproperties: ["box-sizing"], }, "-webkit-box-flex": { domProp: "webkitBoxFlex", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "-moz-box-flex", - subproperties: [ "-moz-box-flex" ], + subproperties: ["-moz-box-flex"], }, "-webkit-box-ordinal-group": { domProp: "webkitBoxOrdinalGroup", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "-moz-box-ordinal-group", - subproperties: [ "-moz-box-ordinal-group" ], + subproperties: ["-moz-box-ordinal-group"], }, "-webkit-box-orient": { domProp: "webkitBoxOrient", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "-moz-box-orient", - subproperties: [ "-moz-box-orient" ], + subproperties: ["-moz-box-orient"], }, "-webkit-box-direction": { domProp: "webkitBoxDirection", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "-moz-box-direction", - subproperties: [ "-moz-box-direction" ], + subproperties: ["-moz-box-direction"], }, "-webkit-box-align": { domProp: "webkitBoxAlign", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "-moz-box-align", - subproperties: [ "-moz-box-align" ], + subproperties: ["-moz-box-align"], }, "-webkit-box-pack": { domProp: "webkitBoxPack", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "-moz-box-pack", - subproperties: [ "-moz-box-pack" ], + subproperties: ["-moz-box-pack"], }, "-webkit-flex-direction": { domProp: "webkitFlexDirection", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "flex-direction", - subproperties: [ "flex-direction" ], + subproperties: ["flex-direction"], }, "-webkit-flex-wrap": { domProp: "webkitFlexWrap", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "flex-wrap", - subproperties: [ "flex-wrap" ], + subproperties: ["flex-wrap"], }, "-webkit-flex-flow": { domProp: "webkitFlexFlow", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "flex-flow", - subproperties: [ "flex-direction", "flex-wrap" ], + subproperties: ["flex-direction", "flex-wrap"], }, "-webkit-order": { domProp: "webkitOrder", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "order", - subproperties: [ "order" ], + subproperties: ["order"], }, "-webkit-flex": { domProp: "webkitFlex", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "flex", - subproperties: [ "flex-grow", "flex-shrink", "flex-basis" ], + subproperties: ["flex-grow", "flex-shrink", "flex-basis"], }, "-webkit-flex-grow": { domProp: "webkitFlexGrow", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "flex-grow", - subproperties: [ "flex-grow" ], + subproperties: ["flex-grow"], }, "-webkit-flex-shrink": { domProp: "webkitFlexShrink", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "flex-shrink", - subproperties: [ "flex-shrink" ], + subproperties: ["flex-shrink"], }, "-webkit-flex-basis": { domProp: "webkitFlexBasis", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "flex-basis", - subproperties: [ "flex-basis" ], + subproperties: ["flex-basis"], }, "-webkit-justify-content": { domProp: "webkitJustifyContent", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "justify-content", - subproperties: [ "justify-content" ], + subproperties: ["justify-content"], }, "-webkit-align-items": { domProp: "webkitAlignItems", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "align-items", - subproperties: [ "align-items" ], + subproperties: ["align-items"], }, "-webkit-align-self": { domProp: "webkitAlignSelf", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "align-self", - subproperties: [ "align-self" ], + subproperties: ["align-self"], }, "-webkit-align-content": { domProp: "webkitAlignContent", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "align-content", - subproperties: [ "align-content" ], + subproperties: ["align-content"], }, "-webkit-user-select": { domProp: "webkitUserSelect", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "user-select", - subproperties: [ "user-select" ], + subproperties: ["user-select"], }, "-webkit-mask": { domProp: "webkitMask", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "mask", - subproperties: [ "mask-clip", "mask-image", "mask-mode", "mask-origin", "mask-position", "mask-repeat", "mask-size" , "mask-composite" ], + subproperties: [ + "mask-clip", + "mask-image", + "mask-mode", + "mask-origin", + "mask-position", + "mask-repeat", + "mask-size", + "mask-composite", + ], }, "-webkit-mask-clip": { domProp: "webkitMaskClip", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "mask-clip", - subproperties: [ "mask-clip" ], + subproperties: ["mask-clip"], }, "-webkit-mask-composite": { @@ -7383,7 +10961,7 @@ var gCSSProperties = { inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "mask-composite", - subproperties: [ "mask-composite" ], + subproperties: ["mask-composite"], }, "-webkit-mask-image": { @@ -7391,60 +10969,61 @@ var gCSSProperties = { inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "mask-image", - subproperties: [ "mask-image" ], + subproperties: ["mask-image"], }, "-webkit-mask-origin": { domProp: "webkitMaskOrigin", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "mask-origin", - subproperties: [ "mask-origin" ], + subproperties: ["mask-origin"], }, "-webkit-mask-position": { domProp: "webkitMaskPosition", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "mask-position", - subproperties: [ "mask-position" ], + subproperties: ["mask-position"], }, "-webkit-mask-position-x": { domProp: "webkitMaskPositionX", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "mask-position-x", - subproperties: [ "mask-position-x" ], + subproperties: ["mask-position-x"], }, "-webkit-mask-position-y": { domProp: "webkitMaskPositionY", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "mask-position-y", - subproperties: [ "mask-position-y" ], + subproperties: ["mask-position-y"], }, "-webkit-mask-repeat": { domProp: "webkitMaskRepeat", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "mask-repeat", - subproperties: [ "mask-repeat" ], + subproperties: ["mask-repeat"], }, "-webkit-mask-size": { domProp: "webkitMaskSize", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "mask-size", - subproperties: [ "mask-size" ], + subproperties: ["mask-size"], }, -} // end of gCSSProperties +}; // end of gCSSProperties // Get the computed value for a property. For shorthands, return the // computed values of all the subproperties, delimited by " ; ". -function get_computed_value(cs, property) -{ +function get_computed_value(cs, property) { var info = gCSSProperties[property]; - if (info.type == CSS_TYPE_TRUE_SHORTHAND || - (info.type == CSS_TYPE_SHORTHAND_AND_LONGHAND && - (property == "text-decoration" || property == "mask"))) { + if ( + info.type == CSS_TYPE_TRUE_SHORTHAND || + (info.type == CSS_TYPE_SHORTHAND_AND_LONGHAND && + (property == "text-decoration" || property == "mask")) + ) { var results = []; for (var idx in info.subproperties) { var subprop = info.subproperties[idx]; @@ -7460,75 +11039,181 @@ if (IsCSSPropertyPrefEnabled("layout.css.individual-transform.enabled")) { domProp: "rotate", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "45deg", "45grad", "72rad", "0.25turn", ".57rad", - "0 0 0 0rad", "0 0 1 45deg", "0 0 1 0rad", - "0rad 0 0 1", "10rad 10 20 30", - "x 10rad", "y 10rad", "z 10rad", - "10rad x", "10rad y", "10rad z", - /* valid calc() values */ - "calc(1) 0 0 calc(45deg + 5rad)", - "0 1 0 calc(400grad + 1rad)", - "calc(0.5turn + 10deg)"], - invalid_values: [ "0", "7", "0, 0, 1, 45deg", "0 0 45deg", "0 0 20rad", - "0 0 0 0", "x x 10rad", "x y 10rad", "0 0 1 10rad z", - "0 0 1 z 10rad", "z 0 0 1 10rad", "0 0 z 1 10rad", - /* invalid calc() values */ - "0.5 1 0 calc(45deg + 10)", "calc(0.5turn + 10%)"], + initial_values: ["none"], + other_values: [ + "45deg", + "45grad", + "72rad", + "0.25turn", + ".57rad", + "0 0 0 0rad", + "0 0 1 45deg", + "0 0 1 0rad", + "0rad 0 0 1", + "10rad 10 20 30", + "x 10rad", + "y 10rad", + "z 10rad", + "10rad x", + "10rad y", + "10rad z", + /* valid calc() values */ + "calc(1) 0 0 calc(45deg + 5rad)", + "0 1 0 calc(400grad + 1rad)", + "calc(0.5turn + 10deg)", + ], + invalid_values: [ + "0", + "7", + "0, 0, 1, 45deg", + "0 0 45deg", + "0 0 20rad", + "0 0 0 0", + "x x 10rad", + "x y 10rad", + "0 0 1 10rad z", + "0 0 1 z 10rad", + "z 0 0 1 10rad", + "0 0 z 1 10rad", + /* invalid calc() values */ + "0.5 1 0 calc(45deg + 10)", + "calc(0.5turn + 10%)", + ], }; gCSSProperties.translate = { domProp: "translate", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "width": "10px", "height": "10px", "display": "block" }, - initial_values: [ "none" ], - other_values: [ "-4px", "3px", "4em", "50%", "4px 5px 6px", - "4px 5px", "50% 5px 6px", "50% 10% 6em", - /* valid calc() values */ - "calc(5px + 10%)", - "calc(0.25 * 5px + 10% / 3)", - "calc(5px - 10% * 3)", - "calc(5px - 3 * 10%) 50px", - "-50px calc(5px - 10% * 3)"], - invalid_values: [ "1", "-moz-min(5px,10%)", "4px, 5px, 6px", - "3px 4px 1px 7px", "4px 5px 10%", - /* invalid calc() values */ - "10px calc(min(5px,10%))", - "calc(max(5px,10%) 10%)", "calc(nonsense)"], + prerequisites: { width: "10px", height: "10px", display: "block" }, + initial_values: ["none"], + other_values: [ + "-4px", + "3px", + "4em", + "50%", + "4px 5px 6px", + "4px 5px", + "50% 5px 6px", + "50% 10% 6em", + /* valid calc() values */ + "calc(5px + 10%)", + "calc(0.25 * 5px + 10% / 3)", + "calc(5px - 10% * 3)", + "calc(5px - 3 * 10%) 50px", + "-50px calc(5px - 10% * 3)", + ], + invalid_values: [ + "1", + "-moz-min(5px,10%)", + "4px, 5px, 6px", + "3px 4px 1px 7px", + "4px 5px 10%", + /* invalid calc() values */ + "10px calc(min(5px,10%))", + "calc(max(5px,10%) 10%)", + "calc(nonsense)", + ], }; gCSSProperties.scale = { domProp: "scale", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "10", "10 20", "10 20 30", "0 2.0", - /* valid calc() values */ - "calc(1 + 2)", "calc(10) calc(20) 30"], - invalid_values: ["150%", "10px", "10deg", "10, 20, 30", - /* invalid calc() values */ - "calc(1 + 20%)", "10 calc(1 + 10px)"], + initial_values: ["none"], + other_values: [ + "10", + "10 20", + "10 20 30", + "0 2.0", + /* valid calc() values */ + "calc(1 + 2)", + "calc(10) calc(20) 30", + ], + invalid_values: [ + "150%", + "10px", + "10deg", + "10, 20, 30", + /* invalid calc() values */ + "calc(1 + 20%)", + "10 calc(1 + 10px)", + ], }; } if (IsCSSPropertyPrefEnabled("layout.css.touch_action.enabled")) { - gCSSProperties["touch-action"] = { - domProp: "touchAction", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: ["auto"], - other_values: ["none", "pan-x", "pan-y", "pan-x pan-y", "pan-y pan-x", "manipulation"], - invalid_values: ["zoom", "pinch", "tap", "10px", "2", "auto pan-x", "pan-x auto", "none pan-x", "pan-x none", - "auto pan-y", "pan-y auto", "none pan-y", "pan-y none", "pan-x pan-x", "pan-y pan-y", - "pan-x pan-y none", "pan-x none pan-y", "none pan-x pan-y", "pan-y pan-x none", "pan-y none pan-x", "none pan-y pan-x", - "pan-x pan-y auto", "pan-x auto pan-y", "auto pan-x pan-y", "pan-y pan-x auto", "pan-y auto pan-x", "auto pan-y pan-x", - "pan-x pan-y zoom", "pan-x zoom pan-y", "zoom pan-x pan-y", "pan-y pan-x zoom", "pan-y zoom pan-x", "zoom pan-y pan-x", - "pan-x pan-y pan-x", "pan-x pan-x pan-y", "pan-y pan-x pan-x", "pan-y pan-x pan-y", "pan-y pan-y pan-x", "pan-x pan-y pan-y", - "manipulation none", "none manipulation", "manipulation auto", "auto manipulation", "manipulation zoom", "zoom manipulation", - "manipulation manipulation", "manipulation pan-x", "pan-x manipulation", "manipulation pan-y", "pan-y manipulation", - "manipulation pan-x pan-y", "pan-x manipulation pan-y", "pan-x pan-y manipulation", - "manipulation pan-y pan-x", "pan-y manipulation pan-x", "pan-y pan-x manipulation"] - }; + gCSSProperties["touch-action"] = { + domProp: "touchAction", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: ["auto"], + other_values: [ + "none", + "pan-x", + "pan-y", + "pan-x pan-y", + "pan-y pan-x", + "manipulation", + ], + invalid_values: [ + "zoom", + "pinch", + "tap", + "10px", + "2", + "auto pan-x", + "pan-x auto", + "none pan-x", + "pan-x none", + "auto pan-y", + "pan-y auto", + "none pan-y", + "pan-y none", + "pan-x pan-x", + "pan-y pan-y", + "pan-x pan-y none", + "pan-x none pan-y", + "none pan-x pan-y", + "pan-y pan-x none", + "pan-y none pan-x", + "none pan-y pan-x", + "pan-x pan-y auto", + "pan-x auto pan-y", + "auto pan-x pan-y", + "pan-y pan-x auto", + "pan-y auto pan-x", + "auto pan-y pan-x", + "pan-x pan-y zoom", + "pan-x zoom pan-y", + "zoom pan-x pan-y", + "pan-y pan-x zoom", + "pan-y zoom pan-x", + "zoom pan-y pan-x", + "pan-x pan-y pan-x", + "pan-x pan-x pan-y", + "pan-y pan-x pan-x", + "pan-y pan-x pan-y", + "pan-y pan-y pan-x", + "pan-x pan-y pan-y", + "manipulation none", + "none manipulation", + "manipulation auto", + "auto manipulation", + "manipulation zoom", + "zoom manipulation", + "manipulation manipulation", + "manipulation pan-x", + "pan-x manipulation", + "manipulation pan-y", + "pan-y manipulation", + "manipulation pan-x pan-y", + "pan-x manipulation pan-y", + "pan-x pan-y manipulation", + "manipulation pan-y pan-x", + "pan-y manipulation pan-x", + "pan-y pan-x manipulation", + ], + }; } if (IsCSSPropertyPrefEnabled("layout.css.text-justify.enabled")) { @@ -7537,9 +11222,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.text-justify.enabled")) { inherited: true, type: CSS_TYPE_LONGHAND, applies_to_placeholder: true, - initial_values: [ "auto" ], - other_values: [ "none", "inter-word", "inter-character", "distribute" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["none", "inter-word", "inter-character", "distribute"], + invalid_values: [], }; } @@ -7553,23 +11238,33 @@ if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) { applies_to_placeholder: true, applies_to_marker: true, applies_to_cue: true, - initial_values: [ "normal" ], + initial_values: ["normal"], other_values: [ - "'wdth' 0", "'wdth' -.1", "\"wdth\" 1", "'wdth' 2, 'wght' 3", "\"XXXX\" 0" + "'wdth' 0", + "'wdth' -.1", + '"wdth" 1', + "'wdth' 2, 'wght' 3", + '"XXXX" 0', ], invalid_values: [ - "wdth", "wdth 1", // unquoted tags - "'wdth'", "'wdth' 'wght'", "'wdth', 'wght'", // missing values - "'' 1", "'wid' 1", "'width' 1", // incorrect tag lengths + "wdth", + "wdth 1", // unquoted tags + "'wdth'", + "'wdth' 'wght'", + "'wdth', 'wght'", // missing values + "'' 1", + "'wid' 1", + "'width' 1", // incorrect tag lengths "'wd\th' 1", // non-graphic character in tag "'wdth' 1 'wght' 2", // missing comma between pairs "'wdth' 1,", // trailing comma "'wdth' 1 , , 'wght' 2", // extra comma - "'wdth', 1" // comma within pair + "'wdth', 1", // comma within pair ], unbalanced_values: [ - "'wdth\" 1", "\"wdth' 1" // mismatched quotes - ] + "'wdth\" 1", + "\"wdth' 1", // mismatched quotes + ], }; gCSSProperties["font"].subproperties.push("font-variation-settings"); gCSSProperties["font-optical-sizing"] = { @@ -7581,13 +11276,14 @@ if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) { applies_to_placeholder: true, applies_to_marker: true, applies_to_cue: true, - initial_values: [ "auto" ], - other_values: [ "none" ], - invalid_values: [ "on" ] + initial_values: ["auto"], + other_values: ["none"], + invalid_values: ["on"], }; gCSSProperties["font"].subproperties.push("font-optical-sizing"); - gCSSProperties["font-variation-settings"].other_values - .push("'vert' calc(2.5)"); + gCSSProperties["font-variation-settings"].other_values.push( + "'vert' calc(2.5)" + ); } if (IsCSSPropertyPrefEnabled("svg.transform-box.enabled")) { @@ -7595,21 +11291,22 @@ if (IsCSSPropertyPrefEnabled("svg.transform-box.enabled")) { domProp: "transformBox", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "border-box" ], - other_values: [ "fill-box", "view-box" ], - invalid_values: ["content-box", "padding-box", "stroke-box", "margin-box"] + initial_values: ["border-box"], + other_values: ["fill-box", "view-box"], + invalid_values: ["content-box", "padding-box", "stroke-box", "margin-box"], }; } -var isGridTemplateSubgridValueEnabled = - IsCSSPropertyPrefEnabled("layout.css.grid-template-subgrid-value.enabled"); +var isGridTemplateSubgridValueEnabled = IsCSSPropertyPrefEnabled( + "layout.css.grid-template-subgrid-value.enabled" +); gCSSProperties["display"].other_values.push("grid", "inline-grid"); gCSSProperties["grid-auto-flow"] = { domProp: "gridAutoFlow", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "row" ], + initial_values: ["row"], other_values: [ "column", "column dense", @@ -7618,21 +11315,14 @@ gCSSProperties["grid-auto-flow"] = { "dense row", "dense", ], - invalid_values: [ - "", - "auto", - "none", - "10px", - "column row", - "dense row dense", - ] + invalid_values: ["", "auto", "none", "10px", "column row", "dense row dense"], }; gCSSProperties["grid-auto-columns"] = { domProp: "gridAutoColumns", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: [ "40px", "2em", @@ -7667,7 +11357,7 @@ gCSSProperties["grid-auto-columns"] = { "fit-content(-1px)", "fit-content(auto)", "fit-content(min-content)", - ] + ], }; gCSSProperties["grid-auto-rows"] = { domProp: "gridAutoRows", @@ -7675,14 +11365,14 @@ gCSSProperties["grid-auto-rows"] = { type: CSS_TYPE_LONGHAND, initial_values: gCSSProperties["grid-auto-columns"].initial_values, other_values: gCSSProperties["grid-auto-columns"].other_values, - invalid_values: gCSSProperties["grid-auto-columns"].invalid_values + invalid_values: gCSSProperties["grid-auto-columns"].invalid_values, }; gCSSProperties["grid-template-columns"] = { domProp: "gridTemplateColumns", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], + initial_values: ["none"], other_values: [ "auto", "40px", @@ -7695,7 +11385,7 @@ gCSSProperties["grid-template-columns"] = { "m\\69nmax(20px, 4Fr)", "40px MinMax(min-content, calc(20px + 10%)) max-content", "40px 2em", - "[] 40px [-foo] 2em [bar baz This\ is\ one\ ident]", + "[] 40px [-foo] 2em [bar baz This is one ident]", // TODO bug 978478: "[a] repeat(3, [b] 20px [c] 40px [d]) [e]", "repeat(1, 20px)", "repeat(1, [a] 20px)", @@ -7786,9 +11476,7 @@ gCSSProperties["grid-template-columns"] = { "fit-content(1px) repeat(auto-fit, 1px)", "fit-content(1px) repeat(auto-fill, 1px)", ], - unbalanced_values: [ - "(foo] 40px", - ] + unbalanced_values: ["(foo] 40px"], }; if (isGridTemplateSubgridValueEnabled) { gCSSProperties["grid-template-columns"].other_values.push( @@ -7838,13 +11526,13 @@ gCSSProperties["grid-template-rows"] = { type: CSS_TYPE_LONGHAND, initial_values: gCSSProperties["grid-template-columns"].initial_values, other_values: gCSSProperties["grid-template-columns"].other_values, - invalid_values: gCSSProperties["grid-template-columns"].invalid_values + invalid_values: gCSSProperties["grid-template-columns"].invalid_values, }; gCSSProperties["grid-template-areas"] = { domProp: "gridTemplateAreas", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], + initial_values: ["none"], other_values: [ "''", "'' ''", @@ -7864,7 +11552,7 @@ gCSSProperties["grid-template-areas"] = { "'a a .' 'a a a'", "'a a' 'a .'", "'a a'\n'..'\n'a a'", - ] + ], }; gCSSProperties["grid-template"] = { @@ -7876,10 +11564,7 @@ gCSSProperties["grid-template"] = { "grid-template-rows", "grid-template-columns", ], - initial_values: [ - "none", - "none / none", - ], + initial_values: ["none", "none / none"], other_values: [ // <'grid-template-rows'> / <'grid-template-columns'> "40px / 100px", @@ -7902,8 +11587,8 @@ gCSSProperties["grid-template"] = { "[foo] [bar] 40px / 100px", "[fizz] [buzz] 100px / 40px", "[fizz] [buzz] 'foo' / 40px", - "'foo' / none" - ] + "'foo' / none", + ], }; if (isGridTemplateSubgridValueEnabled) { gCSSProperties["grid-template"].other_values.push( @@ -7935,10 +11620,7 @@ gCSSProperties["grid"] = { "grid-auto-rows", "grid-auto-columns", ], - initial_values: [ - "none", - "none / none", - ], + initial_values: ["none", "none / none"], other_values: [ "auto-flow 40px / none", "auto-flow / 40px", @@ -7948,9 +11630,7 @@ gCSSProperties["grid"] = { "none / auto-flow 40px", "40px / auto-flow", "none / dense auto-flow auto", - ].concat( - gCSSProperties["grid-template"].other_values - ), + ].concat(gCSSProperties["grid-template"].other_values), invalid_values: [ "auto-flow", " / auto-flow", @@ -7966,9 +11646,8 @@ gCSSProperties["grid"] = { ].concat( gCSSProperties["grid-template"].invalid_values, gCSSProperties["grid-auto-flow"].other_values, - gCSSProperties["grid-auto-flow"].invalid_values - .filter((v) => v != 'none') - ) + gCSSProperties["grid-auto-flow"].invalid_values.filter(v => v != "none") + ), }; var gridLineOtherValues = [ @@ -8016,46 +11695,45 @@ gCSSProperties["grid-column-start"] = { domProp: "gridColumnStart", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: gridLineOtherValues, - invalid_values: gridLineInvalidValues + invalid_values: gridLineInvalidValues, }; gCSSProperties["grid-column-end"] = { domProp: "gridColumnEnd", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: gridLineOtherValues, - invalid_values: gridLineInvalidValues + invalid_values: gridLineInvalidValues, }; gCSSProperties["grid-row-start"] = { domProp: "gridRowStart", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: gridLineOtherValues, - invalid_values: gridLineInvalidValues + invalid_values: gridLineInvalidValues, }; gCSSProperties["grid-row-end"] = { domProp: "gridRowEnd", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], + initial_values: ["auto"], other_values: gridLineOtherValues, - invalid_values: gridLineInvalidValues + invalid_values: gridLineInvalidValues, }; // The grid-column and grid-row shorthands take values of the form // [ / ]? var gridColumnRowOtherValues = [].concat(gridLineOtherValues); -gridLineOtherValues.concat([ "auto" ]).forEach(function(val) { +gridLineOtherValues.concat(["auto"]).forEach(function(val) { gridColumnRowOtherValues.push(" foo / " + val); gridColumnRowOtherValues.push(val + "/2"); }); -var gridColumnRowInvalidValues = [ - "foo, bar", - "foo / bar / baz", -].concat(gridLineInvalidValues); +var gridColumnRowInvalidValues = ["foo, bar", "foo / bar / baz"].concat( + gridLineInvalidValues +); gridLineInvalidValues.forEach(function(val) { gridColumnRowInvalidValues.push("span 3 / " + val); gridColumnRowInvalidValues.push(val + " / foo"); @@ -8064,25 +11742,19 @@ gCSSProperties["grid-column"] = { domProp: "gridColumn", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ - "grid-column-start", - "grid-column-end" - ], - initial_values: [ "auto", "auto / auto" ], + subproperties: ["grid-column-start", "grid-column-end"], + initial_values: ["auto", "auto / auto"], other_values: gridColumnRowOtherValues, - invalid_values: gridColumnRowInvalidValues + invalid_values: gridColumnRowInvalidValues, }; gCSSProperties["grid-row"] = { domProp: "gridRow", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ - "grid-row-start", - "grid-row-end" - ], - initial_values: [ "auto", "auto / auto" ], + subproperties: ["grid-row-start", "grid-row-end"], + initial_values: ["auto", "auto / auto"], other_values: gridColumnRowOtherValues, - invalid_values: gridColumnRowInvalidValues + invalid_values: gridColumnRowInvalidValues, }; var gridAreaOtherValues = gridLineOtherValues.slice(); @@ -8113,67 +11785,99 @@ gCSSProperties["grid-area"] = { "grid-row-start", "grid-column-start", "grid-row-end", - "grid-column-end" + "grid-column-end", ], initial_values: [ "auto", "auto / auto", "auto / auto / auto", - "auto / auto / auto / auto" + "auto / auto / auto / auto", ], other_values: gridAreaOtherValues, - invalid_values: gridAreaInvalidValues + invalid_values: gridAreaInvalidValues, }; gCSSProperties["column-gap"] = { domProp: "columnGap", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)", - "calc(1% + 1ch)" , "calc(1px - 99%)" ], - invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%", "fit-content(1px)" ], + initial_values: ["normal"], + other_values: [ + "2px", + "2%", + "1em", + "calc(1px + 1em)", + "calc(1%)", + "calc(1% + 1ch)", + "calc(1px - 99%)", + ], + invalid_values: [ + "-1px", + "auto", + "none", + "1px 1px", + "-1%", + "fit-content(1px)", + ], }; gCSSProperties["grid-column-gap"] = { domProp: "gridColumnGap", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "column-gap", - subproperties: [ "column-gap" ] + subproperties: ["column-gap"], }; gCSSProperties["row-gap"] = { domProp: "rowGap", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "normal" ], - other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)", - "calc(1% + 1ch)" , "calc(1px - 99%)" ], - invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%", "min-content" ], + initial_values: ["normal"], + other_values: [ + "2px", + "2%", + "1em", + "calc(1px + 1em)", + "calc(1%)", + "calc(1% + 1ch)", + "calc(1px - 99%)", + ], + invalid_values: ["-1px", "auto", "none", "1px 1px", "-1%", "min-content"], }; gCSSProperties["grid-row-gap"] = { domProp: "gridRowGap", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "row-gap", - subproperties: [ "row-gap" ] + subproperties: ["row-gap"], }; gCSSProperties["gap"] = { domProp: "gap", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "column-gap", "row-gap" ], - initial_values: [ "normal", "normal normal" ], - other_values: [ "1ch 0", "1px 1%", "1em 1px", "calc(1px) calc(1%)", - "normal 0", "1% normal" ], - invalid_values: [ "-1px", "1px -1px", "1px 1px 1px", "inherit 1px", - "1px auto" ] + subproperties: ["column-gap", "row-gap"], + initial_values: ["normal", "normal normal"], + other_values: [ + "1ch 0", + "1px 1%", + "1em 1px", + "calc(1px) calc(1%)", + "normal 0", + "1% normal", + ], + invalid_values: [ + "-1px", + "1px -1px", + "1px 1px 1px", + "inherit 1px", + "1px auto", + ], }; gCSSProperties["grid-gap"] = { domProp: "gridGap", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, alias_for: "gap", - subproperties: [ "column-gap", "row-gap" ], + subproperties: ["column-gap", "row-gap"], }; if (IsCSSPropertyPrefEnabled("layout.css.contain.enabled")) { @@ -8181,7 +11885,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.contain.enabled")) { domProp: "contain", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], + initial_values: ["none"], other_values: [ "strict", "layout", @@ -8220,20 +11924,19 @@ if (IsCSSPropertyPrefEnabled("layout.css.contain.enabled")) { "auto", "10px", "0", - ] + ], }; } - if (IsCSSPropertyPrefEnabled("layout.css.initial-letter.enabled")) { gCSSProperties["initial-letter"] = { domProp: "initialLetter", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, - initial_values: [ "normal" ], - other_values: [ "2", "2.5", "3.7 2", "4 3" ], - invalid_values: [ "-3", "3.7 -2", "25%", "16px", "1 0", "0", "0 1" ] + initial_values: ["normal"], + other_values: ["2", "2.5", "3.7 2", "4 3"], + invalid_values: ["-3", "3.7 -2", "25%", "16px", "1 0", "0", "0 1"], }; } @@ -8247,9 +11950,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.osx-font-smoothing.enabled")) { applies_to_placeholder: true, applies_to_cue: true, applies_to_marker: true, - initial_values: [ "auto" ], - other_values: [ "grayscale" ], - invalid_values: [ "none", "subpixel-antialiased", "antialiased" ] + initial_values: ["auto"], + other_values: ["grayscale"], + invalid_values: ["none", "subpixel-antialiased", "antialiased"], }; } @@ -8258,9 +11961,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-anchoring.enabled")) { domProp: "overflowAnchor", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "none" ], - invalid_values: [] + initial_values: ["auto"], + other_values: ["none"], + invalid_values: [], }; } @@ -8270,29 +11973,39 @@ if (IsCSSPropertyPrefEnabled("layout.css.overflow-clip-box.enabled")) { inherited: false, type: CSS_TYPE_LONGHAND, applies_to_placeholder: true, - initial_values: [ "padding-box" ], - other_values: [ "content-box" ], - invalid_values: [ "auto", "border-box", "0", "padding-box padding-box" ] + initial_values: ["padding-box"], + other_values: ["content-box"], + invalid_values: ["auto", "border-box", "0", "padding-box padding-box"], }; gCSSProperties["overflow-clip-box-inline"] = { domProp: "overflowClipBoxInline", inherited: false, type: CSS_TYPE_LONGHAND, applies_to_placeholder: true, - initial_values: [ "padding-box" ], - other_values: [ "content-box" ], - invalid_values: [ "none", "border-box", "0", "content-box content-box" ] + initial_values: ["padding-box"], + other_values: ["content-box"], + invalid_values: ["none", "border-box", "0", "content-box content-box"], }; gCSSProperties["overflow-clip-box"] = { domProp: "overflowClipBox", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "overflow-clip-box-block", "overflow-clip-box-inline" ], - initial_values: [ "padding-box" ], - other_values: [ "content-box", "padding-box content-box", "content-box padding-box", - "content-box content-box" ], - invalid_values: [ "none", "auto", "content-box none", "border-box", "0", - "content-box, content-box" ] + subproperties: ["overflow-clip-box-block", "overflow-clip-box-inline"], + initial_values: ["padding-box"], + other_values: [ + "content-box", + "padding-box content-box", + "content-box padding-box", + "content-box content-box", + ], + invalid_values: [ + "none", + "auto", + "content-box none", + "border-box", + "0", + "content-box, content-box", + ], }; } @@ -8301,26 +12014,32 @@ if (IsCSSPropertyPrefEnabled("layout.css.overscroll-behavior.enabled")) { domProp: "overscrollBehaviorX", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "contain", "none" ], - invalid_values: [ "left", "1px" ] + initial_values: ["auto"], + other_values: ["contain", "none"], + invalid_values: ["left", "1px"], }; gCSSProperties["overscroll-behavior-y"] = { domProp: "overscrollBehaviorY", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "contain", "none" ], - invalid_values: [ "left", "1px" ] + initial_values: ["auto"], + other_values: ["contain", "none"], + invalid_values: ["left", "1px"], }; gCSSProperties["overscroll-behavior"] = { domProp: "overscrollBehavior", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "overscroll-behavior-x", "overscroll-behavior-y" ], - initial_values: [ "auto" ], - other_values: [ "contain", "none", "contain contain", "contain auto", "none contain" ], - invalid_values: [ "left", "1px", "contain auto none", "contain nonsense" ] + subproperties: ["overscroll-behavior-x", "overscroll-behavior-y"], + initial_values: ["auto"], + other_values: [ + "contain", + "none", + "contain contain", + "contain auto", + "none contain", + ], + invalid_values: ["left", "1px", "contain auto none", "contain nonsense"], }; } @@ -8329,35 +12048,66 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) { domProp: "scrollSnapType", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "both mandatory", "y mandatory", "inline proximity", - "both", "x", "y", "block", "inline" ], - invalid_values: [ "auto", "1px", "x y", "block mandatory inline", - "mandatory", "proximity", "mandatory inline", - "proximity both", "mandatory x", "proximity y", - "mandatory block", "proximity mandatory" ], + initial_values: ["none"], + other_values: [ + "both mandatory", + "y mandatory", + "inline proximity", + "both", + "x", + "y", + "block", + "inline", + ], + invalid_values: [ + "auto", + "1px", + "x y", + "block mandatory inline", + "mandatory", + "proximity", + "mandatory inline", + "proximity both", + "mandatory x", + "proximity y", + "mandatory block", + "proximity mandatory", + ], }; gCSSProperties["scroll-snap-align"] = { domProp: "scrollSnapAlign", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "start", "end", "center", "start none", "center end", - "start start" ], - invalid_values: [ "auto", "start invalid", "start end center" ] + initial_values: ["none"], + other_values: [ + "start", + "end", + "center", + "start none", + "center end", + "start start", + ], + invalid_values: ["auto", "start invalid", "start end center"], }; gCSSProperties["scroll-margin"] = { domProp: "scrollMargin", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "scroll-margin-top", - "scroll-margin-right", - "scroll-margin-bottom", - "scroll-margin-left" ], - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)", "1px 2px", "1px 2px 3px", - "1px 2px 3px 4px" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px 3px 4px 5px" ], + subproperties: [ + "scroll-margin-top", + "scroll-margin-right", + "scroll-margin-bottom", + "scroll-margin-left", + ], + initial_values: ["0"], + other_values: [ + "-10px", + "calc(2em + 3ex)", + "1px 2px", + "1px 2px 3px", + "1px 2px 3px 4px", + ], + invalid_values: ["auto", "20%", "-30%", "1px 2px 3px 4px 5px"], }; gCSSProperties["scroll-margin-top"] = { domProp: "scrollMarginTop", @@ -8365,9 +12115,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, applies_to_first_line: true, - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px" ], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)"], + invalid_values: ["auto", "20%", "-30%", "1px 2px"], }; gCSSProperties["scroll-margin-right"] = { domProp: "scrollMarginRight", @@ -8375,9 +12125,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, applies_to_first_line: true, - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px" ], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)"], + invalid_values: ["auto", "20%", "-30%", "1px 2px"], }; gCSSProperties["scroll-margin-bottom"] = { domProp: "scrollMarginBottom", @@ -8385,9 +12135,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, applies_to_first_line: true, - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px" ], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)"], + invalid_values: ["auto", "20%", "-30%", "1px 2px"], }; gCSSProperties["scroll-margin-left"] = { domProp: "scrollMarginLeft", @@ -8395,19 +12145,18 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) { type: CSS_TYPE_LONGHAND, applies_to_first_letter: true, applies_to_first_line: true, - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px" ], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)"], + invalid_values: ["auto", "20%", "-30%", "1px 2px"], }; gCSSProperties["scroll-margin-inline"] = { domProp: "scrollMarginInline", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "scroll-margin-inline-start", - "scroll-margin-inline-end" ], - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)", "1px 2px" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px 3px" ], + subproperties: ["scroll-margin-inline-start", "scroll-margin-inline-end"], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)", "1px 2px"], + invalid_values: ["auto", "20%", "-30%", "1px 2px 3px"], }; gCSSProperties["scroll-margin-inline-start"] = { domProp: "scrollMarginInlineStart", @@ -8416,9 +12165,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) { logical: true, applies_to_first_letter: true, applies_to_first_line: true, - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px" ], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)"], + invalid_values: ["auto", "20%", "-30%", "1px 2px"], }; gCSSProperties["scroll-margin-inline-end"] = { domProp: "scrollMarginInlineEnd", @@ -8427,19 +12176,18 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) { logical: true, applies_to_first_letter: true, applies_to_first_line: true, - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px" ], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)"], + invalid_values: ["auto", "20%", "-30%", "1px 2px"], }; gCSSProperties["scroll-margin-block"] = { domProp: "scrollMarginBlock", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "scroll-margin-block-start", - "scroll-margin-block-end" ], - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)", "1px 2px" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px 3px" ], + subproperties: ["scroll-margin-block-start", "scroll-margin-block-end"], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)", "1px 2px"], + invalid_values: ["auto", "20%", "-30%", "1px 2px 3px"], }; gCSSProperties["scroll-margin-block-start"] = { domProp: "scrollMarginBlockStart", @@ -8448,9 +12196,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) { logical: true, applies_to_first_letter: true, applies_to_first_line: true, - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px" ], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)"], + invalid_values: ["auto", "20%", "-30%", "1px 2px"], }; gCSSProperties["scroll-margin-block-end"] = { domProp: "scrollMarginBlockEnd", @@ -8459,120 +12207,188 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap-v1.enabled")) { logical: true, applies_to_first_letter: true, applies_to_first_line: true, - initial_values: [ "0" ], - other_values: [ "-10px", "calc(2em + 3ex)" ], - invalid_values: [ "auto", "20%", "-30%", "1px 2px" ], + initial_values: ["0"], + other_values: ["-10px", "calc(2em + 3ex)"], + invalid_values: ["auto", "20%", "-30%", "1px 2px"], }; gCSSProperties["scroll-padding"] = { domProp: "scrollPadding", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "scroll-padding-top", - "scroll-padding-right", - "scroll-padding-bottom", - "scroll-padding-left" ], - initial_values: [ "auto" ], - other_values: [ "10px", "0", "20%", "calc(2em + 3ex)", "1px 2px", - "1px 2px 3%", "1px 2px 3% 4px", "1px auto" ], - invalid_values: [ "20", "-20px" ] + subproperties: [ + "scroll-padding-top", + "scroll-padding-right", + "scroll-padding-bottom", + "scroll-padding-left", + ], + initial_values: ["auto"], + other_values: [ + "10px", + "0", + "20%", + "calc(2em + 3ex)", + "1px 2px", + "1px 2px 3%", + "1px 2px 3% 4px", + "1px auto", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-top"] = { domProp: "scrollPaddingTop", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "0", "10px", "20%", "calc(2em + 3ex)", "calc(50% + 60px)", - "calc(-50px)" ], - invalid_values: [ "20", "-20px" ], + initial_values: ["auto"], + other_values: [ + "0", + "10px", + "20%", + "calc(2em + 3ex)", + "calc(50% + 60px)", + "calc(-50px)", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-right"] = { domProp: "scrollPaddingRight", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "0", "10px", "20%", "calc(2em + 3ex)", "calc(50% + 60px)", - "calc(-50px)" ], - invalid_values: [ "20", "-20px" ], + initial_values: ["auto"], + other_values: [ + "0", + "10px", + "20%", + "calc(2em + 3ex)", + "calc(50% + 60px)", + "calc(-50px)", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-bottom"] = { domProp: "scrollPaddingBottom", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "0", "10px", "20%", "calc(2em + 3ex)", "calc(50% + 60px)", - "calc(-50px)" ], - invalid_values: [ "20", "-20px" ], + initial_values: ["auto"], + other_values: [ + "0", + "10px", + "20%", + "calc(2em + 3ex)", + "calc(50% + 60px)", + "calc(-50px)", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-left"] = { domProp: "scrollPaddingLeft", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "0", "10px", "20%", "calc(2em + 3ex)", "calc(50% + 60px)", - "calc(-50px)" ], - invalid_values: [ "20", "-20px" ], + initial_values: ["auto"], + other_values: [ + "0", + "10px", + "20%", + "calc(2em + 3ex)", + "calc(50% + 60px)", + "calc(-50px)", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-inline"] = { domProp: "scrollPaddingInline", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "scroll-padding-inline-start", - "scroll-padding-inline-end" ], - initial_values: [ "auto", "auto auto" ], - other_values: [ "10px", "0", "20%", "calc(2em + 3ex)", "1px 2px", - "1px auto" ], - invalid_values: [ "20", "-20px" ] + subproperties: ["scroll-padding-inline-start", "scroll-padding-inline-end"], + initial_values: ["auto", "auto auto"], + other_values: [ + "10px", + "0", + "20%", + "calc(2em + 3ex)", + "1px 2px", + "1px auto", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-inline-start"] = { domProp: "scrollPaddingInlineStart", inherited: false, type: CSS_TYPE_LONGHAND, logical: true, - initial_values: [ "auto" ], - other_values: [ "0", "10px", "20%", "calc(2em + 3ex)", "calc(50% + 60px)", - "calc(-50px)" ], - invalid_values: [ "20", "-20px" ], + initial_values: ["auto"], + other_values: [ + "0", + "10px", + "20%", + "calc(2em + 3ex)", + "calc(50% + 60px)", + "calc(-50px)", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-inline-end"] = { domProp: "scrollPaddingInlineEnd", inherited: false, type: CSS_TYPE_LONGHAND, logical: true, - initial_values: [ "auto" ], - other_values: [ "0", "10px", "20%", "calc(2em + 3ex)", "calc(50% + 60px)", - "calc(-50px)" ], - invalid_values: [ "20", "-20px" ], + initial_values: ["auto"], + other_values: [ + "0", + "10px", + "20%", + "calc(2em + 3ex)", + "calc(50% + 60px)", + "calc(-50px)", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-block"] = { domProp: "scrollPaddingBlock", inherited: false, type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "scroll-padding-block-start", - "scroll-padding-block-end" ], - initial_values: [ "auto", "auto auto" ], - other_values: [ "10px", "0", "20%", "calc(2em + 3ex)", "1px 2px", - "1px auto" ], - invalid_values: [ "20", "-20px" ] + subproperties: ["scroll-padding-block-start", "scroll-padding-block-end"], + initial_values: ["auto", "auto auto"], + other_values: [ + "10px", + "0", + "20%", + "calc(2em + 3ex)", + "1px 2px", + "1px auto", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-block-start"] = { domProp: "scrollPaddingBlockStart", inherited: false, type: CSS_TYPE_LONGHAND, logical: true, - initial_values: [ "auto" ], - other_values: [ "0", "10px", "20%", "calc(2em + 3ex)", "calc(50% + 60px)", - "calc(-50px)" ], - invalid_values: [ "20", "-20px" ], + initial_values: ["auto"], + other_values: [ + "0", + "10px", + "20%", + "calc(2em + 3ex)", + "calc(50% + 60px)", + "calc(-50px)", + ], + invalid_values: ["20", "-20px"], }; gCSSProperties["scroll-padding-block-end"] = { domProp: "scrollPaddingBlockEnd", inherited: false, type: CSS_TYPE_LONGHAND, logical: true, - initial_values: [ "auto" ], - other_values: [ "0", "10px", "20%", "calc(2em + 3ex)", "calc(50% + 60px)", - "calc(-50px)" ], - invalid_values: [ "20", "-20px" ], + initial_values: ["auto"], + other_values: [ + "0", + "10px", + "20%", + "calc(2em + 3ex)", + "calc(50% + 60px)", + "calc(-50px)", + ], + invalid_values: ["20", "-20px"], }; } @@ -8582,7 +12398,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.webkit-appearance.enabled")) { inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "-moz-appearance", - subproperties: [ "-moz-appearance" ], + subproperties: ["-moz-appearance"], }; } @@ -8593,7 +12409,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.offset-logical-properties.enabled")) { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, logical: true, alias_for: "inset-block-start", - subproperties: [ "inset-block-start" ], + subproperties: ["inset-block-start"], }; gCSSProperties["offset-block-end"] = { domProp: "offsetBlockEnd", @@ -8601,7 +12417,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.offset-logical-properties.enabled")) { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, logical: true, alias_for: "inset-block-end", - subproperties: [ "inset-block-end" ], + subproperties: ["inset-block-end"], }; gCSSProperties["offset-inline-start"] = { domProp: "offsetInlineStart", @@ -8609,7 +12425,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.offset-logical-properties.enabled")) { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, logical: true, alias_for: "inset-inline-start", - subproperties: [ "inset-inline-start" ], + subproperties: ["inset-inline-start"], }; gCSSProperties["offset-inline-end"] = { domProp: "offsetInlineEnd", @@ -8617,23 +12433,37 @@ if (IsCSSPropertyPrefEnabled("layout.css.offset-logical-properties.enabled")) { type: CSS_TYPE_SHORTHAND_AND_LONGHAND, logical: true, alias_for: "inset-inline-end", - subproperties: [ "inset-inline-end" ], + subproperties: ["inset-inline-end"], }; } { const patterns = { - background: ["{} scroll no-repeat", "{} repeat", "url(404.png), {}, -moz-element(#a) black"], - mask: ["{} add no-repeat", "{} repeat", "url(404.png), {}, -moz-element(#a) alpha"], + background: [ + "{} scroll no-repeat", + "{} repeat", + "url(404.png), {}, -moz-element(#a) black", + ], + mask: [ + "{} add no-repeat", + "{} repeat", + "url(404.png), {}, -moz-element(#a) alpha", + ], }; for (const prop of ["background", "mask"]) { let i = 0; const p = patterns[prop]; - for (const v of invalidGradientAndElementValues) - gCSSProperties[prop].invalid_values.push(p[i++ % p.length].replace("{}", v)); - for (const v of validGradientAndElementValues) - gCSSProperties[prop].other_values.push(p[i++ % p.length].replace("{}", v)); + for (const v of invalidGradientAndElementValues) { + gCSSProperties[prop].invalid_values.push( + p[i++ % p.length].replace("{}", v) + ); + } + for (const v of validGradientAndElementValues) { + gCSSProperties[prop].other_values.push( + p[i++ % p.length].replace("{}", v) + ); + } } } @@ -8644,16 +12474,16 @@ if (IsCSSPropertyPrefEnabled("layout.css.column-span.enabled")) { domProp: "columnSpan", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "all" ], - invalid_values: [ "-1", "0", "auto", "2px" ] + initial_values: ["none"], + other_values: ["all"], + invalid_values: ["-1", "0", "auto", "2px"], }; gCSSProperties["-moz-column-span"] = { domProp: "MozColumnSpan", inherited: false, type: CSS_TYPE_SHORTHAND_AND_LONGHAND, alias_for: "column-span", - subproperties: [ "column-span" ] + subproperties: ["column-span"], }; } @@ -8662,9 +12492,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.webkit-line-clamp.enabled")) { domProp: "webkitLineClamp", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "1", "2" ], - invalid_values: [ "auto", "0", "-1" ], + initial_values: ["none"], + other_values: ["1", "2"], + invalid_values: ["auto", "0", "-1"], }; } @@ -8675,39 +12505,71 @@ if (false) { //domProp: "MozWindowShadow", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "default" ], - other_values: [ "none", "menu", "tooltip", "sheet" ], - invalid_values: [] + initial_values: ["default"], + other_values: ["none", "menu", "tooltip", "sheet"], + invalid_values: [], }; gCSSProperties["-moz-window-opacity"] = { // domProp: "MozWindowOpacity", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "1", "17", "397.376", "3e1", "3e+1", "3e0", "3e+0", "3e-0" ], - other_values: [ "0", "0.4", "0.0000", "-3", "3e-1" ], - invalid_values: [ "0px", "1px", "20%", "default", "auto" ] + initial_values: [ + "1", + "17", + "397.376", + "3e1", + "3e+1", + "3e0", + "3e+0", + "3e-0", + ], + other_values: ["0", "0.4", "0.0000", "-3", "3e-1"], + invalid_values: ["0px", "1px", "20%", "default", "auto"], }; gCSSProperties["-moz-window-transform"] = { // domProp: "MozWindowTransform", inherited: false, type: CSS_TYPE_LONGHAND, - prerequisites: { "width": "300px", "height": "50px" }, - initial_values: [ "none" ], - other_values: [ "translatex(1px)", "translatex(4em)", - "translatex(-4px)", "translatex(3px)", + prerequisites: { width: "300px", height: "50px" }, + initial_values: ["none"], + other_values: [ + "translatex(1px)", + "translatex(4em)", + "translatex(-4px)", + "translatex(3px)", "translatex(0px) translatex(1px) translatex(2px) translatex(3px) translatex(4px)", - "translatey(4em)", "translate(3px)", "translate(10px, -3px)", - "rotate(45deg)", "rotate(45grad)", "rotate(45rad)", - "rotate(0.25turn)", "rotate(0)", "scalex(10)", "scaley(10)", - "scale(10)", "scale(10, 20)", "skewx(30deg)", "skewx(0)", - "skewy(0)", "skewx(30grad)", "skewx(30rad)", "skewx(0.08turn)", - "skewy(30deg)", "skewy(30grad)", "skewy(30rad)", "skewy(0.08turn)", - "rotate(45deg) scale(2, 1)", "skewx(45deg) skewx(-50grad)", + "translatey(4em)", + "translate(3px)", + "translate(10px, -3px)", + "rotate(45deg)", + "rotate(45grad)", + "rotate(45rad)", + "rotate(0.25turn)", + "rotate(0)", + "scalex(10)", + "scaley(10)", + "scale(10)", + "scale(10, 20)", + "skewx(30deg)", + "skewx(0)", + "skewy(0)", + "skewx(30grad)", + "skewx(30rad)", + "skewx(0.08turn)", + "skewy(30deg)", + "skewy(30grad)", + "skewy(30rad)", + "skewy(0.08turn)", + "rotate(45deg) scale(2, 1)", + "skewx(45deg) skewx(-50grad)", "translate(0, 0) scale(1, 1) skewx(0) skewy(0) matrix(1, 0, 0, 1, 0, 0)", - "translatex(50%)", "translatey(50%)", "translate(50%)", - "translate(3%, 5px)", "translate(5px, 3%)", + "translatex(50%)", + "translatey(50%)", + "translate(50%)", + "translate(3%, 5px)", + "translate(5px, 3%)", "matrix(1, 2, 3, 4, 5, 6)", /* valid calc() values */ "translatex(calc(5px + 10%))", @@ -8715,27 +12577,52 @@ if (false) { "translate(calc(5px - 10% * 3))", "translate(calc(5px - 3 * 10%), 50px)", "translate(-50px, calc(5px - 10% * 3))", - "translatez(1px)", "translatez(4em)", "translatez(-4px)", - "translatez(0px)", "translatez(2px) translatez(5px)", - "translate3d(3px, 4px, 5px)", "translate3d(2em, 3px, 1em)", + "translatez(1px)", + "translatez(4em)", + "translatez(-4px)", + "translatez(0px)", + "translatez(2px) translatez(5px)", + "translate3d(3px, 4px, 5px)", + "translate3d(2em, 3px, 1em)", "translatex(2px) translate3d(4px, 5px, 6px) translatey(1px)", - "scale3d(4, 4, 4)", "scale3d(-2, 3, -7)", "scalez(4)", - "scalez(-6)", "rotate3d(2, 3, 4, 45deg)", - "rotate3d(-3, 7, 0, 12rad)", "rotatex(15deg)", "rotatey(-12grad)", - "rotatez(72rad)", "rotatex(0.125turn)", - "perspective(0px)", "perspective(1000px)", + "scale3d(4, 4, 4)", + "scale3d(-2, 3, -7)", + "scalez(4)", + "scalez(-6)", + "rotate3d(2, 3, 4, 45deg)", + "rotate3d(-3, 7, 0, 12rad)", + "rotatex(15deg)", + "rotatey(-12grad)", + "rotatez(72rad)", + "rotatex(0.125turn)", + "perspective(0px)", + "perspective(1000px)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)", ], - invalid_values: ["1px", "#0000ff", "red", "auto", - "translatex(1)", "translatey(1)", "translate(2)", + invalid_values: [ + "1px", + "#0000ff", + "red", + "auto", + "translatex(1)", + "translatey(1)", + "translate(2)", "translate(-3, -4)", - "translatex(1px 1px)", "translatex(translatex(1px))", - "translatex(#0000ff)", "translatex(red)", "translatey()", - "matrix(1px, 2px, 3px, 4px, 5px, 6px)", "scale(150%)", - "skewx(red)", "matrix(1%, 0, 0, 0, 0px, 0px)", - "matrix(0, 1%, 2, 3, 4px,5px)", "matrix(0, 1, 2%, 3, 4px, 5px)", - "matrix(0, 1, 2, 3%, 4%, 5%)", "matrix(1, 2, 3, 4, 5px, 6%)", - "matrix(1, 2, 3, 4, 5%, 6px)", "matrix(1, 2, 3, 4, 5%, 6%)", + "translatex(1px 1px)", + "translatex(translatex(1px))", + "translatex(#0000ff)", + "translatex(red)", + "translatey()", + "matrix(1px, 2px, 3px, 4px, 5px, 6px)", + "scale(150%)", + "skewx(red)", + "matrix(1%, 0, 0, 0, 0px, 0px)", + "matrix(0, 1%, 2, 3, 4px,5px)", + "matrix(0, 1, 2%, 3, 4px, 5px)", + "matrix(0, 1, 2, 3%, 4%, 5%)", + "matrix(1, 2, 3, 4, 5px, 6%)", + "matrix(1, 2, 3, 4, 5%, 6px)", + "matrix(1, 2, 3, 4, 5%, 6%)", "matrix(1, 2, 3, 4, 5px, 6em)", /* invalid calc() values */ "translatey(-moz-min(5px,10%))", @@ -8743,14 +12630,17 @@ if (false) { "translate(10px, calc(min(5px,10%)))", "translate(calc(max(5px,10%)), 10%)", "matrix(1, 0, 0, 1, max(5px * 3), calc(10% - 3px))", - "perspective(-10px)", "matrix3d(dinosaur)", + "perspective(-10px)", + "matrix3d(dinosaur)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15%, 16)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16px)", - "rotatey(words)", "rotatex(7)", "translate3d(3px, 4px, 1px, 7px)", + "rotatey(words)", + "rotatex(7)", + "translate3d(3px, 4px, 1px, 7px)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13px, 14em, 15px, 16)", - "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 20%, 10%, 15, 16)" + "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 20%, 10%, 15, 16)", ], }; @@ -8759,14 +12649,30 @@ if (false) { inherited: false, type: CSS_TYPE_LONGHAND, /* no subproperties */ - prerequisites: { "width": "10px", "height": "10px", "display": "block"}, - initial_values: [ "50% 50%", "center", "center center" ], - other_values: [ "25% 25%", "6px 5px", "20% 3em", "0 0", "0in 1in", - "top", "bottom","top left", "top right", - "top center", "center left", "center right", - "bottom left", "bottom right", "bottom center", - "20% center", "6px center", "13in bottom", - "left 50px", "right 13%", "center 40px", + prerequisites: { width: "10px", height: "10px", display: "block" }, + initial_values: ["50% 50%", "center", "center center"], + other_values: [ + "25% 25%", + "6px 5px", + "20% 3em", + "0 0", + "0in 1in", + "top", + "bottom", + "top left", + "top right", + "top center", + "center left", + "center right", + "bottom left", + "bottom right", + "bottom center", + "20% center", + "6px center", + "13in bottom", + "left 50px", + "right 13%", + "center 40px", "calc(20px)", "calc(20px) 10px", "10px calc(20px)", @@ -8776,31 +12682,56 @@ if (false) { "calc(20px + 1em) calc(20px / 2)", "calc(20px + 50%) calc(50% - 10px)", "calc(-20px) calc(-50%)", - "calc(-20%) calc(-50%)" + "calc(-20%) calc(-50%)", + ], + invalid_values: [ + "red", + "auto", + "none", + "0.5 0.5", + "40px #0000ff", + "border", + "center red", + "right diagonal", + "#00ffff bottom", + "0px calc(0px + rubbish)", + "0px 0px calc(0px + rubbish)", + "6px 5px 5px", + "top center 10px", ], - invalid_values: ["red", "auto", "none", "0.5 0.5", "40px #0000ff", - "border", "center red", "right diagonal", - "#00ffff bottom", "0px calc(0px + rubbish)", - "0px 0px calc(0px + rubbish)", "6px 5px 5px", - "top center 10px"] }; gCSSProperties["-moz-context-properties"] = { //domProp: "MozContextProperties", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ "fill", "stroke", "fill, stroke", "fill, stroke, fill", "fill, foo", "foo" ], - invalid_values: [ "default", "fill, auto", "all, stroke", "none, fill", "fill, none", "fill, default", "2px" ] + initial_values: ["none"], + other_values: [ + "fill", + "stroke", + "fill, stroke", + "fill, stroke, fill", + "fill, foo", + "foo", + ], + invalid_values: [ + "default", + "fill, auto", + "all, stroke", + "none, fill", + "fill, none", + "fill, default", + "2px", + ], }; gCSSProperties["-moz-font-smoothing-background-color"] = { // domProp: "MozFontSmoothingBackgroundColor", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "transparent" ], - other_values: [ "green", "#fc3" ], - invalid_values: [ "000000", "ff00ff" ] + initial_values: ["transparent"], + other_values: ["green", "#fc3"], + invalid_values: ["000000", "ff00ff"], }; } @@ -8809,9 +12740,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.scrollbar-color.enabled")) { domProp: "scrollbarColor", inherited: true, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "red green", "blue yellow", "#ffff00 white" ], - invalid_values: [ "ffff00 red", "auto red", "red auto", "green" ] + initial_values: ["auto"], + other_values: ["red green", "blue yellow", "#ffff00 white"], + invalid_values: ["ffff00 red", "auto red", "red auto", "green"], }; } @@ -8820,9 +12751,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.scrollbar-width.enabled")) { domProp: "scrollbarWidth", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "none", "thin" ], - invalid_values: [ "1px" ] + initial_values: ["auto"], + other_values: ["none", "thin"], + invalid_values: ["1px"], }; } @@ -8831,7 +12762,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) { domProp: "offsetPath", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], + initial_values: ["none"], other_values: [ "path('M 10 10 20 20 H 90 V 90 Z')", "path('M10 10 20,20H90V90Z')", @@ -8841,28 +12772,34 @@ if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) { "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')" + "path('M10,10L20.6.5z')", + ], + invalid_values: [ + "path('')", + "path()", + "path(a)", + "path('M 10 Z')", + "path('M 10-10 20')", + "path('M 10 10 C 20 20 40 20')", ], - invalid_values: [ "path('')", "path()", "path(a)", "path('M 10 Z')" , - "path('M 10-10 20')", "path('M 10 10 C 20 20 40 20')" ] }; gCSSProperties["offset-distance"] = { domProp: "offsetDistance", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "0" ], - other_values: [ "10px", "10%", "190%", "-280%", "calc(30px + 40%)" ], - invalid_values: [ "none", "45deg" ] + initial_values: ["0"], + other_values: ["10px", "10%", "190%", "-280%", "calc(30px + 40%)"], + invalid_values: ["none", "45deg"], }; gCSSProperties["offset-rotate"] = { domProp: "offsetRotate", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ "reverse", "0deg", "0rad reverse", "-45deg", "5turn auto" ], - invalid_values: [ "none", "10px", "reverse 0deg reverse", "reverse auto" ] + initial_values: ["auto"], + other_values: ["reverse", "0deg", "0rad reverse", "-45deg", "5turn auto"], + invalid_values: ["none", "10px", "reverse 0deg reverse", "reverse auto"], }; } @@ -8870,13 +12807,13 @@ if (IsCSSPropertyPrefEnabled("layout.css.clip-path-path.enabled")) { gCSSProperties["clip-path"].other_values.push( "path(nonzero, 'M 10 10 h 100 v 100 h-100 v-100 z')", "path(evenodd, 'M 10 10 h 100 v 100 h-100 v-100 z')", - "path('M10,30A20,20 0,0,1 50,30A20,20 0,0,1 90,30Q90,60 50,90Q10,60 10,30z')", + "path('M10,30A20,20 0,0,1 50,30A20,20 0,0,1 90,30Q90,60 50,90Q10,60 10,30z')" ); gCSSProperties["clip-path"].invalid_values.push( "path(nonzero)", "path(evenodd, '')", - "path(abs, 'M 10 10 L 10 10 z')", + "path(abs, 'M 10 10 L 10 10 z')" ); } @@ -8885,26 +12822,26 @@ if (IsCSSPropertyPrefEnabled("layout.css.step-position-jump.enabled")) { "steps(1, jump-start)", "steps(1, jump-end)", "steps(2, jump-none)", - "steps(1, jump-both)", + "steps(1, jump-both)" ); gCSSProperties["animation-timing-function"].invalid_values.push( "steps(0, jump-start)", "steps(0, jump-end)", "steps(1, jump-none)", - "steps(0, jump-both)", + "steps(0, jump-both)" ); gCSSProperties["transition-timing-function"].other_values.push( "steps(1, jump-start)", "steps(1, jump-end)", "steps(2, jump-none)", - "steps(1, jump-both)", + "steps(1, jump-both)" ); gCSSProperties["transition-timing-function"].invalid_values.push( "steps(0, jump-start)", "steps(0, jump-end)", "steps(1, jump-none)", - "steps(0, jump-both)", + "steps(0, jump-both)" ); } @@ -8913,10 +12850,10 @@ if (IsCSSPropertyPrefEnabled("layout.css.backdrop-filter.enabled")) { domProp: "backdropFilter", inherited: false, type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], + initial_values: ["none"], other_values: gCSSProperties["filter"].other_values, invalid_values: gCSSProperties["filter"].invalid_values, - } + }; } // Copy aliased properties' fields from their alias targets. Keep this logic @@ -8927,25 +12864,33 @@ for (var prop in gCSSProperties) { if (entry.alias_for) { var aliasTargetEntry = gCSSProperties[entry.alias_for]; if (!aliasTargetEntry) { - ok(false, - "Alias '" + prop + "' alias_for field, '" + entry.alias_for + "', " + - "must be set to a recognized CSS property in gCSSProperties"); + ok( + false, + "Alias '" + + prop + + "' alias_for field, '" + + entry.alias_for + + "', " + + "must be set to a recognized CSS property in gCSSProperties" + ); } else { // Copy 'values' fields & 'prerequisites' field from aliasTargetEntry: - var fieldsToCopy = - ["initial_values", "other_values", "invalid_values", - "quirks_values", "unbalanced_values", - "prerequisites"]; + var fieldsToCopy = [ + "initial_values", + "other_values", + "invalid_values", + "quirks_values", + "unbalanced_values", + "prerequisites", + ]; fieldsToCopy.forEach(function(fieldName) { // (Don't copy the field if the alias already has something there, // or if the aliased property doesn't have anything to copy.) - if (!(fieldName in entry) && - fieldName in aliasTargetEntry) { - entry[fieldName] = aliasTargetEntry[fieldName] + if (!(fieldName in entry) && fieldName in aliasTargetEntry) { + entry[fieldName] = aliasTargetEntry[fieldName]; } }); } } } - diff --git a/layout/style/test/style_attribute_tests.js b/layout/style/test/style_attribute_tests.js index 55963483c3b1..243ec3380d33 100644 --- a/layout/style/test/style_attribute_tests.js +++ b/layout/style/test/style_attribute_tests.js @@ -1,27 +1,25 @@ - SimpleTest.waitForExplicitFinish(); window.addEventListener("load", runTests); -function runTests(event) -{ - if (event.target != document) { - return; - } +function runTests(event) { + if (event.target != document) { + return; + } - var elt = document.getElementById("content"); + var elt = document.getElementById("content"); - elt.setAttribute("style", "color: blue; background-color: fuchsia"); - is(elt.style.color, "blue", - "setting correct style attribute (color)"); - is(elt.style.backgroundColor, "fuchsia", - "setting correct style attribute (color)"); + elt.setAttribute("style", "color: blue; background-color: fuchsia"); + is(elt.style.color, "blue", "setting correct style attribute (color)"); + is( + elt.style.backgroundColor, + "fuchsia", + "setting correct style attribute (color)" + ); - elt.setAttribute("style", "{color: blue; background-color: fuchsia}"); - is(elt.style.color, "", - "setting braced style attribute (color)"); - is(elt.style.backgroundColor, "", - "setting braced style attribute (color)"); + elt.setAttribute("style", "{color: blue; background-color: fuchsia}"); + is(elt.style.color, "", "setting braced style attribute (color)"); + is(elt.style.backgroundColor, "", "setting braced style attribute (color)"); - SimpleTest.finish(); + SimpleTest.finish(); } diff --git a/layout/tools/layout-debug/tests/browser/browser_openLayoutDebug.js b/layout/tools/layout-debug/tests/browser/browser_openLayoutDebug.js index e37e44216329..82a8746acf6c 100644 --- a/layout/tools/layout-debug/tests/browser/browser_openLayoutDebug.js +++ b/layout/tools/layout-debug/tests/browser/browser_openLayoutDebug.js @@ -11,13 +11,15 @@ function test() { const windowListener = { onOpenWindow(win) { - info("Observed window open") + info("Observed window open"); const domWindow = win.docShell.domWindow; waitForFocus(() => { - is(domWindow.location, - "chrome://layoutdebug/content/layoutdebug.xul", - "Window location is correct"); + is( + domWindow.location, + "chrome://layoutdebug/content/layoutdebug.xul", + "Window location is correct" + ); domWindow.close(); }, domWindow); }, @@ -26,7 +28,7 @@ function test() { info("Observed window closed"); Services.wm.removeListener(this); finish(); - } + }, }; Services.wm.addListener(windowListener); diff --git a/layout/tools/layout-debug/tests/unit/test_componentsRegistered.js b/layout/tools/layout-debug/tests/unit/test_componentsRegistered.js index 981be72f8ec5..eaf1783cb714 100644 --- a/layout/tools/layout-debug/tests/unit/test_componentsRegistered.js +++ b/layout/tools/layout-debug/tests/unit/test_componentsRegistered.js @@ -1,6 +1,6 @@ function run_test() { - Assert.ok("@mozilla.org/layout-debug/layout-debuggingtools;1" in - Cc); - Assert.ok("@mozilla.org/commandlinehandler/general-startup;1?type=layoutdebug" in - Cc); + Assert.ok("@mozilla.org/layout-debug/layout-debuggingtools;1" in Cc); + Assert.ok( + "@mozilla.org/commandlinehandler/general-startup;1?type=layoutdebug" in Cc + ); } diff --git a/layout/tools/layout-debug/ui/content/layoutdebug.js b/layout/tools/layout-debug/ui/content/layoutdebug.js index a75258ea6d27..0d746edc7b57 100644 --- a/layout/tools/layout-debug/ui/content/layoutdebug.js +++ b/layout/tools/layout-debug/ui/content/layoutdebug.js @@ -6,103 +6,100 @@ var gBrowser; var gProgressListener; var gDebugger; -const NS_LAYOUT_DEBUGGINGTOOLS_CONTRACTID = "@mozilla.org/layout-debug/layout-debuggingtools;1"; -const {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm"); +const NS_LAYOUT_DEBUGGINGTOOLS_CONTRACTID = + "@mozilla.org/layout-debug/layout-debuggingtools;1"; +const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm"); -function nsLDBBrowserContentListener() -{ +function nsLDBBrowserContentListener() { this.init(); } nsLDBBrowserContentListener.prototype = { + init: function() { + this.mStatusText = document.getElementById("status-text"); + this.mURLBar = document.getElementById("urlbar"); + this.mForwardButton = document.getElementById("forward-button"); + this.mBackButton = document.getElementById("back-button"); + this.mStopButton = document.getElementById("stop-button"); + }, - init : function() - { - this.mStatusText = document.getElementById("status-text"); - this.mURLBar = document.getElementById("urlbar"); - this.mForwardButton = document.getElementById("forward-button"); - this.mBackButton = document.getElementById("back-button"); - this.mStopButton = document.getElementById("stop-button"); - }, - - QueryInterface: ChromeUtils.generateQI([Ci.nsIWebProgressListener, - Ci.nsISupportsWeakReference]), + QueryInterface: ChromeUtils.generateQI([ + Ci.nsIWebProgressListener, + Ci.nsISupportsWeakReference, + ]), // nsIWebProgressListener implementation - onStateChange : function(aWebProgress, aRequest, aStateFlags, aStatus) - { - if (!(aStateFlags & Ci.nsIWebProgressListener.STATE_IS_NETWORK) || - aWebProgress != gBrowser.webProgress) - return; + onStateChange: function(aWebProgress, aRequest, aStateFlags, aStatus) { + if ( + !(aStateFlags & Ci.nsIWebProgressListener.STATE_IS_NETWORK) || + aWebProgress != gBrowser.webProgress + ) { + return; + } - if (aStateFlags & Ci.nsIWebProgressListener.STATE_START) { - this.setButtonEnabled(this.mStopButton, true); - this.setButtonEnabled(this.mForwardButton, gBrowser.canGoForward); - this.setButtonEnabled(this.mBackButton, gBrowser.canGoBack); - this.mStatusText.value = "loading..."; - this.mLoading = true; - - } else if (aStateFlags & Ci.nsIWebProgressListener.STATE_STOP) { - this.setButtonEnabled(this.mStopButton, false); - this.mStatusText.value = this.mURLBar.value + " loaded"; - this.mLoading = false; - } - }, - - onProgressChange : function(aWebProgress, aRequest, - aCurSelfProgress, aMaxSelfProgress, - aCurTotalProgress, aMaxTotalProgress) - { - }, - - onLocationChange : function(aWebProgress, aRequest, aLocation, aFlags) - { - this.mURLBar.value = aLocation.spec; + if (aStateFlags & Ci.nsIWebProgressListener.STATE_START) { + this.setButtonEnabled(this.mStopButton, true); this.setButtonEnabled(this.mForwardButton, gBrowser.canGoForward); this.setButtonEnabled(this.mBackButton, gBrowser.canGoBack); - }, + this.mStatusText.value = "loading..."; + this.mLoading = true; + } else if (aStateFlags & Ci.nsIWebProgressListener.STATE_STOP) { + this.setButtonEnabled(this.mStopButton, false); + this.mStatusText.value = this.mURLBar.value + " loaded"; + this.mLoading = false; + } + }, - onStatusChange : function(aWebProgress, aRequest, aStatus, aMessage) - { - this.mStatusText.value = aMessage; - }, + onProgressChange: function( + aWebProgress, + aRequest, + aCurSelfProgress, + aMaxSelfProgress, + aCurTotalProgress, + aMaxTotalProgress + ) {}, - onSecurityChange : function(aWebProgress, aRequest, aState) - { - }, + onLocationChange: function(aWebProgress, aRequest, aLocation, aFlags) { + this.mURLBar.value = aLocation.spec; + this.setButtonEnabled(this.mForwardButton, gBrowser.canGoForward); + this.setButtonEnabled(this.mBackButton, gBrowser.canGoBack); + }, - onContentBlockingEvent : function(aWebProgress, aRequest, aEvent) - { - }, + onStatusChange: function(aWebProgress, aRequest, aStatus, aMessage) { + this.mStatusText.value = aMessage; + }, + + onSecurityChange: function(aWebProgress, aRequest, aState) {}, + + onContentBlockingEvent: function(aWebProgress, aRequest, aEvent) {}, // non-interface methods - setButtonEnabled : function(aButtonElement, aEnabled) - { - if (aEnabled) - aButtonElement.removeAttribute("disabled"); - else - aButtonElement.setAttribute("disabled", "true"); - }, + setButtonEnabled: function(aButtonElement, aEnabled) { + if (aEnabled) { + aButtonElement.removeAttribute("disabled"); + } else { + aButtonElement.setAttribute("disabled", "true"); + } + }, - mStatusText : null, - mURLBar : null, - mForwardButton : null, - mBackButton : null, - mStopButton : null, + mStatusText: null, + mURLBar: null, + mForwardButton: null, + mBackButton: null, + mStopButton: null, - mLoading : false + mLoading: false, +}; -} - -function OnLDBLoad() -{ +function OnLDBLoad() { gBrowser = document.getElementById("browser"); gProgressListener = new nsLDBBrowserContentListener(); gBrowser.addProgressListener(gProgressListener); - gDebugger = Cc[NS_LAYOUT_DEBUGGINGTOOLS_CONTRACTID]. - createInstance(Ci.nsILayoutDebuggingTools); + gDebugger = Cc[NS_LAYOUT_DEBUGGINGTOOLS_CONTRACTID].createInstance( + Ci.nsILayoutDebuggingTools + ); if (window.arguments && window.arguments[0]) { gBrowser.loadURI(window.arguments[0], { @@ -110,7 +107,9 @@ function OnLDBLoad() }); } else { gBrowser.loadURI("about:blank", { - triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({}), + triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal( + {} + ), }); } @@ -119,14 +118,12 @@ function OnLDBLoad() checkPersistentMenus(); } -function checkPersistentMenu(item) -{ +function checkPersistentMenu(item) { var menuitem = document.getElementById("menu_" + item); menuitem.setAttribute("checked", gDebugger[item]); } -function checkPersistentMenus() -{ +function checkPersistentMenus() { // Restore the toggles that are stored in prefs. checkPersistentMenu("paintFlashing"); checkPersistentMenu("paintDumping"); @@ -137,28 +134,26 @@ function checkPersistentMenus() checkPersistentMenu("reflowCounts"); } - -function OnLDBUnload() -{ +function OnLDBUnload() { gBrowser.removeProgressListener(gProgressListener); } -function toggle(menuitem) -{ +function toggle(menuitem) { // trim the initial "menu_" var feature = menuitem.id.substring(5); gDebugger[feature] = menuitem.getAttribute("checked") == "true"; } -function openFile() -{ - var fp = Cc["@mozilla.org/filepicker;1"] - .createInstance(Ci.nsIFilePicker); +function openFile() { + var fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker); fp.init(window, "Select a File", Ci.nsIFilePicker.modeOpen); fp.appendFilters(Ci.nsIFilePicker.filterHTML | Ci.nsIFilePicker.filterAll); fp.open(rv => { - if (rv == Ci.nsIFilePicker.returnOK && fp.fileURL.spec && - fp.fileURL.spec.length > 0) { + if ( + rv == Ci.nsIFilePicker.returnOK && + fp.fileURL.spec && + fp.fileURL.spec.length > 0 + ) { gBrowser.loadURI(fp.fileURL.spec, { triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(), }); diff --git a/layout/tools/recording/RecordingCmdLine.jsm b/layout/tools/recording/RecordingCmdLine.jsm index 691a4938a2e0..7afc670cc92d 100644 --- a/layout/tools/recording/RecordingCmdLine.jsm +++ b/layout/tools/recording/RecordingCmdLine.jsm @@ -3,61 +3,67 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ function RecordingCmdLineHandler() {} -RecordingCmdLineHandler.prototype = -{ - /* nsISupports */ - QueryInterface: ChromeUtils.generateQI([Ci.nsICommandLineHandler]), +RecordingCmdLineHandler.prototype = { + /* nsISupports */ + QueryInterface: ChromeUtils.generateQI([Ci.nsICommandLineHandler]), - /* nsICommandLineHandler */ - handle : function handler_handle(cmdLine) { - var args = { }; - args.wrappedJSObject = args; - try { - var uristr = cmdLine.handleFlagWithParam("recording", false); - if (uristr == null) - return; - try { - args.uri = cmdLine.resolveURI(uristr).spec; - } - catch (e) { - return; - } - } - catch (e) { - cmdLine.handleFlag("recording", true); - } + /* nsICommandLineHandler */ + handle: function handler_handle(cmdLine) { + var args = {}; + args.wrappedJSObject = args; + try { + var uristr = cmdLine.handleFlagWithParam("recording", false); + if (uristr == null) { + return; + } + try { + args.uri = cmdLine.resolveURI(uristr).spec; + } catch (e) { + return; + } + } catch (e) { + cmdLine.handleFlag("recording", true); + } - /** - * Manipulate preferences by adding to the *default* branch. Adding - * to the default branch means the changes we make won't get written - * back to user preferences. - * - * We want to do this here rather than in reftest.js because it's - * important to set the recording pref before the platform Init gets - * called. - */ - var prefs = Cc["@mozilla.org/preferences-service;1"]. - getService(Ci.nsIPrefService); - var branch = prefs.getDefaultBranch(""); + /** + * Manipulate preferences by adding to the *default* branch. Adding + * to the default branch means the changes we make won't get written + * back to user preferences. + * + * We want to do this here rather than in reftest.js because it's + * important to set the recording pref before the platform Init gets + * called. + */ + var prefs = Cc["@mozilla.org/preferences-service;1"].getService( + Ci.nsIPrefService + ); + var branch = prefs.getDefaultBranch(""); - try { - var outputstr = cmdLine.handleFlagWithParam("recording-output", false); - if (outputstr != null) { - branch.setCharPref("gfx.2d.recordingfile", outputstr); - } - } catch (e) { } + try { + var outputstr = cmdLine.handleFlagWithParam("recording-output", false); + if (outputstr != null) { + branch.setCharPref("gfx.2d.recordingfile", outputstr); + } + } catch (e) {} - branch.setBoolPref("gfx.2d.recording", true); + branch.setBoolPref("gfx.2d.recording", true); - var wwatch = Cc["@mozilla.org/embedcomp/window-watcher;1"] - .getService(Ci.nsIWindowWatcher); - wwatch.openWindow(null, "chrome://recording/content/recording.xul", "_blank", - "chrome,dialog=no,all", args); - cmdLine.preventDefault = true; - }, + var wwatch = Cc["@mozilla.org/embedcomp/window-watcher;1"].getService( + Ci.nsIWindowWatcher + ); + wwatch.openWindow( + null, + "chrome://recording/content/recording.xul", + "_blank", + "chrome,dialog=no,all", + args + ); + cmdLine.preventDefault = true; + }, - helpInfo : " --recording Record drawing for a given URL.\n" + - " --recording-output Specify destination file for a drawing recording.\n" + helpInfo: + " --recording Record drawing for a given URL.\n" + + " --recording-output Specify destination file for a drawing recording.\n", }; var EXPORTED_SYMBOLS = ["RecordingCmdLineHandler"]; diff --git a/layout/tools/recording/recording.js b/layout/tools/recording/recording.js index 6ef4511cc8af..5c663a6479c9 100644 --- a/layout/tools/recording/recording.js +++ b/layout/tools/recording/recording.js @@ -11,36 +11,42 @@ var gContainingWindow = null; var gBrowser; function OnDocumentLoad(evt) { - if (evt.target != gBrowser.contentDocument || evt.target.location == "about:blank") - return; - gBrowser.removeEventListener("load", OnDocumentLoad, true); - gContainingWindow.close(); + if ( + evt.target != gBrowser.contentDocument || + evt.target.location == "about:blank" + ) { + return; + } + gBrowser.removeEventListener("load", OnDocumentLoad, true); + gContainingWindow.close(); } this.OnRecordingLoad = function OnRecordingLoad(win) { - if (win === undefined || win == null) { - win = window; - } - if (gContainingWindow == null && win != null) { - gContainingWindow = win; - } + if (win === undefined || win == null) { + win = window; + } + if (gContainingWindow == null && win != null) { + gContainingWindow = win; + } - gBrowser = gContainingWindow.document.getElementById("browser"); + gBrowser = gContainingWindow.document.getElementById("browser"); - var gfxInfo = (NS_GFXINFO_CONTRACTID in Cc) && Cc[NS_GFXINFO_CONTRACTID].getService(Ci.nsIGfxInfo); - var info = gfxInfo.getInfo(); - dump(info.AzureContentBackend + "\n"); - if (info.AzureContentBackend == "none") { - alert("Page recordings may only be made with Azure content enabled."); - gContainingWindow.close(); - return; - } + var gfxInfo = + NS_GFXINFO_CONTRACTID in Cc && + Cc[NS_GFXINFO_CONTRACTID].getService(Ci.nsIGfxInfo); + var info = gfxInfo.getInfo(); + dump(info.AzureContentBackend + "\n"); + if (info.AzureContentBackend == "none") { + alert("Page recordings may only be made with Azure content enabled."); + gContainingWindow.close(); + return; + } - gBrowser.addEventListener("load", OnDocumentLoad, true); + gBrowser.addEventListener("load", OnDocumentLoad, true); - var args = window.arguments[0].wrappedJSObject; + var args = window.arguments[0].wrappedJSObject; - gBrowser.loadURI(args.uri, { - triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({}), - }); + gBrowser.loadURI(args.uri, { + triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({}), + }); }; diff --git a/layout/xul/test/browser_bug1163304.js b/layout/xul/test/browser_bug1163304.js index 634c6fa6cf41..149a56bd79ae 100644 --- a/layout/xul/test/browser_bug1163304.js +++ b/layout/xul/test/browser_bug1163304.js @@ -1,4 +1,7 @@ -ChromeUtils.import("resource://testing-common/CustomizableUITestUtils.jsm", this); +ChromeUtils.import( + "resource://testing-common/CustomizableUITestUtils.jsm", + this +); let gCUITestUtils = new CustomizableUITestUtils(window); add_task(async function test_setup() { @@ -12,8 +15,11 @@ add_task(async function() { BrowserSearch.searchBar.focus(); let DOMWindowUtils = EventUtils._getDOMWindowUtils(); - is(DOMWindowUtils.IMEStatus, DOMWindowUtils.IME_STATUS_ENABLED, - "IME should be available when searchbar has focus"); + is( + DOMWindowUtils.IMEStatus, + DOMWindowUtils.IME_STATUS_ENABLED, + "IME should be available when searchbar has focus" + ); let searchPopup = document.getElementById("PopupSearchAutoComplete"); @@ -23,8 +29,11 @@ add_task(async function() { await shownPromise; await new Promise(r => setTimeout(r, 0)); - is(DOMWindowUtils.IMEStatus, DOMWindowUtils.IME_STATUS_ENABLED, - "IME should be available even when the popup of searchbar is open"); + is( + DOMWindowUtils.IMEStatus, + DOMWindowUtils.IME_STATUS_ENABLED, + "IME should be available even when the popup of searchbar is open" + ); // Activate the menubar, then, the popup should be closed let hiddenPromise = BrowserTestUtils.waitForEvent(searchPopup, "popuphidden"); @@ -32,10 +41,16 @@ add_task(async function() { await hiddenPromise; await new Promise(r => setTimeout(r, 0)); - is(DOMWindowUtils.IMEStatus, DOMWindowUtils.IME_STATUS_DISABLED, - "IME should not be available when menubar is active"); + is( + DOMWindowUtils.IMEStatus, + DOMWindowUtils.IME_STATUS_DISABLED, + "IME should not be available when menubar is active" + ); // Inactivate the menubar (and restore the focus to the searchbar EventUtils.synthesizeKey("KEY_Escape"); - is(DOMWindowUtils.IMEStatus, DOMWindowUtils.IME_STATUS_ENABLED, - "IME should be available after focus is back to the searchbar"); + is( + DOMWindowUtils.IMEStatus, + DOMWindowUtils.IME_STATUS_ENABLED, + "IME should be available after focus is back to the searchbar" + ); }); diff --git a/layout/xul/test/browser_bug685470.js b/layout/xul/test/browser_bug685470.js index 296ce71d0276..8542fbaeb64d 100644 --- a/layout/xul/test/browser_bug685470.js +++ b/layout/xul/test/browser_bug685470.js @@ -1,19 +1,38 @@ add_task(async function() { - const html = "

This paragraph has a tooltip.

"; - await BrowserTestUtils.openNewForegroundTab(gBrowser, "data:text/html," + html); + const html = + '

This paragraph has a tooltip.

'; + await BrowserTestUtils.openNewForegroundTab( + gBrowser, + "data:text/html," + html + ); await new Promise(resolve => { - SpecialPowers.pushPrefEnv({"set": [["ui.tooltipDelay", 0]]}, resolve); + SpecialPowers.pushPrefEnv({ set: [["ui.tooltipDelay", 0]] }, resolve); }); - await BrowserTestUtils.synthesizeMouseAtCenter("#p1", { type: "mousemove" }, - gBrowser.selectedBrowser); - await BrowserTestUtils.synthesizeMouseAtCenter("#p1", { }, gBrowser.selectedBrowser); + await BrowserTestUtils.synthesizeMouseAtCenter( + "#p1", + { type: "mousemove" }, + gBrowser.selectedBrowser + ); + await BrowserTestUtils.synthesizeMouseAtCenter( + "#p1", + {}, + gBrowser.selectedBrowser + ); // Wait until the tooltip timeout triggers that would normally have opened the popup. await new Promise(resolve => setTimeout(resolve, 0)); - is(document.getElementById("aHTMLTooltip").state, "closed", "local tooltip is closed"); - is(document.getElementById("remoteBrowserTooltip").state, "closed", "remote tooltip is closed"); + is( + document.getElementById("aHTMLTooltip").state, + "closed", + "local tooltip is closed" + ); + is( + document.getElementById("remoteBrowserTooltip").state, + "closed", + "remote tooltip is closed" + ); gBrowser.removeCurrentTab(); }); diff --git a/layout/xul/test/browser_bug703210.js b/layout/xul/test/browser_bug703210.js index 87f5968d4dcd..c02b7aba086e 100644 --- a/layout/xul/test/browser_bug703210.js +++ b/layout/xul/test/browser_bug703210.js @@ -1,32 +1,55 @@ add_task(async function() { - const url = "data:text/html," + + const url = + "data:text/html," + "" + - "

This paragraph has a tooltip.

" + - "

This paragraph doesn't have tooltip.

"; + '

This paragraph has a tooltip.

' + + '

This paragraph doesn\'t have tooltip.

'; let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, url); let browser = gBrowser.selectedBrowser; await new Promise(resolve => { - SpecialPowers.pushPrefEnv({"set": [["ui.tooltipDelay", 0]]}, resolve); + SpecialPowers.pushPrefEnv({ set: [["ui.tooltipDelay", 0]] }, resolve); }); - let popupShownPromise = BrowserTestUtils.waitForEvent(document, "popupshown", false, event => { - is(event.originalTarget.localName, "tooltip", "tooltip is showing"); - return true; - }); - let popupHiddenPromise = BrowserTestUtils.waitForEvent(document, "popuphidden", false, event => { - is(event.originalTarget.localName, "tooltip", "tooltip is hidden"); - return true; - }); + let popupShownPromise = BrowserTestUtils.waitForEvent( + document, + "popupshown", + false, + event => { + is(event.originalTarget.localName, "tooltip", "tooltip is showing"); + return true; + } + ); + let popupHiddenPromise = BrowserTestUtils.waitForEvent( + document, + "popuphidden", + false, + event => { + is(event.originalTarget.localName, "tooltip", "tooltip is hidden"); + return true; + } + ); // Send a mousemove at a known position to start the test. - await BrowserTestUtils.synthesizeMouseAtCenter("#p2", { type: "mousemove" }, browser); - await BrowserTestUtils.synthesizeMouseAtCenter("#p1", { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouseAtCenter( + "#p2", + { type: "mousemove" }, + browser + ); + await BrowserTestUtils.synthesizeMouseAtCenter( + "#p1", + { type: "mousemove" }, + browser + ); await popupShownPromise; - await BrowserTestUtils.synthesizeMouseAtCenter("#p2", { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouseAtCenter( + "#p2", + { type: "mousemove" }, + browser + ); await popupHiddenPromise; gBrowser.removeCurrentTab(); diff --git a/layout/xul/test/browser_bug706743.js b/layout/xul/test/browser_bug706743.js index 2d72260e8ac3..2d9cea22e1db 100644 --- a/layout/xul/test/browser_bug706743.js +++ b/layout/xul/test/browser_bug706743.js @@ -1,27 +1,49 @@ add_task(async function() { - const url = "data:text/html," + - "here is an anchor element"; + const url = + "data:text/html," + + 'here is an anchor element'; let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, url); let browser = gBrowser.selectedBrowser; await new Promise(resolve => { - SpecialPowers.pushPrefEnv({"set": [["ui.tooltipDelay", 0]]}, resolve); + SpecialPowers.pushPrefEnv({ set: [["ui.tooltipDelay", 0]] }, resolve); }); // Send a mousemove at a known position to start the test. - await BrowserTestUtils.synthesizeMouse("#target", -5, -5, { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#target", + -5, + -5, + { type: "mousemove" }, + browser + ); // show tooltip by mousemove into target. let popupShownPromise = BrowserTestUtils.waitForEvent(document, "popupshown"); - await BrowserTestUtils.synthesizeMouse("#target", 5, 15, { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#target", + 5, + 15, + { type: "mousemove" }, + browser + ); await popupShownPromise; // hide tooltip by mousemove to outside. - let popupHiddenPromise = BrowserTestUtils.waitForEvent(document, "popuphidden"); - await BrowserTestUtils.synthesizeMouse("#target", -5, 15, { type: "mousemove" }, browser); + let popupHiddenPromise = BrowserTestUtils.waitForEvent( + document, + "popuphidden" + ); + await BrowserTestUtils.synthesizeMouse( + "#target", + -5, + 15, + { type: "mousemove" }, + browser + ); await popupHiddenPromise; // mousemove into the target and start drag by emulation via nsIDragService. @@ -32,48 +54,96 @@ add_task(async function() { // Emulate a buggy mousemove event. widget might dispatch mousemove event // during drag. - function tooltipNotExpected() - { + function tooltipNotExpected() { ok(false, "tooltip is shown during drag"); } addEventListener("popupshown", tooltipNotExpected, true); - let dragService = Cc["@mozilla.org/widget/dragservice;1"]. - getService(Ci.nsIDragService); + let dragService = Cc["@mozilla.org/widget/dragservice;1"].getService( + Ci.nsIDragService + ); dragService.startDragSession(); - await BrowserTestUtils.synthesizeMouse("#target", 5, 15, { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#target", + 5, + 15, + { type: "mousemove" }, + browser + ); // eslint-disable-next-line mozilla/no-arbitrary-setTimeout await new Promise(resolve => setTimeout(resolve, 100)); removeEventListener("popupshown", tooltipNotExpected, true); dragService.endDragSession(true); - await BrowserTestUtils.synthesizeMouse("#target", -5, -5, { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#target", + -5, + -5, + { type: "mousemove" }, + browser + ); // If tooltip listener used a flag for managing D&D state, we would need // to test if the tooltip is shown after drag. // show tooltip by mousemove into target. popupShownPromise = BrowserTestUtils.waitForEvent(document, "popupshown"); - await BrowserTestUtils.synthesizeMouse("#target", 5, 15, { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#target", + 5, + 15, + { type: "mousemove" }, + browser + ); await popupShownPromise; // hide tooltip by mousemove to outside. popupHiddenPromise = BrowserTestUtils.waitForEvent(document, "popuphidden"); - await BrowserTestUtils.synthesizeMouse("#target", -5, 15, { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#target", + -5, + 15, + { type: "mousemove" }, + browser + ); await popupHiddenPromise; // Show tooltip after mousedown popupShownPromise = BrowserTestUtils.waitForEvent(document, "popupshown"); - await BrowserTestUtils.synthesizeMouse("#target", 5, 15, { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#target", + 5, + 15, + { type: "mousemove" }, + browser + ); await popupShownPromise; popupHiddenPromise = BrowserTestUtils.waitForEvent(document, "popuphidden"); - await BrowserTestUtils.synthesizeMouse("#target", 5, 15, { type: "mousedown" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#target", + 5, + 15, + { type: "mousedown" }, + browser + ); await popupHiddenPromise; - await BrowserTestUtils.synthesizeMouse("#target", 5, 15, { type: "mouseup" }, browser); - await BrowserTestUtils.synthesizeMouse("#target", -5, 15, { type: "mousemove" }, browser); + await BrowserTestUtils.synthesizeMouse( + "#target", + 5, + 15, + { type: "mouseup" }, + browser + ); + await BrowserTestUtils.synthesizeMouse( + "#target", + -5, + 15, + { type: "mousemove" }, + browser + ); ok(true, "tooltips appear properly");