beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 23:50:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Base: Add more test cases to CSS var() test page

Browse source
This commit is contained in:
Sam Atkins 2021-12-03 12:02:44 +00:00 committed by Andreas Kling
parent c3437bccb3
commit 10aa06f16f
Notes: sideshowbarker 2024-07-17 23:02:33 +09:00 
Author: https://github.com/AtkinsSJ
Commit: https://github.com/SerenityOS/serenity/commit/10aa06f16fb
Pull-request: https://github.com/SerenityOS/serenity/pull/11174
1 changed files with 159 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
Base/res/html/misc/custom-properties.html
View file

@ -6,6 +6,12 @@
<style>
:root {
--my-color: purple;
--width: 10px;
--color: orange;
--style: solid;
--border: var(--width) var(--color) var(--style);
--background-color: yellow;
--background-position: top 10px right 5px;
}
div {
@ -26,6 +32,67 @@
height: 150px;
border: 1px solid black;
}
.test-fallback {
background-color: var(--fallback, lime);
}
.test-fallback.with {
--fallback: cyan;
}
.test-nested {
border: var(--border);
}
.test-mixed {
background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
}
.billion-laughs {
--prop1: lol;
--prop2: var(--prop1) var(--prop1);
--prop3: var(--prop2) var(--prop2);
--prop4: var(--prop3) var(--prop3);
--prop5: var(--prop4) var(--prop4);
--prop6: var(--prop5) var(--prop5);
--prop7: var(--prop6) var(--prop6);
--prop8: var(--prop7) var(--prop7);
--prop9: var(--prop8) var(--prop8);
--prop10: var(--prop9) var(--prop9);
--prop11: var(--prop10) var(--prop10);
--prop12: var(--prop11) var(--prop11);
--prop13: var(--prop12) var(--prop12);
--prop14: var(--prop13) var(--prop13);
--prop15: var(--prop14) var(--prop14);
--prop16: var(--prop15) var(--prop15);
--prop17: var(--prop16) var(--prop16);
--prop18: var(--prop17) var(--prop17);
--prop19: var(--prop18) var(--prop18);
--prop20: var(--prop19) var(--prop19);
--prop21: var(--prop20) var(--prop20);
--prop22: var(--prop21) var(--prop21);
--prop23: var(--prop22) var(--prop22);
--prop24: var(--prop23) var(--prop23);
--prop25: var(--prop24) var(--prop24);
--prop26: var(--prop25) var(--prop25);
--prop27: var(--prop26) var(--prop26);
--prop28: var(--prop27) var(--prop27);
--prop29: var(--prop28) var(--prop28);
--prop30: var(--prop29) var(--prop29);
background: var(--prop30);
}
.dependency-cycle {
--recursive: var(--recursive);
--a: var(--b);
--b: var(--a);
background: var(--a);
color: var(--recursive);
}
</style>
</head>
@ -63,6 +130,98 @@
This should be pink
</div>
</div>
<h2>Fallback Values</h2>
<pre>
.test-fallback {
background-color: var(--fallback, lime);
}
.test-fallback.with {
--fallback: cyan;
}
</pre>
<div class="box test-fallback">
<pre>.test-fallback</pre>
This should be green
</div>
<div class="box test-fallback with">
<pre>.test-fallback.with</pre>
This should be cyan
</div>
<h2>Nested var()</h2>
<pre>
:root {
--width: 10px;
--color: orange;
--style: solid;
--border: var(--width) var(--color) var(--style);
}
.test-nested {
border: var(--border);
}
</pre>
<div class="box test-nested">
<pre>.test-nested</pre>
This should have a 10px solid orange border
</div>
<h2>Mixed var()</h2>
<pre>
:root {
--background-color: yellow;
--background-position: top 10px right 5px;
}
.test-mixed {
background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
}
</pre>
<div class="box test-mixed">
<pre>.test-mixed</pre>
This should have a yellow background with a smiley face in the top-right corner
</div>
<h2>Billion laughs attack</h2>
<pre>
.billion-laughs {
--prop1: lol;
--prop2: var(--prop1) var(--prop1);
--prop3: var(--prop2) var(--prop2);
/* ... */
--prop30: var(--prop29) var(--prop29);
background: var(--prop30);
}
</pre>
<div class="box billion-laughs">
<pre>.billion-laughs</pre>
This box tests that we handle the billion laughs attack. If we don't crash, it worked!
</div>
<h2>Dependency cycles</h2>
<pre>
.dependency-cycle {
--recursive: var(--recursive);
--a: var(--b);
--b: var(--a);
background: var(--a);
color: var(--recursive);
}
</pre>
<div class="box dependency-cycle">
<pre>.dependency-cycle</pre>
This box tests that we handle dependency cycles correctly. If we don't crash, it worked!
</div>
</body>
</html>