feat: render 12/24 hour format according to user's preference and add hourCycle option
#329
+188
−20
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1982,6 +1982,7 @@ suite('relative-time', function () { | |
| const el = document.createElement('relative-time') | ||
| el.setAttribute('lang', 'es-ES') | ||
| el.setAttribute('time-zone', 'Europe/Madrid') | ||
| el.setAttribute('hour-cycle', 'h23') | ||
|
|
||
| el.setAttribute('datetime', '2023-01-15T17:00:00.000Z') | ||
| await Promise.resolve() | ||
|
|
@@ -2815,6 +2816,134 @@ suite('relative-time', function () { | |
| } | ||
| }) | ||
|
|
||
| suite('[hourCycle]', function () { | ||
| test('formats with 24-hour cycle when hour-cycle is h23', async () => { | ||
| const el = document.createElement('relative-time') | ||
| el.setAttribute('datetime', '2020-01-01T15:00:00.000Z') | ||
| el.setAttribute('time-zone', 'UTC') | ||
| el.setAttribute('format', 'datetime') | ||
| el.setAttribute('hour', 'numeric') | ||
| el.setAttribute('minute', '2-digit') | ||
| el.setAttribute('hour-cycle', 'h23') | ||
| await Promise.resolve() | ||
| assert.notMatch(el.shadowRoot.textContent, /AM|PM/i) | ||
| assert.match(el.shadowRoot.textContent, /15:00/) | ||
| }) | ||
|
Comment on lines
+2820
to
+2831
There was a problem hiding this comment. These hour-cycle tests rely on the runtime’s default locale/time formatting (e.g., assuming This issue also appears on line 2833 of the same file.
Contributor
Author
There was a problem hiding this comment. The existing test suite already asserts English strings without setting This comment was written by Claude Opus 4.6 |
||
|
|
||
| test('formats with 12-hour cycle when hour-cycle is h12', async () => { | ||
| const el = document.createElement('relative-time') | ||
| el.setAttribute('datetime', '2020-01-01T15:00:00.000Z') | ||
| el.setAttribute('time-zone', 'UTC') | ||
| el.setAttribute('format', 'datetime') | ||
| el.setAttribute('hour', 'numeric') | ||
| el.setAttribute('minute', '2-digit') | ||
| el.setAttribute('hour-cycle', 'h12') | ||
| await Promise.resolve() | ||
| assert.match(el.shadowRoot.textContent, /3:00/) | ||
| assert.match(el.shadowRoot.textContent, /PM/i) | ||
| }) | ||
|
|
||
| test('formats with 12-hour cycle when hour-cycle is h11', async () => { | ||
| const el = document.createElement('relative-time') | ||
| el.setAttribute('datetime', '2020-01-01T15:00:00.000Z') | ||
| el.setAttribute('time-zone', 'UTC') | ||
| el.setAttribute('format', 'datetime') | ||
| el.setAttribute('hour', 'numeric') | ||
| el.setAttribute('minute', '2-digit') | ||
| el.setAttribute('hour-cycle', 'h11') | ||
| await Promise.resolve() | ||
| assert.match(el.shadowRoot.textContent, /3:00/) | ||
| assert.match(el.shadowRoot.textContent, /PM/i) | ||
| }) | ||
|
|
||
| test('formats with 24-hour cycle when hour-cycle is h24', async () => { | ||
| const el = document.createElement('relative-time') | ||
| el.setAttribute('datetime', '2020-01-01T15:00:00.000Z') | ||
| el.setAttribute('time-zone', 'UTC') | ||
| el.setAttribute('format', 'datetime') | ||
| el.setAttribute('hour', 'numeric') | ||
| el.setAttribute('minute', '2-digit') | ||
| el.setAttribute('hour-cycle', 'h24') | ||
| await Promise.resolve() | ||
| assert.notMatch(el.shadowRoot.textContent, /AM|PM/i) | ||
| }) | ||
silverwind marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| test('title uses hour-cycle setting', async () => { | ||
| const el = document.createElement('relative-time') | ||
| el.setAttribute('datetime', '2020-01-01T15:00:00.000Z') | ||
| el.setAttribute('time-zone', 'UTC') | ||
| el.setAttribute('hour-cycle', 'h23') | ||
| await Promise.resolve() | ||
| assert.notMatch(el.getAttribute('title'), /AM|PM/i) | ||
| assert.match(el.getAttribute('title'), /15/) | ||
| }) | ||
|
|
||
| test('inherits hour-cycle from ancestor', async () => { | ||
| const el = document.createElement('relative-time') | ||
| el.setAttribute('datetime', '2020-01-01T15:00:00.000Z') | ||
| el.setAttribute('time-zone', 'UTC') | ||
| el.setAttribute('format', 'datetime') | ||
| el.setAttribute('hour', 'numeric') | ||
| el.setAttribute('minute', '2-digit') | ||
| const div = document.createElement('div') | ||
| div.setAttribute('hour-cycle', 'h23') | ||
| div.appendChild(el) | ||
| document.body.appendChild(div) | ||
| await Promise.resolve() | ||
| assert.notMatch(el.shadowRoot.textContent, /AM|PM/i) | ||
| assert.match(el.shadowRoot.textContent, /15:00/) | ||
| div.remove() | ||
| }) | ||
|
|
||
| test('inherits hour-cycle from documentElement', async () => { | ||
| const el = document.createElement('relative-time') | ||
| el.setAttribute('datetime', '2020-01-01T15:00:00.000Z') | ||
| el.setAttribute('time-zone', 'UTC') | ||
| el.setAttribute('format', 'datetime') | ||
| el.setAttribute('hour', 'numeric') | ||
| el.setAttribute('minute', '2-digit') | ||
| document.documentElement.setAttribute('hour-cycle', 'h23') | ||
| await Promise.resolve() | ||
| assert.notMatch(el.shadowRoot.textContent, /AM|PM/i) | ||
| assert.match(el.shadowRoot.textContent, /15:00/) | ||
| document.documentElement.removeAttribute('hour-cycle') | ||
| }) | ||
|
|
||
| test('element attribute overrides ancestor', async () => { | ||
| const el = document.createElement('relative-time') | ||
| el.setAttribute('datetime', '2020-01-01T15:00:00.000Z') | ||
| el.setAttribute('time-zone', 'UTC') | ||
| el.setAttribute('format', 'datetime') | ||
| el.setAttribute('hour', 'numeric') | ||
| el.setAttribute('minute', '2-digit') | ||
| el.setAttribute('hour-cycle', 'h12') | ||
| const div = document.createElement('div') | ||
| div.setAttribute('hour-cycle', 'h23') | ||
| div.appendChild(el) | ||
| document.body.appendChild(div) | ||
| await Promise.resolve() | ||
| assert.match(el.shadowRoot.textContent, /3:00/) | ||
| assert.match(el.shadowRoot.textContent, /PM/i) | ||
| div.remove() | ||
| }) | ||
|
|
||
| test('re-renders when hour-cycle attribute changes', async () => { | ||
| const el = document.createElement('relative-time') | ||
| el.setAttribute('datetime', '2020-01-01T15:00:00.000Z') | ||
| el.setAttribute('time-zone', 'UTC') | ||
| el.setAttribute('format', 'datetime') | ||
| el.setAttribute('hour', 'numeric') | ||
| el.setAttribute('minute', '2-digit') | ||
| el.setAttribute('hour-cycle', 'h12') | ||
| await Promise.resolve() | ||
| assert.match(el.shadowRoot.textContent, /PM/i) | ||
| el.setAttribute('hour-cycle', 'h23') | ||
| await Promise.resolve() | ||
| assert.notMatch(el.shadowRoot.textContent, /AM|PM/i) | ||
| assert.match(el.shadowRoot.textContent, /15:00/) | ||
| }) | ||
| }) | ||
|
|
||
| suite('[timeZone]', function () { | ||
| test('updates when the time-zone attribute is set', async () => { | ||
| const el = document.createElement('relative-time') | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.