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

Support RTL layout and video posters

Browse Source
This commit is contained in:
SGavrl committed 2026-08-04 09:04:45 +00:00
1 parent 68c81f319c
commit 012a7dce2f
9 files changed
+473 -77
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

render-repros/checks.json
+13
View File
@@ -60,6 +60,13 @@
{"name": "display contents overrides hidden responsive wrapper", "color": "#087f5b", "x": 0, "y": 0, "width": 200, "height": 80},
{"name": "flattened sibling remains in parent flex flow", "color": "#1971c2", "x": 200, "y": 0, "width": 200, "height": 80}
],
"direction-rtl": [
{"name": "inherited RTL places first flex item at inline start", "color": "#e03131", "x": 850, "y": 0, "width": 50, "height": 40},
{"name": "inherited RTL reverses the flex row", "color": "#1971c2", "x": 800, "y": 0, "width": 50, "height": 40},
{"name": "inherited RTL places first grid track at inline start", "color": "#2f9e44", "x": 850, "y": 60, "width": 50, "height": 40},
{"name": "inherited RTL reverses explicit grid track placement", "color": "#1971c2", "x": 800, "y": 60, "width": 50, "height": 40},
{"name": "inherited RTL resolves block under-constraint from right", "color": "#862e9c", "x": 850, "y": 120, "width": 50, "height": 40}
],
"eventtarget-lifecycle": [
{"name": "framework lifecycle EventTarget completes", "color": "#18723a", "x": 0, "y": 0, "width": 420, "height": 120}
],
@@ -193,6 +200,12 @@
"media-text-track": [
{"name": "media text track exposes parsed cues", "color": "#18723a", "x": 0, "y": 0, "width": 420, "height": 120}
],
"video-poster": [
{"name": "poster intrinsic width and first stripe", "color": "#ff0000", "x": 20, "y": 20, "width": 100, "height": 100},
{"name": "poster intrinsic geometry retains middle stripe", "color": "#00ff00", "x": 120, "y": 20, "width": 100, "height": 100},
{"name": "poster intrinsic geometry retains final stripe", "color": "#0000ff", "x": 220, "y": 20, "width": 100, "height": 100},
{"name": "right object-position selects the final stripe", "color": "#0000ff", "x": 150, "y": 150, "width": 100, "height": 100}
],
"mixed-content-block": [
{"name": "full-width block child", "color": "#ccddff", "width": 400}
],
render-repros/direction-rtl.html
+16
View File
@@ -0,0 +1,16 @@
<!doctype html>
<meta charset="utf-8">
<style>
body { margin: 0; direction: rtl }
.case { width: 300px; height: 40px; margin-bottom: 20px; background: #dee2e6 }
.flex { display: flex }
.grid { display: grid; grid-template-columns: 50px 50px }
.item { width: 50px; height: 40px }
.red { background: #e03131 }
.blue { background: #1971c2 }
.green { background: #2f9e44 }
.block > div { width: 50px; height: 40px; background: #862e9c }
</style>
<div class="case flex"><div class="item red"></div><div class="item blue"></div></div>
<div class="case grid"><div class="item green"></div><div class="item blue"></div></div>
<div class="case block"><div></div></div>
render-repros/video-poster.html
+29
View File
@@ -0,0 +1,29 @@
<!doctype html>
<meta charset="utf-8">
<title>video poster replaced content</title>
<style>
html, body { margin: 0; background: white; }
video { position: absolute; }
#intrinsic { left: 20px; top: 20px; }
#positioned {
left: 20px;
top: 150px;
width: 100px;
height: 100px;
object-fit: cover;
object-position: right center;
border-radius: 20px;
opacity: .5;
}
#position-only {
left: 150px;
top: 150px;
width: 100px;
height: 100px;
object-fit: cover;
object-position: right center;
}
</style>
<video id="intrinsic" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='100'%3E%3Crect%20width='100'%20height='100'%20fill='%23ff0000'/%3E%3Crect%20x='100'%20width='100'%20height='100'%20fill='%2300ff00'/%3E%3Crect%20x='200'%20width='100'%20height='100'%20fill='%230000ff'/%3E%3C/svg%3E"></video>
<video id="positioned" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='100'%3E%3Crect%20width='100'%20height='100'%20fill='%23ff0000'/%3E%3Crect%20x='100'%20width='100'%20height='100'%20fill='%2300ff00'/%3E%3Crect%20x='200'%20width='100'%20height='100'%20fill='%230000ff'/%3E%3C/svg%3E"></video>
<video id="position-only" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='100'%3E%3Crect%20width='100'%20height='100'%20fill='%23ff0000'/%3E%3Crect%20x='100'%20width='100'%20height='100'%20fill='%2300ff00'/%3E%3Crect%20x='200'%20width='100'%20height='100'%20fill='%230000ff'/%3E%3C/svg%3E"></video>