[Webkit-unassigned] [Bug 257133] Changing the dir attribute with JS doesn't have effect

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=257133

Karl Dubost <karlcow at apple.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
                 CC|                            |karlcow at apple.com

--- Comment #2 from Karl Dubost <karlcow at apple.com> ---
Created attachment 466462

  --> https://bugs.webkit.org/attachment.cgi?id=466462&action=review

rendering in safari, firefox, chrome

Tested on macOS 13.5
---
Safari Technology Preview  170           18616.1.14.5
Firefox Nightly            115.0a1       11523.5.11
Google Chrome Canary       115.0.5788.0  5788.0

All browsers display a different results. 

# CSS dir() 
The three browsers returns: rtl 
window.getComputedStyle(document.querySelector('p')).direction

# CSS Background Color
On the other hand:
window.getComputedStyle(document.querySelector('p')).backgroundColor 

safari:  rgb(0, 0, 255)
firefox: rgb(255, 0, 0)
chrome:  rgba(0, 0, 0, 0)

# HTML dir
The three browsers returns: null
document.querySelector('p').getAttribute('dir')


If I set the dir to rtl with 
document.querySelector('p').setAttribute('dir', 'rtl')
and check the color again:
window.getComputedStyle(document.querySelector('p')).backgroundColor 

safari:  rgb(255, 0, 0)   - from blue to red
firefox: rgb(255, 0, 0)   - no changes
chrome:  rgba(0, 0, 0, 0) - no changes


chrome doesn't seem to react at all to rtl 
I believe this is https://bugs.chromium.org/p/chromium/issues/detail?id=576815


# Specifications side.
The HTML spec says:

https://html.spec.whatwg.org/multipage/semantics-other.html#selector-ltr

:dir(ltr)
    The :dir(ltr) pseudo-class must match all elements 
    whose directionality is 'ltr'.

:dir(rtl)
    The :dir(rtl) pseudo-class must match all elements 
    whose directionality is 'rtl'

which seems to imply that :dir() should not apply if dir='' is not set. 


BUT https://html.spec.whatwg.org/multipage/dom.html#the-directionality

If the element has a parent element 
   and the dir attribute is NOT in a defined state 
   (i.e. it is not present or has an invalid value)

THEN The directionality of the element is the same 
     as the element's parent element's directionality.

Going up we get document.documentElement.getAttribute('dir') => "rtl"


In the CSS specification
https://drafts.csswg.org/selectors/#the-dir-pseudo

> The difference between :dir(C) and ''[dir=C]'' is that ''[dir=C]'' 
> only performs a comparison against a given attribute on the element, 
> while the :dir(C) pseudo-class uses the UAs knowledge of the 
> document’s semantics to perform the comparison. For example, in 
> HTML, the directionality of an element inherits so that a child 
> without a dir attribute will have the same directionality as its 
> closest ancestor with a valid dir attribute. As another example, 
> in HTML, an element that matches ''[dir=auto]'' will match either 
> :dir(ltr) or :dir(rtl) depending on the resolved directionality of 
> the elements as determined by its contents. [HTML5]


So Firefox gets it right
And Safari needs to be fixed.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230523/05832c8c/attachment-0001.htm>