summaryrefslogtreecommitdiffstats
path: root/layout/base/tests/test_bug1216483.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/base/tests/test_bug1216483.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.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/base/tests/test_bug1216483.html')
-rw-r--r--layout/base/tests/test_bug1216483.html204
1 files changed, 204 insertions, 0 deletions
diff --git a/layout/base/tests/test_bug1216483.html b/layout/base/tests/test_bug1216483.html
new file mode 100644
index 0000000000..ac05a703ac
--- /dev/null
+++ b/layout/base/tests/test_bug1216483.html
@@ -0,0 +1,204 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1216483
+-->
+<meta charset="utf-8">
+<title>Test for Bug 1216483</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1216483">Mozilla Bug 1216483</a>
+<style>
+ .container {
+ border: 1px solid black;
+ margin-bottom: 1em;
+ }
+
+ .with-before {
+ counter-reset: cnt;
+ }
+
+ .with-before .container {
+ counter-increment: cnt;
+ }
+
+ td {
+ width: 100px;
+ }
+
+ .with-before td {
+ counter-increment: cnt;
+ }
+
+ .with-before .container::before {
+ content: counter(cnt) ")";
+ margin: 0 8px;
+ color: grey;
+ }
+
+ .with-before td::before {
+ content: counter(cnt) ")";
+ margin: 0 8px;
+ color: grey;
+ }
+
+ .block .container { display: block; }
+ .flex .container { display: flex; }
+ .grid .container { display: grid; }
+</style>
+
+<h1>Only editable content</h1>
+<h2>display: block</h2>
+<div class="editor block" contenteditable>
+ <div class="container">
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ </div>
+ <div class="container">
+ <div class="second">a<br>b<br>c</div>
+ </div>
+</div>
+
+<h2>display: flex</h2>
+<div class="editor flex" contenteditable>
+ <div class="container">
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ </div>
+ <div class="container">
+ <div class="second">a<br>b<br>c</div>
+ </div>
+</div>
+
+<h2>display: grid</h2>
+<div class="editor grid" contenteditable>
+ <div class="container">
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ </div>
+ <div class="container">
+ <div class="second">a<br>b<br>c</div>
+ </div>
+</div>
+
+<h2>Table</h2>
+<div class="editor table" contenteditable>
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ <table border="1">
+ <tr><td class="second">a<br>b<br>c</td><td>d</td></tr>
+ <tr><td>k<br>l<br>m</td><td>n</td></tr>
+ </table>
+</div>
+
+<h2>Table with element inside</h2>
+<div class="editor table" contenteditable>
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ <table border="1">
+ <tr><td><span class="second">a<br>b<br>c</span></td><td><span>d</span></td></tr>
+ <tr><td><span>k<br>l<br>m</span></td><td><span>n</span></td></tr>
+ </table>
+</div>
+
+<h2>Table in a flex container</h2>
+<div class="editor flex table" contenteditable>
+ <div class="container">
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ </div>
+ <div class="container">
+ <table border="1">
+ <tr><td><span class="second">a<br>b<br>c</span></td><td><span>d</span></td></tr>
+ <tr><td><span>k<br>l<br>m</span></td><td><span>n</span></td></tr>
+ </table>
+ </div>
+</div>
+
+<h1>Some non-editable content involved and skipped</h1>
+
+<h2>display: block</h2>
+<div class="editor block with-before" contenteditable>
+ <div class="container">
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ </div>
+ <div class="container">
+ <div class="second">a<br>b<br>c</div>
+ </div>
+</div>
+
+<h2>display: flex</h2>
+<div class="editor flex with-before" contenteditable>
+ <div class="container">
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ </div>
+ <div class="container">
+ <div class="second">a<br>b<br>c</div>
+ </div>
+</div>
+
+<h2>Flex with contenteditable="false"</h2>
+<div class="editor flex" contenteditable>
+ <div class="container">
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ </div>
+ <div class="container">
+ <div contenteditable="false">X</div>
+ <div class="second">a<br>b<br>c</div>
+ </div>
+</div>
+
+<h2>display: grid</h2>
+<div class="editor grid with-before" contenteditable>
+ <div class="container">
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ </div>
+ <div class="container">
+ <div class="second">a<br>b<br>c</div>
+ </div>
+</div>
+
+<h2>Table</h2>
+<div class="editor table" contenteditable>
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ <table border="1">
+ <tr><td class="second">a<br>b<br>c</td><td>d</td></tr>
+ <tr><td>k<br>l<br>m</td><td>n</td></tr>
+ </table>
+</div>
+
+<h2>Table with element inside</h2>
+<div class="editor table with-before" contenteditable>
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ <table border="1">
+ <tr><td><span class="second">a<br>b<br>c</span></td><td><span>d</span></td></tr>
+ <tr><td><span>k<br>l<br>m</span></td><td><span>n</span></td></tr>
+ </table>
+</div>
+
+<h2>Table in a flex container</h2>
+<div class="editor flex table with-before" contenteditable>
+ <div class="container">
+ <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
+ </div>
+ <div class="container">
+ <table border="1">
+ <tr><td><span class="second">a<br>b<br>c</span></td><td><span>d</span></td></tr>
+ <tr><td><span>k<br>l<br>m</span></td><td><span>n</span></td></tr>
+ </table>
+ </div>
+</div>
+
+<script>
+ const editors = document.querySelectorAll('.editor')
+ editors.forEach(function (editor) {
+ add_task(function() {
+ editor.focus();
+ const first = editor.querySelector('.first');
+ const second = editor.querySelector('.second')
+
+ document.getSelection().collapse(first.childNodes[0], 5);
+
+ sendKey('DOWN');
+
+ const sel = document.getSelection();
+ is(sel.anchorNode, second, editor.className + ': Caret not at the right node in second block')
+ is(sel.anchorOffset, 1, editor.className + ': Caret not at the expected offset')
+ });
+ });
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-19 21:58:53 +0000