mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-03 18:47:53 +00:00
Bug 1557330 - Lowercase node.nodename in InactivePropertyHelper. r=rcaliman.
Element.nodeName is usually all-caps, and we were testing lower cased version, which brought erroneous results. The test wasn't picking those errors because we were creating the element from a XHTML document, where Element.nodeName keep the casing used for their creation. The test is modified to deal with an HTML document instead. After the test was modified, I could see it was failing, and was then able to do the actual feature fix. Differential Revision: https://phabricator.services.mozilla.com/D34149 --HG-- rename : devtools/server/tests/browser/browser_inspector-inactive-property-helper.js => devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html extra : moz-landing-system : lando
This commit is contained in:
Nicolas Chevobbe
parent
cfee488773
commit
fe0fe361da
@ -489,7 +489,7 @@ class InactivePropertyHelper {
|
||||
* @returns {String}
|
||||
*/
|
||||
get nodeName() {
|
||||
return this.node.nodeName;
|
||||
return this.node.nodeName ? this.node.nodeName.toLowerCase() : null;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -90,7 +90,6 @@ skip-if = e10s # Bug 1183605 - devtools/server/tests/browser/ tests are still di
|
||||
skip-if = e10s # Bug 1183605 - devtools/server/tests/browser/ tests are still disabled in E10S
|
||||
[browser_debugger_server.js]
|
||||
[browser_inspector-anonymous.js]
|
||||
[browser_inspector-inactive-property-helper.js]
|
||||
[browser_inspector-insert.js]
|
||||
[browser_inspector-mutations-childlist.js]
|
||||
[browser_inspector-mutations-frameload.js]
|
||||
|
||||
@ -1,371 +0,0 @@
|
||||
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test expected outputs of the inactivePropertyHelper's isPropertyUsed function.
|
||||
|
||||
// This is more of a unit test than a mochitest-browser test, but can't be tested with an
|
||||
// xpcshell test as the inactivePropertyHelper requires the DOM to work (e.g for computed
|
||||
// styles).
|
||||
|
||||
add_task(async function() {
|
||||
await pushPref("devtools.inspector.inactive.css.enabled", true);
|
||||
|
||||
const {inactivePropertyHelper} = require("devtools/server/actors/utils/inactive-property-helper");
|
||||
let { isPropertyUsed } = inactivePropertyHelper;
|
||||
isPropertyUsed = isPropertyUsed.bind(inactivePropertyHelper);
|
||||
|
||||
// A single test case is an object of the following shape:
|
||||
// - {String} info: a summary of the test case
|
||||
// - {String} property: the CSS property that should be tested
|
||||
// - {String} tagName: the tagName of the element we're going to test
|
||||
// - {Array<String>} rules: An array of the rules that will be applied on the element.
|
||||
// This can't be empty as isPropertyUsed need a rule.
|
||||
// - {Integer} ruleIndex (optional): If there are multiples rules in `rules`, the index
|
||||
// of the one that should be tested in isPropertyUsed.
|
||||
// - {Boolean} isActive: should the property be active (isPropertyUsed `used` result).
|
||||
const tests = [{
|
||||
info: "vertical-align is inactive on a block element",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div { vertical-align: top; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "vertical-align is inactive on a span with display block",
|
||||
property: "vertical-align",
|
||||
tagName: "span",
|
||||
rules: ["span { vertical-align: top; display: block;}"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "vertical-align is active on a div with display inline-block",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div { vertical-align: top; display: inline-block;}"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "vertical-align is active on a table-cell",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div { vertical-align: top; display: table-cell;}"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "vertical-align is active on a block element ::first-letter",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div::first-letter { vertical-align: top; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "vertical-align is active on a block element ::first-line",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div::first-line { vertical-align: top; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "vertical-align is active on an inline element",
|
||||
property: "vertical-align",
|
||||
tagName: "span",
|
||||
rules: ["span { vertical-align: top; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "width is inactive on a non-replaced inline element",
|
||||
property: "width",
|
||||
tagName: "span",
|
||||
rules: ["span { width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-width is inactive on a non-replaced inline element",
|
||||
property: "min-width",
|
||||
tagName: "span",
|
||||
rules: ["span { min-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-width is inactive on a non-replaced inline element",
|
||||
property: "max-width",
|
||||
tagName: "span",
|
||||
rules: ["span { max-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "width is inactive on an tr element",
|
||||
property: "width",
|
||||
tagName: "tr",
|
||||
rules: ["tr { width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-width is inactive on an tr element",
|
||||
property: "min-width",
|
||||
tagName: "tr",
|
||||
rules: ["tr { min-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-width is inactive on an tr element",
|
||||
property: "max-width",
|
||||
tagName: "tr",
|
||||
rules: ["tr { max-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "width is inactive on an thead element",
|
||||
property: "width",
|
||||
tagName: "thead",
|
||||
rules: ["thead { width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-width is inactive on an thead element",
|
||||
property: "min-width",
|
||||
tagName: "thead",
|
||||
rules: ["thead { min-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-width is inactive on an thead element",
|
||||
property: "max-width",
|
||||
tagName: "thead",
|
||||
rules: ["thead { max-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "width is inactive on an tfoot element",
|
||||
property: "width",
|
||||
tagName: "tfoot",
|
||||
rules: ["tfoot { width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-width is inactive on an tfoot element",
|
||||
property: "min-width",
|
||||
tagName: "tfoot",
|
||||
rules: ["tfoot { min-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-width is inactive on an tfoot element",
|
||||
property: "max-width",
|
||||
tagName: "tfoot",
|
||||
rules: ["tfoot { max-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "width is active on a replaced inline element",
|
||||
property: "width",
|
||||
tagName: "img",
|
||||
rules: ["img { width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "min-width is active on a replaced inline element",
|
||||
property: "min-width",
|
||||
tagName: "img",
|
||||
rules: ["img { min-width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "max-width is active on a replaced inline element",
|
||||
property: "max-width",
|
||||
tagName: "img",
|
||||
rules: ["img { max-width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "width is active on a block element",
|
||||
property: "width",
|
||||
tagName: "div",
|
||||
rules: ["div { width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "min-width is active on a block element",
|
||||
property: "min-width",
|
||||
tagName: "div",
|
||||
rules: ["div { min-width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "max-width is active on a block element",
|
||||
property: "max-width",
|
||||
tagName: "div",
|
||||
rules: ["div { max-width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "height is inactive on a non-replaced inline element",
|
||||
property: "height",
|
||||
tagName: "span",
|
||||
rules: ["span { height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-height is inactive on a non-replaced inline element",
|
||||
property: "min-height",
|
||||
tagName: "span",
|
||||
rules: ["span { min-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-height is inactive on a non-replaced inline element",
|
||||
property: "max-height",
|
||||
tagName: "span",
|
||||
rules: ["span { max-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "height is inactive on colgroup element",
|
||||
property: "height",
|
||||
tagName: "colgroup",
|
||||
rules: ["colgroup { height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-height is inactive on colgroup element",
|
||||
property: "min-height",
|
||||
tagName: "colgroup",
|
||||
rules: ["colgroup { min-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-height is inactive on colgroup element",
|
||||
property: "max-height",
|
||||
tagName: "colgroup",
|
||||
rules: ["colgroup { max-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "height is inactive on col element",
|
||||
property: "height",
|
||||
tagName: "col",
|
||||
rules: ["col { height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-height is inactive on col element",
|
||||
property: "min-height",
|
||||
tagName: "col",
|
||||
rules: ["col { min-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-height is inactive on col element",
|
||||
property: "max-height",
|
||||
tagName: "col",
|
||||
rules: ["col { max-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "height is active on a replaced inline element",
|
||||
property: "height",
|
||||
tagName: "img",
|
||||
rules: ["img { height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "min-height is active on a replaced inline element",
|
||||
property: "min-height",
|
||||
tagName: "img",
|
||||
rules: ["img { min-height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "max-height is active on a replaced inline element",
|
||||
property: "max-height",
|
||||
tagName: "img",
|
||||
rules: ["img { max-height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "height is active on a block element",
|
||||
property: "height",
|
||||
tagName: "div",
|
||||
rules: ["div { height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "min-height is active on a block element",
|
||||
property: "min-height",
|
||||
tagName: "div",
|
||||
rules: ["div { min-height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "max-height is active on a block element",
|
||||
property: "max-height",
|
||||
tagName: "div",
|
||||
rules: ["div { max-height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "column-gap is inactive on non-grid and non-flex container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; display: block; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "column-gap is active on grid container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; display: grid; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "column-gap is active on flex container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; display: flex; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "column-gap is inactive on non-multi-col container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; column-count: auto; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "column-gap is active on multi-column container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; column-count: 2; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "row-gap is inactive on non-grid and non-flex container",
|
||||
property: "row-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { row-gap: 10px; display: block; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "row-gap is active on grid container",
|
||||
property: "row-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { row-gap: 10px; display: grid; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "row-gap is active on flex container",
|
||||
property: "row-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { row-gap: 10px; display: flex; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "gap is inactive on non-grid and non-flex container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; display: block; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "gap is active on flex container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; display: flex; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "gap is active on grid container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; display: grid; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "gap is inactive on non-multi-col container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; column-count: auto; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "gap is active on multi-col container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; column-count: 2; }"],
|
||||
isActive: true,
|
||||
}];
|
||||
|
||||
for (const {info: summary, property, tagName, rules, ruleIndex, isActive} of tests) {
|
||||
info(summary);
|
||||
|
||||
// Create an element which will contain the test elements.
|
||||
const main = document.createElement("main");
|
||||
document.firstElementChild.appendChild(main);
|
||||
|
||||
// Create the element and insert the rules
|
||||
const el = document.createElement(tagName);
|
||||
const style = document.createElement("style");
|
||||
main.append(style, el);
|
||||
|
||||
for (const dataRule of rules) {
|
||||
style.sheet.insertRule(dataRule);
|
||||
}
|
||||
const rule = style.sheet.cssRules[ruleIndex || 0 ];
|
||||
|
||||
const {used} = isPropertyUsed(el, getComputedStyle(el), rule, property);
|
||||
ok(used === isActive, `"${property}" is ${isActive ? "active" : "inactive"}`);
|
||||
|
||||
main.remove();
|
||||
}
|
||||
});
|
||||
@ -67,6 +67,7 @@ skip-if = (verify && debug && (os == 'win'))
|
||||
[test_inspector_getNodeFromActor.html]
|
||||
[test_inspector_getOffsetParent.html]
|
||||
[test_inspector-hide.html]
|
||||
[test_inspector-inactive-property-helper.html]
|
||||
[test_inspector-mutations-attr.html]
|
||||
[test_inspector-mutations-events.html]
|
||||
[test_inspector-mutations-value.html]
|
||||
|
||||
@ -0,0 +1,370 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test for InactivePropertyHelper</title>
|
||||
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
|
||||
<script type="application/javascript">
|
||||
"use strict";
|
||||
|
||||
const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
|
||||
const { inactivePropertyHelper } = require("devtools/server/actors/utils/inactive-property-helper");
|
||||
let { isPropertyUsed } = inactivePropertyHelper;
|
||||
isPropertyUsed = isPropertyUsed.bind(inactivePropertyHelper);
|
||||
|
||||
// A single test case is an object of the following shape:
|
||||
// - {String} info: a summary of the test case
|
||||
// - {String} property: the CSS property that should be tested
|
||||
// - {String} tagName: the tagName of the element we're going to test
|
||||
// - {Array<String>} rules: An array of the rules that will be applied on the element.
|
||||
// This can't be empty as isPropertyUsed need a rule.
|
||||
// - {Integer} ruleIndex (optional): If there are multiples rules in `rules`, the index
|
||||
// of the one that should be tested in isPropertyUsed.
|
||||
// - {Boolean} isActive: should the property be active (isPropertyUsed `used` result).
|
||||
const tests = [{
|
||||
info: "vertical-align is inactive on a block element",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div { vertical-align: top; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "vertical-align is inactive on a span with display block",
|
||||
property: "vertical-align",
|
||||
tagName: "span",
|
||||
rules: ["span { vertical-align: top; display: block;}"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "vertical-align is active on a div with display inline-block",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div { vertical-align: top; display: inline-block;}"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "vertical-align is active on a table-cell",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div { vertical-align: top; display: table-cell;}"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "vertical-align is active on a block element ::first-letter",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div::first-letter { vertical-align: top; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "vertical-align is active on a block element ::first-line",
|
||||
property: "vertical-align",
|
||||
tagName: "div",
|
||||
rules: ["div::first-line { vertical-align: top; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "vertical-align is active on an inline element",
|
||||
property: "vertical-align",
|
||||
tagName: "span",
|
||||
rules: ["span { vertical-align: top; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "width is inactive on a non-replaced inline element",
|
||||
property: "width",
|
||||
tagName: "span",
|
||||
rules: ["span { width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-width is inactive on a non-replaced inline element",
|
||||
property: "min-width",
|
||||
tagName: "span",
|
||||
rules: ["span { min-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-width is inactive on a non-replaced inline element",
|
||||
property: "max-width",
|
||||
tagName: "span",
|
||||
rules: ["span { max-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "width is inactive on an tr element",
|
||||
property: "width",
|
||||
tagName: "tr",
|
||||
rules: ["tr { width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-width is inactive on an tr element",
|
||||
property: "min-width",
|
||||
tagName: "tr",
|
||||
rules: ["tr { min-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-width is inactive on an tr element",
|
||||
property: "max-width",
|
||||
tagName: "tr",
|
||||
rules: ["tr { max-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "width is inactive on an thead element",
|
||||
property: "width",
|
||||
tagName: "thead",
|
||||
rules: ["thead { width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-width is inactive on an thead element",
|
||||
property: "min-width",
|
||||
tagName: "thead",
|
||||
rules: ["thead { min-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-width is inactive on an thead element",
|
||||
property: "max-width",
|
||||
tagName: "thead",
|
||||
rules: ["thead { max-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "width is inactive on an tfoot element",
|
||||
property: "width",
|
||||
tagName: "tfoot",
|
||||
rules: ["tfoot { width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-width is inactive on an tfoot element",
|
||||
property: "min-width",
|
||||
tagName: "tfoot",
|
||||
rules: ["tfoot { min-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-width is inactive on an tfoot element",
|
||||
property: "max-width",
|
||||
tagName: "tfoot",
|
||||
rules: ["tfoot { max-width: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "width is active on a replaced inline element",
|
||||
property: "width",
|
||||
tagName: "img",
|
||||
rules: ["img { width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "min-width is active on a replaced inline element",
|
||||
property: "min-width",
|
||||
tagName: "img",
|
||||
rules: ["img { min-width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "max-width is active on a replaced inline element",
|
||||
property: "max-width",
|
||||
tagName: "img",
|
||||
rules: ["img { max-width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "width is active on a block element",
|
||||
property: "width",
|
||||
tagName: "div",
|
||||
rules: ["div { width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "min-width is active on a block element",
|
||||
property: "min-width",
|
||||
tagName: "div",
|
||||
rules: ["div { min-width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "max-width is active on a block element",
|
||||
property: "max-width",
|
||||
tagName: "div",
|
||||
rules: ["div { max-width: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "height is inactive on a non-replaced inline element",
|
||||
property: "height",
|
||||
tagName: "span",
|
||||
rules: ["span { height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-height is inactive on a non-replaced inline element",
|
||||
property: "min-height",
|
||||
tagName: "span",
|
||||
rules: ["span { min-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-height is inactive on a non-replaced inline element",
|
||||
property: "max-height",
|
||||
tagName: "span",
|
||||
rules: ["span { max-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "height is inactive on colgroup element",
|
||||
property: "height",
|
||||
tagName: "colgroup",
|
||||
rules: ["colgroup { height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-height is inactive on colgroup element",
|
||||
property: "min-height",
|
||||
tagName: "colgroup",
|
||||
rules: ["colgroup { min-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-height is inactive on colgroup element",
|
||||
property: "max-height",
|
||||
tagName: "colgroup",
|
||||
rules: ["colgroup { max-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "height is inactive on col element",
|
||||
property: "height",
|
||||
tagName: "col",
|
||||
rules: ["col { height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "min-height is inactive on col element",
|
||||
property: "min-height",
|
||||
tagName: "col",
|
||||
rules: ["col { min-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "max-height is inactive on col element",
|
||||
property: "max-height",
|
||||
tagName: "col",
|
||||
rules: ["col { max-height: 500px; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "height is active on a replaced inline element",
|
||||
property: "height",
|
||||
tagName: "img",
|
||||
rules: ["img { height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "min-height is active on a replaced inline element",
|
||||
property: "min-height",
|
||||
tagName: "img",
|
||||
rules: ["img { min-height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "max-height is active on a replaced inline element",
|
||||
property: "max-height",
|
||||
tagName: "img",
|
||||
rules: ["img { max-height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "height is active on a block element",
|
||||
property: "height",
|
||||
tagName: "div",
|
||||
rules: ["div { height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "min-height is active on a block element",
|
||||
property: "min-height",
|
||||
tagName: "div",
|
||||
rules: ["div { min-height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "max-height is active on a block element",
|
||||
property: "max-height",
|
||||
tagName: "div",
|
||||
rules: ["div { max-height: 500px; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "column-gap is inactive on non-grid and non-flex container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; display: block; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "column-gap is active on grid container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; display: grid; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "column-gap is active on flex container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; display: flex; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "column-gap is inactive on non-multi-col container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; column-count: auto; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "column-gap is active on multi-column container",
|
||||
property: "column-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { column-gap: 10px; column-count: 2; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "row-gap is inactive on non-grid and non-flex container",
|
||||
property: "row-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { row-gap: 10px; display: block; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "row-gap is active on grid container",
|
||||
property: "row-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { row-gap: 10px; display: grid; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "row-gap is active on flex container",
|
||||
property: "row-gap",
|
||||
tagName: "div",
|
||||
rules: ["div { row-gap: 10px; display: flex; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "gap is inactive on non-grid and non-flex container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; display: block; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "gap is active on flex container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; display: flex; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "gap is active on grid container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; display: grid; }"],
|
||||
isActive: true,
|
||||
}, {
|
||||
info: "gap is inactive on non-multi-col container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; column-count: auto; }"],
|
||||
isActive: false,
|
||||
}, {
|
||||
info: "gap is active on multi-col container",
|
||||
property: "gap",
|
||||
tagName: "div",
|
||||
rules: ["div { gap: 10px; column-count: 2; }"],
|
||||
isActive: true,
|
||||
}];
|
||||
|
||||
for (const { info: summary, property, tagName, rules, ruleIndex, isActive } of tests) {
|
||||
info(summary);
|
||||
|
||||
// Create an element which will contain the test elements.
|
||||
const main = document.createElement("main");
|
||||
document.firstElementChild.appendChild(main);
|
||||
|
||||
// Create the element and insert the rules
|
||||
const el = document.createElement(tagName);
|
||||
const style = document.createElement("style");
|
||||
main.append(style, el);
|
||||
|
||||
for (const dataRule of rules) {
|
||||
style.sheet.insertRule(dataRule);
|
||||
}
|
||||
const rule = style.sheet.cssRules[ruleIndex || 0];
|
||||
|
||||
const { used } = isPropertyUsed(el, getComputedStyle(el), rule, property);
|
||||
ok(used === isActive, `"${property}" is ${isActive ? "active" : "inactive"}`);
|
||||
|
||||
main.remove();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user