summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-valuesandunits/ch-width-1.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /layout/reftests/css-valuesandunits/ch-width-1.html
parentInitial commit. (diff)
downloadfirefox-upstream/124.0.1.tar.xz
firefox-upstream/124.0.1.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/css-valuesandunits/ch-width-1.html')
-rw-r--r--layout/reftests/css-valuesandunits/ch-width-1.html62
1 files changed, 62 insertions, 0 deletions
diff --git a/layout/reftests/css-valuesandunits/ch-width-1.html b/layout/reftests/css-valuesandunits/ch-width-1.html
new file mode 100644
index 0000000000..92cd7bdcf6
--- /dev/null
+++ b/layout/reftests/css-valuesandunits/ch-width-1.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<style>
+body {
+ font-family: courier new, courier, monospace;
+ line-height: 1;
+}
+div {
+ width: 120px;
+ float: left;
+}
+span {
+ display: inline-block;
+ height: 1em;
+}
+span.a {
+ background: red;
+}
+span.b {
+ position: relative;
+ top: -1em;
+ height: 1em;
+ background: lightgreen;
+}
+</style>
+<p>No red should appear at the tips of the rectangles:</p>
+<script>
+for (var i = 10; i <= 16; i++) {
+ var div = document.createElement("div");
+ div.style.fontSize = i + "px";
+ document.body.appendChild(div);
+ for (var j = 1; j <= 10; j++) {
+ // create a red span with width specified in 'ch' units
+ var a = document.createElement("span");
+ a.className = "a";
+ a.style.width = j + "ch";
+ a.textContent = "\xA0";
+ div.appendChild(a);
+ div.appendChild(document.createElement("br"));
+ // overlay it with a green span containing the equivalent number of chars
+ var b = document.createElement("span");
+ b.className = "b";
+ b.textContent = "\xA0".repeat(j);
+ div.appendChild(b);
+ div.appendChild(document.createElement("br"));
+ }
+ for (var j = 1; j <= 10; j++) {
+ // create a red span containing a specific number of chars
+ var a = document.createElement("span");
+ a.className = "a";
+ a.textContent = "\xA0".repeat(j);
+ div.appendChild(a);
+ div.appendChild(document.createElement("br"));
+ // overlay it with a green span with width specified in 'ch' units
+ var b = document.createElement("span");
+ b.className = "b";
+ b.style.width = j + "ch";
+ b.textContent = "\xA0";
+ div.appendChild(b);
+ div.appendChild(document.createElement("br"));
+ }
+}
+</script>