function checkDataKeys(node) { // The purpose of this list of data-* attributes is simply to ensure typos // in tests are caught. It is therefore "ok" to add to this list for // specific tests. var validData = new Set([ "data-anchor-polyfill", "data-expected-width", "data-expected-height", "data-offset-x", "data-offset-y", "data-expected-client-width", "data-expected-client-height", "data-expected-scroll-width", "data-expected-scroll-height", "data-expected-bounding-client-rect-width", "data-expected-bounding-client-rect-height", "data-total-x", "data-total-y", "data-expected-display", "data-expected-padding-top", "data-expected-padding-bottom", "data-expected-padding-left", "data-expected-padding-right", "data-expected-margin-top", "data-expected-margin-bottom", "data-expected-margin-left", "data-expected-margin-right"
]); if (!node || !node.getAttributeNames) return; // Use "data-test" prefix if you need custom-named data elements. for (let name of node.getAttributeNames()) { if (name.startsWith("data-") && !name.startsWith("data-test"))
assert_true(validData.has(name), name + " is a valid data attribute");
}
}
function checkExpectedValues(t, node, prefix)
{
checkDataKeys(node); var output = { checked: false };
var expectedWidth = checkAttribute(output, node, "data-expected-width"); if (expectedWidth) {
assert_tolerance(node.offsetWidth, expectedWidth, prefix + "width");
}
var expectedHeight = checkAttribute(output, node, "data-expected-height"); if (expectedHeight) {
assert_tolerance(node.offsetHeight, expectedHeight, prefix + "height");
}
var expectedOffset = checkAttribute(output, node, "data-offset-x"); if (expectedOffset) {
assert_tolerance(node.offsetLeft, expectedOffset, prefix + "offsetLeft");
}
var expectedOffset = checkAttribute(output, node, "data-offset-y"); if (expectedOffset) {
assert_tolerance(node.offsetTop, expectedOffset, prefix + "offsetTop");
}
var expectedWidth = checkAttribute(output, node, "data-expected-client-width"); if (expectedWidth) {
assert_tolerance(node.clientWidth, expectedWidth, prefix + "clientWidth");
}
var expectedHeight = checkAttribute(output, node, "data-expected-client-height"); if (expectedHeight) {
assert_tolerance(node.clientHeight, expectedHeight, prefix + "clientHeight");
}
var expectedWidth = checkAttribute(output, node, "data-expected-scroll-width"); if (expectedWidth) {
assert_tolerance(node.scrollWidth, expectedWidth, prefix + "scrollWidth");
}
var expectedHeight = checkAttribute(output, node, "data-expected-scroll-height"); if (expectedHeight) {
assert_tolerance(node.scrollHeight, expectedHeight, prefix + "scrollHeight");
}
var expectedWidth = checkAttribute(output, node, "data-expected-bounding-client-rect-width"); if (expectedWidth) {
assert_tolerance(node.getBoundingClientRect().width, expectedWidth, prefix + "getBoundingClientRect().width");
}
var expectedHeight = checkAttribute(output, node, "data-expected-bounding-client-rect-height"); if (expectedHeight) {
assert_tolerance(node.getBoundingClientRect().height, expectedHeight, prefix + "getBoundingClientRect().height");
}
var expectedDisplay = checkAttribute(output, node, "data-expected-display"); if (expectedDisplay) { var actualDisplay = getComputedStyle(node).display;
assert_equals(actualDisplay, expectedDisplay, prefix + "display");
}
var expectedPaddingTop = checkAttribute(output, node, "data-expected-padding-top"); if (expectedPaddingTop) { var actualPaddingTop = getComputedStyle(node).paddingTop; // Trim the unit "px" from the output.
actualPaddingTop = actualPaddingTop.slice(0, -2);
assert_equals(actualPaddingTop, expectedPaddingTop, prefix + "padding-top");
}
var expectedPaddingBottom = checkAttribute(output, node, "data-expected-padding-bottom"); if (expectedPaddingBottom) { var actualPaddingBottom = getComputedStyle(node).paddingBottom; // Trim the unit "px" from the output.
actualPaddingBottom = actualPaddingBottom.slice(0, -2);
assert_equals(actualPaddingBottom, expectedPaddingBottom, prefix + "padding-bottom");
}
var expectedPaddingLeft = checkAttribute(output, node, "data-expected-padding-left"); if (expectedPaddingLeft) { var actualPaddingLeft = getComputedStyle(node).paddingLeft; // Trim the unit "px" from the output.
actualPaddingLeft = actualPaddingLeft.slice(0, -2);
assert_equals(actualPaddingLeft, expectedPaddingLeft, prefix + "padding-left");
}
var expectedPaddingRight = checkAttribute(output, node, "data-expected-padding-right"); if (expectedPaddingRight) { var actualPaddingRight = getComputedStyle(node).paddingRight; // Trim the unit "px" from the output.
actualPaddingRight = actualPaddingRight.slice(0, -2);
assert_equals(actualPaddingRight, expectedPaddingRight, prefix + "padding-right");
}
var expectedMarginTop = checkAttribute(output, node, "data-expected-margin-top"); if (expectedMarginTop) { var actualMarginTop = getComputedStyle(node).marginTop; // Trim the unit "px" from the output.
actualMarginTop = actualMarginTop.slice(0, -2);
assert_equals(actualMarginTop, expectedMarginTop, prefix + "margin-top");
}
var expectedMarginBottom = checkAttribute(output, node, "data-expected-margin-bottom"); if (expectedMarginBottom) { var actualMarginBottom = getComputedStyle(node).marginBottom; // Trim the unit "px" from the output.
actualMarginBottom = actualMarginBottom.slice(0, -2);
assert_equals(actualMarginBottom, expectedMarginBottom, prefix + "margin-bottom");
}
var expectedMarginLeft = checkAttribute(output, node, "data-expected-margin-left"); if (expectedMarginLeft) { var actualMarginLeft = getComputedStyle(node).marginLeft; // Trim the unit "px" from the output.
actualMarginLeft = actualMarginLeft.slice(0, -2);
assert_equals(actualMarginLeft, expectedMarginLeft, prefix + "margin-left");
}
var expectedMarginRight = checkAttribute(output, node, "data-expected-margin-right"); if (expectedMarginRight) { var actualMarginRight = getComputedStyle(node).marginRight; // Trim the unit "px" from the output.
actualMarginRight = actualMarginRight.slice(0, -2);
assert_equals(actualMarginRight, expectedMarginRight, prefix + "margin-right");
}
return output.checked;
}
var testNumber = 0; var highlightError = false; // displays outline around failed test element. var printDomOnError = true; // prints dom when test fails.
window.checkLayout = function(selectorList, callDone = true)
{ if (!selectorList) {
console.error("You must provide a CSS selector of nodes to check."); return;
} var nodes = document.querySelectorAll(selectorList);
nodes = Array.prototype.slice.call(nodes); var checkedLayout = false;
Array.prototype.forEach.call(nodes, function(node) { const title = node.title == '' ? '' : `: ${node.title}`;
test(function(t) { var container = node.parentNode.className == 'container' ? node.parentNode : node; var prefix =
printDomOnError ? '\n' + container.outerHTML + '\n' : ''; var passed = false; try {
checkedLayout |= checkExpectedValues(t, node.parentNode, prefix);
checkedLayout |= checkSubtreeExpectedValues(t, node, prefix);
passed = true;
} finally { if (!passed && highlightError) { if (!document.getElementById('testharness_error_css')) { var style = document.createElement('style');
style.id = 'testharness_error_css';
style.textContent = '.testharness_error { outline: red dotted 2px !important; }';
document.body.appendChild(style);
} if (node)
node.classList.add('testharness_error');
}
checkedLayout |= !passed;
}
}, `${selectorList} ${++testNumber}${title}`);
}); if (!checkedLayout) {
console.error("No valid data-* attributes found in selector list : " + selectorList);
} if (callDone)
done();
};
})();
¤ Dauer der Verarbeitung: 0.12 Sekunden
(vorverarbeitet)
¤
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung ist noch experimentell.