colorbox/README.md

## README.md

      
    Raw
  

              README.md
            
          
    https://github.com/colorbox/kaomoji_storage の開発中に見つけた謎挙動
Chrome Version 94.0.4606.71 (Official Build) (x86_64)
Safari Version 15.0 (15612.1.29.41.4, 15612)
で確認

HTML的にaタグの中にtdを入れちゃだめってのはわかるんだけど、ブラウザで表示する時にぶっ壊れる
Rails側は curl_get.html を返しているけど、実際に表示されてるのは displaying,html になる
ChromeとSafariで同じ挙動なので、問題があるのはブラウザの表示時っぽい、表示というかブラウザの標準挙動的なあれかもしれんな
参考にしたのはこのへん
https://www.youtube.com/watch?v=QTv9MVRa_MM
actionview-5.2.6/lib/action_view/renderer/template_renderer.rb
actionview-5.2.6/lib/action_view/context.rb

「tdをaタグで入れるとダメ」というよりは「table系のタグをaタグで囲むとそのaタグはtableの外に追い出される」という挙動が正しいのかもしれない。
試しにtdの外側にあるtrタグを囲ってみたがそういう感じの挙動になった。
その挙動はChromeとSafariで差はなかった。

  
## curl_get.html
<body>
<table>
    <tbody>
    <tr>
        <a format=\"js\" data-remote=\"true\" rel=\"nofollow\" data-method=\"put\" href=\"/kaomojis/3372939/select\">
            <td class=''' id='3372939'>
            !  🎫
            </td>
        </a>
        <a format=\"js\" data-remote=\"true\" rel=\"nofollow\" data-method=\"put\" href=\"/kaomojis/2436110/select\">
        <td class=''' id='2436110'>
        !  🎮
        </td>
    </a>      </tr>
    </tbody>
</table>
</body>

## displaed2.html
<body>
<a format="\&quot;js\&quot;" data-remote="\&quot;true\&quot;" rel="\&quot;nofollow\&quot;" data-method="\&quot;put\&quot;" href="\&quot;/kaomojis/3372939/select\&quot;">
    </a><table>
    <tbody>
        <tr>
            <td class="" '="" id="3372939">
            !  🎫
            </td>
      </tr>

    </tbody>
</table>

</body>

## displaying.html
<body>
<a format="js" data-remote="true" rel="nofollow" data-method="put" href="http://localhost:3000/kaomojis/3372939/select">
</a>
<a format="js" data-remote="true" rel="nofollow" data-method="put" href="http://localhost:3000/kaomojis/2436110/select">
</a>
<table>
  <tbody>
      <tr>
          <td class="" '="" id="3372939">
              !  🎫
          </td>
          <td class="" '="" id="2436110">
              !  🎮
          </td>
    </tr>
  </tbody>
</table>
</body>

## raw_html2.html
<body>
<table>
    <tbody>
        <a format=\"js\" data-remote=\"true\" rel=\"nofollow\" data-method=\"put\" href=\"/kaomojis/3372939/select\">
    <tr>
            <td class=''' id='3372939'>
            !  🎫
            </td>
      </tr>
        </a>
    </tbody>
</table>
</body>

## 俺の答えはこれや！
https://html.spec.whatwg.org/multipage/parsing.html#unexpected-markup-in-tables
	<body>
	<table>
	<tbody>
	<tr>
	<a format=\"js\" data-remote=\"true\" rel=\"nofollow\" data-method=\"put\" href=\"/kaomojis/3372939/select\">
	<td class=''' id='3372939'>
	! 🎫
	</td>
	</a>
	<a format=\"js\" data-remote=\"true\" rel=\"nofollow\" data-method=\"put\" href=\"/kaomojis/2436110/select\">
	<td class=''' id='2436110'>
	! 🎮
	</td>
	</a> </tr>
	</tbody>
	</table>
	</body>
	<body>
	<a format="\"js\"" data-remote="\"true\"" rel="\"nofollow\"" data-method="\"put\"" href="\"/kaomojis/3372939/select\"">
	</a><table>
	<tbody>
	<tr>
	<td class="" '="" id="3372939">
	! 🎫
	</td>
	</tr>

	</tbody>
	</table>

	</body>
	<body>
	<a format="js" data-remote="true" rel="nofollow" data-method="put" href="http://localhost:3000/kaomojis/3372939/select">
	</a>
	<a format="js" data-remote="true" rel="nofollow" data-method="put" href="http://localhost:3000/kaomojis/2436110/select">
	</a>
	<table>
	<tbody>
	<tr>
	<td class="" '="" id="3372939">
	! 🎫
	</td>
	<td class="" '="" id="2436110">
	! 🎮
	</td>
	</tr>
	</tbody>
	</table>
	</body>