thebadking/obscura
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correct ratio-only replaced element sizing

Browse Source
This commit is contained in:
SGavrl committed 2026-08-04 09:54:56 +00:00
1 parent 99ff0601bf
commit 6d0f884ee0
7 files changed
+316 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

render-repros/checks.json
+7
View File
@@ -279,6 +279,13 @@
{"name": "text alignment leaves the block frame at available width", "color": "#1971c2", "x": 450, "y": 0, "width": 450, "height": 304},
{"name": "auto block wrapper contains its percentage image", "color": "#c2255c", "x": 498, "y": 48, "width": 354, "height": 208}
],
"ratio-only-inline-images": [
{"name": "native image stretch-fits its definite line width", "color": "#087f5b", "x": 0, "y": 0, "width": 280, "height": 280},
{"name": "inline anchor preserves ratio-only replaced sizing", "color": "#1971c2", "x": 300, "y": 0, "width": 280, "height": 280},
{"name": "authored inline image remains an atomic replaced box", "color": "#862e9c", "x": 600, "y": 0, "width": 280, "height": 280},
{"name": "authored block image uses the same ratio-only branch", "color": "#e8590c", "x": 0, "y": 300, "width": 280, "height": 280},
{"name": "authored inline-block image keeps replaced sizing", "color": "#c2255c", "x": 300, "y": 300, "width": 280, "height": 280}
],
"right-float-navigation": [
{"name": "first inline item stays at band start", "color": "#087f5b", "x": 0, "y": 0, "width": 60, "height": 30},
{"name": "second inline item keeps source order", "color": "#1971c2", "x": 64, "y": 0, "width": 80, "height": 30},
render-repros/ratio-only-inline-images.html
+31
View File
@@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ratio-only inline image sizing</title>
<style>
html, body { margin: 0; }
.case {
position: absolute;
width: 280px;
height: 280px;
line-height: 0;
}
#direct-case { left: 0; top: 0; }
#anchor-case { left: 300px; top: 0; }
#inline-case { left: 600px; top: 0; }
#block-case { left: 0; top: 300px; }
#inline-block-case { left: 300px; top: 300px; }
#authored-inline { display: inline; }
#authored-block { display: block; }
#authored-inline-block { display: inline-block; }
</style>
</head>
<body>
<div class="case" id="direct-case"><img id="direct" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 576'%3E%3Crect width='576' height='576' fill='%23087f5b'/%3E%3C/svg%3E"></div>
<div class="case" id="anchor-case"><a><img id="anchored" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 576'%3E%3Crect width='576' height='576' fill='%231971c2'/%3E%3C/svg%3E"></a></div>
<div class="case" id="inline-case"><img id="authored-inline" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 576'%3E%3Crect width='576' height='576' fill='%23862e9c'/%3E%3C/svg%3E"></div>
<div class="case" id="block-case"><img id="authored-block" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 576'%3E%3Crect width='576' height='576' fill='%23e8590c'/%3E%3C/svg%3E"></div>
<div class="case" id="inline-block-case"><img id="authored-inline-block" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 576'%3E%3Crect width='576' height='576' fill='%23c2255c'/%3E%3C/svg%3E"></div>
</body>
</html>