mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-28 10:37:17 +02:00
Tests: Import WPT tests for clientLeft and clientTop
Import several WPT tests covering client* properties: - client-props-input.html (border offsets on input/textarea) - client-props-root.html (root element client properties) - client-props-zoom.html (client properties with zoom) - client-props-inline-list-item.html (inline list-item display) - client-props-root-display-none-crash.html (crash test) - table-client-props.html (table element client properties)
This commit is contained in:
Andreas Kling
committed by
Jelle Raaijmakers
Jelle Raaijmakers
parent
675a7d4c0c
commit
90cfa2597d
Notes:
github-actions[bot]
2026-02-22 12:25:22 +00:00
Author: https://github.com/awesomekling Commit: https://github.com/LadybirdBrowser/ladybird/commit/90cfa2597d2 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/8084 Reviewed-by: https://github.com/gmta ✅
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<title>client* returns the same for non-replaced inlines regardless of list-item-ness</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1581467">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<script src=../../resources/testharness.js></script>
|
||||
<script src=../../resources/testharnessreport.js></script>
|
||||
<style>
|
||||
.li {
|
||||
display: inline list-item;
|
||||
}
|
||||
</style>
|
||||
<div style="position: absolute"><span>Foo</span></div>
|
||||
<div style="position: absolute"><span class="li">Foo</span></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let first = document.querySelector("span");
|
||||
let second = document.querySelector(".li");
|
||||
|
||||
assert_equals(first.clientWidth, second.clientWidth, "clientWidth should match");
|
||||
assert_equals(first.clientHeight, second.clientHeight, "clientHeight should match");
|
||||
assert_equals(first.clientTop, second.clientTop, "clientTop should match");
|
||||
assert_equals(first.clientLeft, second.clientLeft, "clientLeft should match");
|
||||
}, "client* returns the same for non-replaced inlines regardless of list-item-ness");
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!doctype html>
|
||||
<title>client* on input / textarea</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1654769">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<script src=../../resources/testharness.js></script>
|
||||
<script src=../../resources/testharnessreport.js></script>
|
||||
<style>
|
||||
input, textarea {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
border-style: solid;
|
||||
border-width: 10px 20px;
|
||||
padding: 2px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.block { display: block; }
|
||||
</style>
|
||||
<input>
|
||||
<textarea></textarea>
|
||||
<input class="block">
|
||||
<textarea class="block"></textarea>
|
||||
<script>
|
||||
test(() => {
|
||||
for (let element of document.querySelectorAll("input, textarea")) {
|
||||
let description = `${element.nodeName} ${element.className}: `;
|
||||
assert_equals(element.clientHeight, 204, description + "clientHeight should be the padding box height");
|
||||
assert_equals(element.clientTop, 10, description + "clientTop should include the border offset");
|
||||
// <input> clips to the content box edge in the inline axis, so it should also include the padding offset.
|
||||
let expectedLeft = 20;
|
||||
let expectedWidth = 304;
|
||||
if (element.nodeName == "INPUT") {
|
||||
expectedLeft += 2;
|
||||
expectedWidth -= 4;
|
||||
}
|
||||
assert_equals(element.clientWidth, expectedWidth, description + "clientWidth should be the padding box for textarea, content box for input");
|
||||
assert_equals(element.clientLeft, expectedLeft, description + "clientLeft should include the border offset for textarea and border + padding for input");
|
||||
}
|
||||
}, "client* on input / textarea");
|
||||
</script>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<title>client* on the scrolling element</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1654769">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<script src=../../resources/testharness.js></script>
|
||||
<script src=../../resources/testharnessreport.js></script>
|
||||
<style>
|
||||
:root {
|
||||
/* Ensure the width of the root element's box is smaller than the viewport. */
|
||||
margin: 5px;
|
||||
/* Remove the scrollbars so that we can test {Width, Height}. */
|
||||
scrollbar-width: none;
|
||||
/* Would love to add a border but https://github.com/w3c/csswg-drafts/issues/5363 */
|
||||
}
|
||||
</style>
|
||||
<div style="height: 200vh; width: 200vw"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
scrollTo(100, 100);
|
||||
assert_equals(document.documentElement.clientTop, 0, "Client top doesn't depend on scrolling");
|
||||
assert_equals(document.documentElement.clientLeft, 0, "Client left doesn't depend on scrolling");
|
||||
assert_equals(document.documentElement.clientWidth, window.innerWidth, "Without scrollbars, client width should match viewport width");
|
||||
assert_equals(document.documentElement.clientHeight, window.innerHeight, "Without scrollbars, client height should match viewport height");
|
||||
}, "client* properties on the root element");
|
||||
</script>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<title>Client properties for elements with css zoom</title>
|
||||
<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org">
|
||||
<link rel="author" title="Google" href="http://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-viewport/">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.test_content div {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-color: cyan;
|
||||
}
|
||||
.test_content div.x4_zoom {
|
||||
zoom: 4.0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="test_content">
|
||||
<div id="no_zoom"></div>
|
||||
<div class="x4_zoom" id="element_with_zoom"></div>
|
||||
|
||||
<div class="x4_zoom">
|
||||
<div id="direct_child_of_element_with_zoom"></div>
|
||||
<div>
|
||||
<div id="indirect_child_of_element_with_zoom"></div>
|
||||
</div>
|
||||
<div class="x4_zoom" id="both_child_and_parent_has_zoom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
setup(() => {
|
||||
window.noZoom = document.getElementById("no_zoom");
|
||||
});
|
||||
function compareObjectToDivWithNoZoom(object){
|
||||
assert_equals(object.clientTop, noZoom.clientTop, 'clientTop');
|
||||
assert_equals(object.clientLeft, noZoom.clientLeft, 'clientLeft');
|
||||
assert_equals(object.clientWidth, noZoom.clientWidth, 'clientWidth');
|
||||
assert_equals(object.clientHeight ,noZoom.clientHeight, 'clientHeight');
|
||||
}
|
||||
test(function() {
|
||||
assert_true(!!noZoom, "no zoom target exists");
|
||||
});
|
||||
test(function() {
|
||||
compareObjectToDivWithNoZoom(document.getElementById("element_with_zoom"));
|
||||
compareObjectToDivWithNoZoom(document.getElementById("direct_child_of_element_with_zoom"));
|
||||
compareObjectToDivWithNoZoom(document.getElementById("indirect_child_of_element_with_zoom"));
|
||||
compareObjectToDivWithNoZoom(document.getElementById("both_child_and_parent_has_zoom"));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>client* properties on tables</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface">
|
||||
<script src=../../resources/testharness.js></script>
|
||||
<script src=../../resources/testharnessreport.js></script>
|
||||
<div id="test-target" style="position: absolute"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
// Each test consists of four elements: the markup to use, the expected
|
||||
// value of offsetWidth on the table, the expected value of offsetHeight
|
||||
// on the table, and the description string.
|
||||
var tests = [
|
||||
[ `<table style="width: 20px; height: 30px">`,
|
||||
20, 30,
|
||||
"Basic table" ],
|
||||
[ `<table><caption style="width: 40px; height: 50px">`,
|
||||
40, 50,
|
||||
"Basic caption" ],
|
||||
[ `<table style="width: 20px; height: 30px">
|
||||
<caption style="width: 10px; height: 20px">`,
|
||||
20, 50,
|
||||
"Table and narrower caption" ],
|
||||
[ `<table style="width: 20px; height: 30px">
|
||||
<caption style="width: 40px; height: 20px">`,
|
||||
40, 50,
|
||||
"Table and wider caption" ],
|
||||
[ `<table style="width: 20px; height: 30px; padding: 1px 2px 3px 4px">`,
|
||||
20, 30,
|
||||
"Table with padding" ],
|
||||
[ `<table style="width: 20px; height: 30px; padding: 1px 2px 3px 4px;
|
||||
box-sizing: content-box">`,
|
||||
26, 34,
|
||||
"Table with padding and content-box sizing" ],
|
||||
[ `<table style="width: 20px; height: 30px;
|
||||
border-width: 1px 2px 3px 4px; border-style: solid;
|
||||
border-collapse: separate; box-sizing: content-box">`,
|
||||
26, 34,
|
||||
"Table with separated border" ],
|
||||
[ `<table style="width: 20px; height: 30px;
|
||||
border-width: 2px 4px 6px 8px; border-style: solid;
|
||||
border-collapse: collapse; box-sizing: content-box">
|
||||
<tr><td>`,
|
||||
26, 34,
|
||||
"Table with collapsed border" ],
|
||||
[ `<div style="display: flex">
|
||||
<table style="width: 20px; height: 30px;
|
||||
border-width: 1px 2px 3px 4px; border-style: solid;
|
||||
border-collapse: separate; box-sizing: content-box">`,
|
||||
26, 34,
|
||||
"Flex-level table with separated border" ],
|
||||
[ `<div style="display: flex">
|
||||
<table style="width: 20px; height: 30px;
|
||||
border-width: 2px 4px 6px 8px; border-style: solid;
|
||||
border-collapse: collapse; box-sizing: content-box">
|
||||
<tr><td>`,
|
||||
26, 34,
|
||||
"Flex-level table with collapsed border" ],
|
||||
[ `<table>
|
||||
<caption style="width: 40px; height: 50px; padding: 1px 2px 3px 4px">`,
|
||||
46, 54,
|
||||
"Caption with padding" ],
|
||||
[ `<table>
|
||||
<caption style="width: 40px; height: 50px;
|
||||
border-width: 1px 2px 3px 4px; border-style: solid">`,
|
||||
46, 54,
|
||||
"Caption with border" ],
|
||||
[ `<table>
|
||||
<caption style="width: 40px; height: 50px; margin: 1px 2px 3px 4px;">`,
|
||||
46, 54,
|
||||
"Caption with margin" ],
|
||||
[ `<table style="caption-side: bottom">
|
||||
<caption style="width: 40px; height: 50px;">`,
|
||||
40, 50,
|
||||
"Bottom caption" ],
|
||||
];
|
||||
|
||||
function target() {
|
||||
return document.getElementById("test-target");
|
||||
}
|
||||
|
||||
function table() {
|
||||
return target().querySelector("table");
|
||||
}
|
||||
|
||||
for (var t of tests) {
|
||||
test(function() {
|
||||
target().innerHTML = t[0];
|
||||
assert_equals(table().clientWidth, t[1], t[3] + " clientWidth");
|
||||
assert_equals(table().clientHeight, t[2], t[3] + " clientHeight");
|
||||
assert_equals(table().clientLeft, 0, t[3] + " clientLeft");
|
||||
assert_equals(table().clientTop, 0, t[3] + " clientTop");
|
||||
}, t[3]);
|
||||
}
|
||||
}, "Overall test to make sure there are no exceptions");
|
||||
</script>
|
||||
Reference in New Issue
Block a user