Traverse inline-block elements too

Fixes #535.

.husky/.gitignore

@@ -1 +1 @@
-_
+_

changelog.md

@@ -1,6 +1,8 @@
 ## 0.3.4 (not released yet)
 
-(Nothing yet)
+- Made rikaichamp traverse text in `inline-block` elements so that it can
+  ready YouTube subtitles with ruby
+  ([#535](https://github.com/birtles/rikaichamp/issues/535))
 
 ## 0.3.3 (2020-12-09)
 

src/content.ts

@@ -923,8 +923,11 @@ export class RikaiContent {
       // We always treat <rb> and <ruby> tags as inline regardless of the
       // styling since sites like renshuu.org do faux-ruby styling where they
       // give these elements styles like 'display: table-row-group'.
+      //
+      // Furthermore, we treat inline-block as inline because YouTube puts
+      // okurigana in a separate inline-block span when using ruby it seems.
       (['RB', 'RUBY'].includes(element.tagName) ||
-        ['inline', 'ruby', 'ruby-base', 'ruby-text'].includes(
+        ['inline', 'inline-block', 'ruby', 'ruby-base', 'ruby-text'].includes(
           getComputedStyle(element).display!
         ));
 

tests/content.test.ts

@@ -843,6 +843,35 @@ describe('rikaiContent:text search', () => {
     assertTextResultEqual(result, 'せん', seNode, 0, seNode, 1, nNode, 1);
   });
 
+  it('should traverse okurigana in inline-block elements too', () => {
+    // YouTube annotates okurigana inline-block spans.
+    //
+    // See https://github.com/birtles/rikaichamp/issues/535
+    testDiv.innerHTML =
+      '<p><ruby><span>疲</span><rt>つか</rt></ruby><span style="display: inline-block">れた</span></p>';
+
+    const kanjiNode = testDiv.firstChild!.firstChild!.firstChild!
+      .firstChild as Text;
+    const okuriganaNode = testDiv.firstChild!.childNodes[1].firstChild as Text;
+    const bbox = getBboxForOffset(kanjiNode, 0);
+
+    const result = subject.getTextAtPoint({
+      x: bbox.left,
+      y: bbox.top + bbox.height / 2,
+    });
+
+    assertTextResultEqual(
+      result,
+      '疲れた',
+      kanjiNode,
+      0,
+      kanjiNode,
+      1,
+      okuriganaNode,
+      2
+    );
+  });
+
   it('should find text in SVG content', () => {
     testDiv.innerHTML = '<svg><text y="1em">あいうえお</text></svg>';
     const textNode = testDiv.firstChild!.firstChild!.firstChild as Text;