Closed Bug 1847189 Opened 2 years ago Closed 2 years ago

Inconsistent H1 heading style in browserAction popup

Categories

(Core :: CSS Parsing and Computation, defect)

defect

Tracking

()

RESOLVED INVALID

People

(Reporter: eros_uk, Unassigned)

Details

Attachments

(4 files)

Attached image popup2.png

The <h1> to <h6> HTML elements are displayed inconsistently depending on where in the DOM they are.
A minimal Test extension is attached.

manifest.json

{
  "manifest_version": 2,
  "name": "browserAction Heading",
  "description": "test",
  "version": "1.0",

  "browser_action": {
    "browser_style": false,
    "default_popup": "popup.html",
    "default_title": "Popup"
  }
}

popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Popup</title>
  </head>
  <body>
    <h1>body heading 1</h1>
    <h2>body heading 2</h2>
    <h3>body heading 3</h3>
    <h4>body heading 4</h4>
    <h5>body heading 5</h5>
    <h6>body heading 6</h6>

    <article>
      <h1>article heading 1</h1>
      <h2>article heading 2</h2>
      <h3>article heading 3</h3>
      <h4>article heading 4</h4>
      <h5>article heading 5</h5>
      <h6>article heading 6</h6>

      <section>
        <h1>section heading 1</h1>
        <h2>section heading 2</h2>
        <h3>section heading 3</h3>
        <h4>section heading 4</h4>
        <h5>section heading 5</h5>
        <h6>section heading 6</h6>

      <section>
    </article>
  </body>
</html>

Observation

  • <h2> to <h6> size & style remains the same & consistent in <body>, <article>, and <section>
  • in <body>, h1 to h6 are displayed consistently
  • in <article>, h1 is the same size as h2, and h2 to h6 are displayed consistently
  • in <section>, h1 is smaller than h2, and h2 to h6 are displayed consistently
Attached image popup3.png
Attached file bug1847189.zip

Minimal Test Extension

Flags: needinfo?(emilio)

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → CSS Parsing and Computation
Product: WebExtensions → Core

This seems expected per https://html.spec.whatwg.org/#sections-and-headings? That's why I asked if it looked the same in a tab (which it does).

Flags: needinfo?(emilio) → needinfo?(eros_uk)

Then, it seems that it is the expected behaviour, although whatwg.org only shows h1 in :is(article, aside, nav, section) and does not outline the relationship of h1 with other headings.

Once h1 is reduced in size, should other headings be reduced accordingly in order to maintain a balanced ratio between h1 & h2 and the rest?!

x h2
x x h2
x x x h2
...

You can close this bug, if the above absence of balance between h1 & h2 is expected by the HTML standard.
I also checked with Chrome and the display is the same as Firefox.

Flags: needinfo?(eros_uk)
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: