mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-08 05:27:14 +09:00
LibWeb/CSS: Unit tests for changes to counter definitions
This commit is contained in:
Manuel Zahariev
Alexander Kalenik
parent
99c6eb0c35
commit
f972342c27
Notes:
github-actions[bot]
2025-06-03 01:52:47 +00:00
Author: https://github.com/manuel-za
Commit: f972342c27
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4890
Reviewed-by: https://github.com/kalenikaliaksandr
24 changed files with 447 additions and 0 deletions
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.one::before { content: '1: '; }
|
||||||
|
div.two::before { content: '2: '; }
|
||||||
|
div.three::before { content: '3: '; }
|
||||||
|
</style>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='two'>Two</div>
|
||||||
|
<div class='three'>Three</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.one::before { content: '1: '; }
|
||||||
|
div.five::before { content: '5: '; }
|
||||||
|
div.six::before { content: '6: '; }
|
||||||
|
</style>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='five'>Five</div>
|
||||||
|
<div class='six'>Six</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.one::before { content: '1: '; }
|
||||||
|
div.two::before { content: '2: '; }
|
||||||
|
div.three::before { content: '3: '; }
|
||||||
|
</style>
|
||||||
|
<div>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='two'>Two</div>
|
||||||
|
<div class='three'>Three</div>
|
||||||
|
</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.one::before { content: '1: '; }
|
||||||
|
div.two::before { content: '2: '; }
|
||||||
|
</style>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='two'>Two</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.zero::before { content: '0: '; }
|
||||||
|
div.one::before { content: '1: '; }
|
||||||
|
</style>
|
||||||
|
<div>
|
||||||
|
<div class='zero'>Zero</div>
|
||||||
|
<div class='zero'>Zero</div>
|
||||||
|
<div class='zero'>Zero</div>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.five::before { content: '5: '; }
|
||||||
|
div.six::before { content: '6: '; }
|
||||||
|
div.eight::before { content: '8: '; }
|
||||||
|
</style>
|
||||||
|
<div>
|
||||||
|
<div class='five'>Five</div>
|
||||||
|
<div class='six'>Six</div>
|
||||||
|
<div class='eight'>Eight</div>
|
||||||
|
<div class='eight'>Eight</div>
|
||||||
|
</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.nine::before { content: '9: '; }
|
||||||
|
div.ten::before { content: '10: '; }
|
||||||
|
div.eleven::before { content: '11: '; }
|
||||||
|
</style>
|
||||||
|
<div>
|
||||||
|
<div class='nine'>Nine</div>
|
||||||
|
<div class='ten'>Ten</div>
|
||||||
|
<div class='eleven'>Eleven</div>
|
||||||
|
</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.five::before { content: '5: '; }
|
||||||
|
div.six::before { content: '6: '; }
|
||||||
|
div.seven::before { content: '7: '; }
|
||||||
|
</style>
|
||||||
|
<div>
|
||||||
|
<div class='five'>Five</div>
|
||||||
|
<div class='six'>Six</div>
|
||||||
|
<div class='seven'>Seven</div>
|
||||||
|
</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.one::before { content: '1: '; }
|
||||||
|
div.two::before { content: '2: '; }
|
||||||
|
div.three::before { content: '3: '; }
|
||||||
|
</style>
|
||||||
|
<div>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='two'>Two</div>
|
||||||
|
<div class='three'>Three</div>
|
||||||
|
</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.one::before { content: '1: '; }
|
||||||
|
div.eight::before { content: '8: '; }
|
||||||
|
div.nine::before { content: '9: '; }
|
||||||
|
</style>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='eight'>Eight</div>
|
||||||
|
<div class='nine'>Nine</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.one::before { content: '1: '; }
|
||||||
|
div.four::before { content: '4: '; }
|
||||||
|
div.five::before { content: '5: '; }
|
||||||
|
</style>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='four'>Four</div>
|
||||||
|
<div class='five'>Five</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
div.one::before { content: '1: '; }
|
||||||
|
div.two::before { content: '2: '; }
|
||||||
|
</style>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='one'>One</div>
|
||||||
|
<div class='two'>Two</div>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-increment-add-ref.html" />
|
||||||
|
<style>
|
||||||
|
div::before { content: counter(item) ': '; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class='Inc1'>One</div>
|
||||||
|
<div id='add'>Two</div>
|
||||||
|
<div class='Inc1'>Three</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('add').classList.add('Inc1');
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-increment-change-ref.html" />
|
||||||
|
<style>
|
||||||
|
div::before { content: counter(item) ': '; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
.Inc4 { counter-increment: item 4; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class='Inc1'>One</div>
|
||||||
|
<div id='change' class='Inc1'>Five</div>
|
||||||
|
<div class='Inc1'>Six</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('change').classList.remove('Inc1');
|
||||||
|
document.getElementById('change').classList.add('Inc4');
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-increment-insert-before-ref.html" />
|
||||||
|
<style>
|
||||||
|
div > div::before { content: counter(item) ': '; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='parent'>
|
||||||
|
<div id='two' class='Inc1'>Two</div>
|
||||||
|
<div class='Inc1'>Three</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
|
||||||
|
const parent = document.getElementById('parent');
|
||||||
|
const two = document.getElementById('two');
|
||||||
|
|
||||||
|
const one = document.createElement('div');
|
||||||
|
one.innerHTML = 'One';
|
||||||
|
one.classList.add('Inc1');
|
||||||
|
|
||||||
|
parent.insertBefore( one, two );
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-increment-remove-ref.html" />
|
||||||
|
<style>
|
||||||
|
div::before { content: counter(item) ': '; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class='Inc1'>One</div>
|
||||||
|
<div id='remove' class='Inc1'>One</div>
|
||||||
|
<div class='Inc1'>Two</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('remove').classList.remove('Inc1');
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-multiple-changes-1-ref.html" />
|
||||||
|
<style>
|
||||||
|
div > div::before { content: counter(item) ': '; }
|
||||||
|
|
||||||
|
.Res4 { counter-reset: item 4; }
|
||||||
|
.Inc1 { counter-increment: item; }
|
||||||
|
.Set8 { counter-set: item 8; }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='zero' class='Res4'>
|
||||||
|
<div id='one' class='Inc1'>Zero</div>
|
||||||
|
<div id='two' class='Inc1'>Zero</div>
|
||||||
|
<div id='eight' class='Set8'>Zero</div>
|
||||||
|
<div id='nine' >One</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('zero' ).classList.toggle('Res4');
|
||||||
|
document.getElementById('one' ).classList.toggle('Inc1');
|
||||||
|
document.getElementById('two' ).classList.toggle('Inc1');
|
||||||
|
document.getElementById('eight').classList.toggle('Set8');
|
||||||
|
document.getElementById('nine' ).classList.toggle('Inc1');
|
||||||
|
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-multiple-changes-2-ref.html" />
|
||||||
|
<style>
|
||||||
|
div > div::before { content: counter(item) ': '; }
|
||||||
|
|
||||||
|
.Res4 { counter-reset: item 4; }
|
||||||
|
.Inc1 { counter-increment: item; }
|
||||||
|
.Set8 { counter-set: item 8; }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='zero'>
|
||||||
|
<div id='five'>Five</div>
|
||||||
|
<div id='six'>Six</div>
|
||||||
|
<div id='eight'>Eight</div>
|
||||||
|
<div id='nine' class='Inc1'>Eight</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('zero' ).classList.toggle('Res4');
|
||||||
|
document.getElementById('five' ).classList.toggle('Inc1');
|
||||||
|
document.getElementById('six' ).classList.toggle('Inc1');
|
||||||
|
document.getElementById('eight').classList.toggle('Set8');
|
||||||
|
document.getElementById('nine' ).classList.toggle('Inc1');
|
||||||
|
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-reset-add-ref.html" />
|
||||||
|
<style>
|
||||||
|
div > div::before { content: counter(item) ': '; }
|
||||||
|
.Res8 { counter-reset: item 8; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="parent">
|
||||||
|
<div class='Inc1'>Nine</div>
|
||||||
|
<div class='Inc1'>Ten</div>
|
||||||
|
<div class='Inc1'>Eleven</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('parent').classList.add('Res8');
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-reset-change-ref.html" />
|
||||||
|
<style>
|
||||||
|
div > div::before { content: counter(item) ': '; }
|
||||||
|
.Res4 { counter-reset: item 4; }
|
||||||
|
.Res8 { counter-reset: item 8; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="parent" class='Res8'>
|
||||||
|
<div class='Inc1'>Five</div>
|
||||||
|
<div class='Inc1'>Six</div>
|
||||||
|
<div class='Inc1'>Seven</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('parent').classList.remove('Res8');
|
||||||
|
document.getElementById('parent').classList.add('Res4');
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-reset-remove-ref.html" />
|
||||||
|
<style>
|
||||||
|
div > div::before { content: counter(item) ': '; }
|
||||||
|
.Res8 { counter-reset: item 8; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="parent" class='Res8'>
|
||||||
|
<div class='Inc1'>One</div>
|
||||||
|
<div class='Inc1'>Two</div>
|
||||||
|
<div class='Inc1'>Three</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('parent').classList.remove('Res8');
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
24
Tests/LibWeb/Ref/input/css/css-counter/counter-set-add.html
Normal file
24
Tests/LibWeb/Ref/input/css/css-counter/counter-set-add.html
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-set-add-ref.html" />
|
||||||
|
<style>
|
||||||
|
div::before { content: counter(item) ': '; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
.Set8 { counter-set: item 8; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class='Inc1'>One</div>
|
||||||
|
<div id='add'>Eight</div>
|
||||||
|
<div class='Inc1'>Nine</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('add').classList.remove('Inc1');
|
||||||
|
document.getElementById('add').classList.add('Set8');
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-set-change-ref.html" />
|
||||||
|
<style>
|
||||||
|
div::before { content: counter(item) ': '; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
.Set8 { counter-set: item 8; }
|
||||||
|
.Set4 { counter-set: item 4; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class='Inc1'>One</div>
|
||||||
|
<div id='change' class='Set8'>Four</div>
|
||||||
|
<div class='Inc1'>Five</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('change').classList.remove('Set8');
|
||||||
|
document.getElementById('change').classList.add('Set4');
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="match" href="../../../expected/css/css-counter/counter-set-remove-ref.html" />
|
||||||
|
<style>
|
||||||
|
div::before { content: counter(item) ': '; }
|
||||||
|
.Inc1 { counter-increment: item 1; }
|
||||||
|
.Set8 { counter-set: item 8; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class='Inc1'>One</div>
|
||||||
|
<div id='remove' class='Set8'>One</div>
|
||||||
|
<div class='Inc1'>Two</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.getElementById('remove').classList.remove('Set8');
|
||||||
|
document.documentElement.classList.remove("reftest-wait");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue