css - do not forward border class from img to div

Author: cscheid

src/resources/filters/layout/html.lua

@@ -171,7 +171,13 @@ function renderHtmlFigure(el, render)
   end
 
   -- create figure div
-  local figureDiv = pandoc.Div({}, pandoc.Attr(el.identifier, el.classes, figureAttr))
+  local figureDiv = pandoc.Div({}, pandoc.Attr(el.identifier, {}, figureAttr))
+  figureDiv.classes = el.classes:filter(function(str) 
+    if str:match("quarto%-figure.*") then
+      return true
+    end
+    return false
+  end)
 
   -- remove identifier (it is now on the div)
   el.identifier = ""

src/resources/filters/layout/pandoc3_figure.lua

@@ -50,8 +50,10 @@ function render_pandoc3_figure()
       image.caption = quarto.utils.as_inlines(figure.caption.long)
     end
     -- TODO need to find all correct classes to forward
-    if figure.classes:includes("margin-caption") then
-      image.classes:insert("margin-caption")
+    for i, v in pairs(figure.classes) do
+      if v:match("^margin%-") or v:match("^quarto%-") or v:match("^column%-") then
+        image.classes:insert(v)
+      end
     end
     return htmlImageFigure(image)
   end

src/resources/filters/quarto-pre/parsefiguredivs.lua

@@ -3,6 +3,15 @@
 
 local patterns = require("modules/patterns")
 
+local attributes_to_not_merge = pandoc.List({
+  "width", "height"
+})
+
+-- Narrow fix for #8000
+local classes_to_not_merge = pandoc.List({
+  "border"
+})
+
 function handle_subfloatreftargets()
   -- #7045: pull fig-pos and fig-env attributes from subfloat to parent
   return {
@@ -238,8 +247,22 @@ function parse_floatreftargets()
       -- if the div contains a single image, then we simply use the image as
       -- the content
       content = content[1].content[1]
-      attr = merge_attrs(attr, content.attr)
-      attr.identifier = div.identifier -- never override the identifier
+
+      -- don't merge classes because they often have CSS consequences 
+      -- but merge attributes because they're needed to correctly resolve
+      -- behavior such as fig-pos="h", etc
+      -- See #8000.
+      -- We also exclude attributes we know to not be relevant to the div
+      for k, v in pairs(content.attr.attributes) do
+        if not attributes_to_not_merge:includes(k) then
+          attr.attributes[k] = v
+        end
+      end
+      for _, v in ipairs(content.attr.classes) do
+        if not classes_to_not_merge:includes(v) then
+          attr.classes:insert(v)
+        end
+      end
     end
 
     local skip_outer_reftarget = false
@@ -353,9 +376,20 @@ function parse_floatreftargets()
       local fig_attr = fig.attr
       local new_content = _quarto.ast.walk(fig.content[1], {
         Image = function(image)
-          -- forward attributes and classes from the image to the float
-          fig_attr = merge_attrs(fig_attr, image.attr)
-          -- strip redundant image caption
+          -- don't merge classes because they often have CSS consequences 
+          -- but merge attributes because they're needed to correctly resolve
+          -- behavior such as fig-pos="h", etc
+          -- See #8000.
+          for k, v in pairs(image.attributes) do
+            if not attributes_to_not_merge:includes(k) then
+              fig_attr.attributes[k] = v
+            end
+          end    
+          for _, v in ipairs(image.classes) do
+            if not classes_to_not_merge:includes(v) then
+              fig_attr.classes:insert(v)
+            end
+          end
           image.caption = {}
           return image
         end
@@ -485,7 +519,7 @@ function parse_floatreftargets()
         end
         return quarto.FloatRefTarget({
           identifier = identifier,
-          classes = img.classes,
+          classes = {}, 
           attributes = as_plain_table(img.attributes),
           type = category.name,
           content = img,

tests/docs/smoke-all/2024/01/05/issue-8000.qmd

@@ -0,0 +1,38 @@
+---
+title: issue-8000
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        - 
+          - "div#fig-2.border"
+        -
+          - "div#fig-1.border"
+          - "div#fig-3.border"
+          - "#scaffold div.border"
+---
+
+::: {#scaffold}
+
+![An _image_ with border](https://placeholder.co/400){.border fig-alt="And alt text."}
+
+:::
+
+![An _image_ with border](https://placeholder.co/400){#fig-1 .border fig-alt="And alt text."}
+
+
+::: {#fig-2 .border}
+
+![](https://placeholder.co/400)
+
+A _figure_ with border.
+
+:::
+
+::: {#fig-3}
+
+![](https://placeholder.co/400){.border}
+
+An image with border again.
+
+:::