зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1551569 - New inactive CSS rule to show warning when margin or padding is used on internal table elements. r=nchevobbe,flod
Differential Revision: https://phabricator.services.mozilla.com/D101091
This commit is contained in:
Sebastian Zartner
Родитель
78d596814b
Коммит
bf1098943a
|
|
@ -41,6 +41,10 @@ inactive-text-overflow-when-no-overflow = <strong>{ $property }</strong> has no
|
|||
|
||||
inactive-outline-radius-when-outline-style-auto-or-none = <strong>{ $property }</strong> has no effect on this element because its <strong>outline-style</strong> is <strong>auto</strong> or <strong>none</strong>.
|
||||
|
||||
inactive-css-not-for-internal-table-elements = <strong>{ $property }</strong> has no effect on internal table elements.
|
||||
|
||||
inactive-css-not-for-internal-table-elements-except-table-cells = <strong>{ $property }</strong> has no effect on internal table elements except table cells.
|
||||
|
||||
## In the Rule View when a CSS property cannot be successfully applied we display
|
||||
## an icon. When this icon is hovered this message is displayed to explain how
|
||||
## the problem can be solved.
|
||||
|
|
@ -71,6 +75,10 @@ inactive-css-position-property-on-unpositioned-box-fix = Try setting its <strong
|
|||
|
||||
inactive-text-overflow-when-no-overflow-fix = Try adding <strong>overflow:hidden</strong>. { learn-more }
|
||||
|
||||
inactive-css-not-for-internal-table-elements-fix = Try setting its <strong>display</strong> property to something else than <strong>table-cell</strong>, <strong>table-column</strong>, <strong>table-row</strong>, <strong>table-column-group</strong>, <strong>table-row-group</strong>, or <strong>table-footer-group</strong>. { learn-more }
|
||||
|
||||
inactive-css-not-for-internal-table-elements-except-table-cells-fix = Try setting its <strong>display</strong> property to something else than <strong>table-column</strong>, <strong>table-row</strong>, <strong>table-column-group</strong>, <strong>table-row-group</strong>, or <strong>table-footer-group</strong>. { learn-more }
|
||||
|
||||
inactive-outline-radius-when-outline-style-auto-or-none-fix = Try setting its <strong>outline-style</strong> property to something other than <strong>auto</strong> or <strong>none</strong>. { learn-more }
|
||||
|
||||
## In the Rule View when a CSS property may have compatibility issues with other browsers
|
||||
|
|
|
|||
|
|
@ -313,6 +313,50 @@ class InactivePropertyHelper {
|
|||
msgId: "inactive-outline-radius-when-outline-style-auto-or-none",
|
||||
numFixProps: 1,
|
||||
},
|
||||
// margin properties used on table internal elements.
|
||||
{
|
||||
invalidProperties: [
|
||||
"margin",
|
||||
"margin-block",
|
||||
"margin-block-end",
|
||||
"margin-block-start",
|
||||
"margin-bottom",
|
||||
"margin-inline",
|
||||
"margin-inline-end",
|
||||
"margin-inline-start",
|
||||
"margin-left",
|
||||
"margin-right",
|
||||
"margin-top",
|
||||
],
|
||||
when: () => this.internalTableElement,
|
||||
fixId: "inactive-css-not-for-internal-table-elements-fix",
|
||||
msgId: "inactive-css-not-for-internal-table-elements",
|
||||
numFixProps: 1,
|
||||
},
|
||||
// padding properties used on table internal elements except table cells.
|
||||
{
|
||||
invalidProperties: [
|
||||
"padding",
|
||||
"padding-block",
|
||||
"padding-block-end",
|
||||
"padding-block-start",
|
||||
"padding-bottom",
|
||||
"padding-inline",
|
||||
"padding-inline-end",
|
||||
"padding-inline-start",
|
||||
"padding-left",
|
||||
"padding-right",
|
||||
"padding-top",
|
||||
],
|
||||
when: () =>
|
||||
this.internalTableElement &&
|
||||
!this.checkComputedStyle("display", ["table-cell"]),
|
||||
fixId:
|
||||
"inactive-css-not-for-internal-table-elements-except-table-cells-fix",
|
||||
msgId:
|
||||
"inactive-css-not-for-internal-table-elements-except-table-cells",
|
||||
numFixProps: 1,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -578,7 +622,22 @@ class InactivePropertyHelper {
|
|||
}
|
||||
|
||||
/**
|
||||
* Check if the curent node is a horizontal table track. That is: either a table row
|
||||
* Check if the current node is an internal table element.
|
||||
*/
|
||||
get internalTableElement() {
|
||||
return this.checkComputedStyle("display", [
|
||||
"table-cell",
|
||||
"table-row",
|
||||
"table-row-group",
|
||||
"table-header-group",
|
||||
"table-footer-group",
|
||||
"table-column",
|
||||
"table-column-group",
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the current node is a horizontal table track. That is: either a table row
|
||||
* displayed in horizontal writing mode, or a table column displayed in vertical writing
|
||||
* mode.
|
||||
*/
|
||||
|
|
@ -594,7 +653,7 @@ class InactivePropertyHelper {
|
|||
}
|
||||
|
||||
/**
|
||||
* Check if the curent node is a vertical table track. That is: either a table row
|
||||
* Check if the current node is a vertical table track. That is: either a table row
|
||||
* displayed in vertical writing mode, or a table column displayed in horizontal writing
|
||||
* mode.
|
||||
*/
|
||||
|
|
@ -624,7 +683,7 @@ class InactivePropertyHelper {
|
|||
}
|
||||
|
||||
/**
|
||||
* Check if the curent node is a horizontal table track group. That is: either a table
|
||||
* Check if the current node is a horizontal table track group. That is: either a table
|
||||
* row group displayed in horizontal writing mode, or a table column group displayed in
|
||||
* vertical writing mode.
|
||||
*/
|
||||
|
|
@ -643,7 +702,7 @@ class InactivePropertyHelper {
|
|||
}
|
||||
|
||||
/**
|
||||
* Check if the curent node is a vertical table track group. That is: either a table row
|
||||
* Check if the current node is a vertical table track group. That is: either a table row
|
||||
* group displayed in vertical writing mode, or a table column group displayed in
|
||||
* horizontal writing mode.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,260 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
// InactivePropertyHelper `align-content` test cases.
|
||||
|
||||
export default [
|
||||
{
|
||||
info: "margin is active on block containers",
|
||||
property: "margin",
|
||||
tagName: "div",
|
||||
rules: ["div { margin: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "margin is active on flex containers",
|
||||
property: "margin",
|
||||
tagName: "div",
|
||||
rules: ["div { display: flex; margin: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "margin is active on grid containers",
|
||||
property: "margin",
|
||||
tagName: "div",
|
||||
rules: ["div { display: grid; margin: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "margin is active on tables",
|
||||
property: "margin",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table; margin: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "margin is active on inline tables",
|
||||
property: "margin",
|
||||
tagName: "div",
|
||||
rules: ["div { display: inline-table; margin: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "margin is active on table captions",
|
||||
property: "margin",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-caption; margin: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "margin is inactive on table cells",
|
||||
property: "margin",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; margin: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-block is inactive on table cells",
|
||||
property: "margin-block",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; margin-block: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-block-start is inactive on table cells",
|
||||
property: "margin-block-start",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; margin-block-start: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-block-end is inactive on table cells",
|
||||
property: "margin-block-end",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; margin-block-end: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-block is inactive on table cells",
|
||||
property: "margin-block",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; margin-block: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-bottom is inactive on table rows",
|
||||
property: "margin-bottom",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row; margin-bottom: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-inline-start is inactive on table rows",
|
||||
property: "margin-inline-start",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row; margin-inline-start: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-inline-end is inactive on table rows",
|
||||
property: "margin-inline-end",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row; margin-inline-end: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-inline is inactive on table rows",
|
||||
property: "margin-inline",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row; margin-inline: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-left is inactive on table columns",
|
||||
property: "margin-left",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-column; margin-left: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-right is inactive on table row groups",
|
||||
property: "margin-right",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row-group; margin-right: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "margin-top is inactive on table column groups",
|
||||
property: "margin-top",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-column-group; margin-top: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "padding is active on block containers",
|
||||
property: "padding",
|
||||
tagName: "div",
|
||||
rules: ["div { padding: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding is active on flex containers",
|
||||
property: "padding",
|
||||
tagName: "div",
|
||||
rules: ["div { display: flex; padding: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding is active on grid containers",
|
||||
property: "padding",
|
||||
tagName: "div",
|
||||
rules: ["div { display: grid; padding: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding is active on tables",
|
||||
property: "padding",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table; padding: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding is active on inline tables",
|
||||
property: "padding",
|
||||
tagName: "div",
|
||||
rules: ["div { display: inline-table; padding: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding is active on table captions",
|
||||
property: "padding",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-caption; padding: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding is active on table cells",
|
||||
property: "padding",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; padding: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding-block is active on table cells",
|
||||
property: "padding-block",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; padding-block: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding-block-start is active on table cells",
|
||||
property: "padding-block-start",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; padding-block-start: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding-block-end is active on table cells",
|
||||
property: "padding-block-end",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; padding-block-end: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding-block is active on table cells",
|
||||
property: "padding-block",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-cell; padding-block: 10px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "padding-bottom is inactive on table rows",
|
||||
property: "padding-bottom",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row; padding-bottom: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "padding-inline-start is inactive on table rows",
|
||||
property: "padding-inline-start",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row; padding-inline-start: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "padding-inline-end is inactive on table rows",
|
||||
property: "padding-inline-end",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row; padding-inline-end: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "padding-inline is inactive on table rows",
|
||||
property: "padding-inline",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row; padding-inline: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "padding-left is inactive on table columns",
|
||||
property: "padding-left",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-column; padding-left: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "padding-right is inactive on table row groups",
|
||||
property: "padding-right",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-row-group; padding-right: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "padding-top is inactive on table column groups",
|
||||
property: "padding-top",
|
||||
tagName: "div",
|
||||
rules: ["div { display: table-column-group; padding-top: 10px; }"],
|
||||
isActive: false,
|
||||
},
|
||||
];
|
||||
|
|
@ -47,6 +47,7 @@ SimpleTest.waitForExplicitFinish();
|
|||
"float.js",
|
||||
"gap.js",
|
||||
"grid-with-absolute-properties.js",
|
||||
"margin-padding.js",
|
||||
"max-min-width-height.js",
|
||||
"place-items-content.js",
|
||||
"positioned.js",
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче