зеркало из https://github.com/mozilla/gecko-dev.git
"Bug 1551578 - displayed a warning when text-overflow is used incorrectly. " r=pbro
Differential Revision: https://phabricator.services.mozilla.com/D62407 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Родитель
df7b286303
Коммит
6218068e2b
|
@ -37,6 +37,8 @@ inactive-css-property-is-impossible-to-override-in-visited = It’s impossible t
|
|||
|
||||
inactive-css-position-property-on-unpositioned-box = <strong>{ $property }</strong> has no effect on this element since it’s not a positioned element.
|
||||
|
||||
inactive-text-overflow-when-no-overflow = <strong>{ $property }</strong> has no effect on this element since <strong>overflow:hidden</strong> is not set.
|
||||
|
||||
## 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.
|
||||
|
@ -64,3 +66,5 @@ inactive-css-non-replaced-inline-or-table-column-or-column-group-fix = Try addin
|
|||
inactive-css-not-display-block-on-floated-fix = Try removing <strong>float</strong> or adding <strong>display:block</strong>. { learn-more }
|
||||
|
||||
inactive-css-position-property-on-unpositioned-box-fix = Try setting its <strong>position</strong> property to something other than <strong>static</strong>. { learn-more }
|
||||
|
||||
inactive-text-overflow-when-no-overflow-fix = Try adding <strong>overflow:hidden</strong>. { learn-more }
|
||||
|
|
|
@ -77,7 +77,7 @@ class InactivePropertyHelper {
|
|||
* }
|
||||
*
|
||||
* If you add a new rule, also add a test for it in:
|
||||
* server/tests/mochitest/test_inspector-inactive-property-helper.html
|
||||
* server/tests/chrome/test_inspector-inactive-property-helper.html
|
||||
*
|
||||
* The main export is `isPropertyUsed()`, which can be used to check if a
|
||||
* property is used or not, and why.
|
||||
|
@ -281,6 +281,22 @@ class InactivePropertyHelper {
|
|||
msgId: "inactive-css-position-property-on-unpositioned-box",
|
||||
numFixProps: 1,
|
||||
},
|
||||
// text-overflow property used on elements for which overflow is not set to hidden.
|
||||
// Note that this validator only checks if overflow:hidden is set on the element.
|
||||
// In theory, we should also be checking if the element is a block as this doesn't
|
||||
// normally work on inline element. However there are many edge cases that made it
|
||||
// impossible for the JS code to determine whether the type of box would support
|
||||
// text-overflow. So, rather than risking to show invalid warnings, we decided to
|
||||
// only warn when overflow:hidden wasn't set. There is more information about this
|
||||
// in this discussion https://phabricator.services.mozilla.com/D62407 and on the bug
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1551578
|
||||
{
|
||||
invalidProperties: ["text-overflow"],
|
||||
when: () => !this.checkComputedStyle("overflow", ["hidden"]),
|
||||
fixId: "inactive-text-overflow-when-no-overflow-fix",
|
||||
msgId: "inactive-text-overflow-when-no-overflow",
|
||||
numFixProps: 1,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
/* 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 `text-overflow` test cases.
|
||||
export default [
|
||||
{
|
||||
info: "text-overflow is inactive when overflow is not set",
|
||||
property: "text-overflow",
|
||||
tagName: "div",
|
||||
rules: ["div { text-overflow: ellipsis; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info: "text-overflow is active when overflow is set to hidden",
|
||||
property: "text-overflow",
|
||||
tagName: "div",
|
||||
rules: ["div { text-overflow: ellipsis; overflow: hidden; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "text-overflow is inactive when overflow is set to visible",
|
||||
property: "text-overflow",
|
||||
tagName: "div",
|
||||
rules: ["div { text-overflow: ellipsis; overflow: visible; }"],
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
info:
|
||||
"as soon as overflow:hidden is set, text-overflow is active whatever the box type",
|
||||
property: "text-overflow",
|
||||
tagName: "span",
|
||||
rules: ["span { text-overflow: ellipsis; overflow: hidden; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info:
|
||||
"as soon as overflow:hidden is set, text-overflow is active whatever the box type",
|
||||
property: "text-overflow",
|
||||
tagName: "legend",
|
||||
rules: ["legend { text-overflow: ellipsis; overflow: hidden; }"],
|
||||
isActive: true,
|
||||
},
|
||||
];
|
|
@ -51,6 +51,7 @@ SimpleTest.waitForExplicitFinish();
|
|||
"place-items-content.js",
|
||||
"positioned.js",
|
||||
"vertical-align.js",
|
||||
"text-overflow.js"
|
||||
].map(file => `${FOLDER}/${file}`);
|
||||
|
||||
// Import all the test cases
|
||||
|
|
Загрузка…
Ссылка в новой задаче