Implement logical border cascade geometry

render-repros/checks.json

@@ -194,6 +194,14 @@
     {"name": "ordered list reset removes indentation", "color": "#862e9c", "x": 0, "y": 80, "width": 400, "height": 20},
     {"name": "ex padding follows font x height", "color": "#e8590c", "x": 0, "y": 120, "width": 44, "height": 22}
   ],
+  "logical-borders": [
+    {"name": "RTL inline-start shorthand maps to physical right", "color": "#e03131", "x": 190, "y": 0, "width": 10, "height": 79},
+    {"name": "block-end shorthand maps to physical bottom", "color": "#1971c2", "x": 0, "y": 74, "width": 198, "height": 6},
+    {"name": "later logical alias wins over physical right", "color": "#862e9c", "x": 408, "y": 0, "width": 12, "height": 80},
+    {"name": "later physical right wins over logical alias", "color": "#0b7285", "x": 636, "y": 0, "width": 4, "height": 80},
+    {"name": "inline pair start width maps to left", "color": "#f08c00", "x": 660, "y": 0, "width": 5, "height": 80},
+    {"name": "inline pair end width maps to right", "color": "#f08c00", "x": 851, "y": 0, "width": 9, "height": 80}
+  ],
   "max-height-replaced": [
     {"name": "max height clamps intrinsic aspect transfer", "color": "#1971c2", "x": 32, "y": 64, "width": 330, "height": 200}
   ],

render-repros/logical-borders.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  * { box-sizing: border-box }
+  body { margin: 0; display: flex; gap: 20px; direction: ltr }
+  .box { width: 200px; height: 80px; background: #f8f9fa }
+  .a { direction: rtl; border-inline-start: 10px solid #e03131; border-block-end: 6px solid #1971c2 }
+  .b { direction: rtl; border-right: 4px solid #2f9e44; border-inline-start: 12px solid #862e9c }
+  .c { direction: rtl; border-inline-start: 12px solid #c2255c; border-right: 4px solid #0b7285 }
+  .d { border-inline: 8px solid #f08c00; border-inline-width: 5px 9px }
+</style>
+<div class="box a"></div><div class="box b"></div><div class="box c"></div><div class="box d"></div>