fix(link-in-text-block): take into account ancestor inline element styles #4135
Conversation
| @@ -55,7 +55,7 @@ <h1>Non-color change tests</h1> | |||
| <p style="color: black"> | |||
| paragraph of text (pass: link is bolder than paragraph) | |||
| <a | |||
| style="text-decoration: none; font-weight: bolder; color: black" | |||
| style="text-decoration: none; font-weight: bolder; color: #222" | |||
There was a problem hiding this comment.
This would pass even without the change in style due to using the same color as the paragraph.
|
|
||
| const fixture = document.getElementById('fixture'); | ||
| function createTestFixture({ target, root, inline } = {}) { |
There was a problem hiding this comment.
Did some cleanup of this file. It didn't need to create actual style sheets for the elements so just made a simpler function to create inline styles.
| while (parentBlock && parentBlock.nodeType === 1 && !isBlock(parentBlock)) { | ||
| inlineNodes.push(parentBlock); |
There was a problem hiding this comment.
I don't think we can just push any inline ancestor. If the element has non-link text in it is no longer a distinguishing style. Take something like the following, that should not pass because it has a bold parent:
<p>
Welcome to the jungle <strong>we have <a href="">fun and games</a></strong>.
</p>This probably does need to do some filtering. It doesn't matter if it's just a comma or something, but whole worlds I don't think counts anymore.
There was a problem hiding this comment.
The above issue was resolved for strong / underline, but not for pseudo elements. This shouldn't be passed because of that pseudoElm class:
<p>
Welcome to the jungle <span class="pseudoElm">we have <a href="">fun and games</a></span>.
</p>It makes me wonder whether checking for pseudo elms should be done inside elementIsDistinct to avoid the repeat?
| const borderClr = new Color(); | ||
| borderClr.parseString(curNodeStyle.getPropertyValue(edge + '-color')); |
There was a problem hiding this comment.
Wouldn't it be nice if we had this:
| const borderClr = new Color(); | |
| borderClr.parseString(curNodeStyle.getPropertyValue(edge + '-color')); | |
| const borderClr = Color.fromString(curNodeStyle.getPropertyValue(edge + '-color')); |
Not related to the PR. Just an idea.
| while (parentBlock && parentBlock.nodeType === 1 && !isBlock(parentBlock)) { | ||
| inlineNodes.push(parentBlock); |
There was a problem hiding this comment.
The above issue was resolved for strong / underline, but not for pseudo elements. This shouldn't be passed because of that pseudoElm class:
<p>
Welcome to the jungle <span class="pseudoElm">we have <a href="">fun and games</a></span>.
</p>It makes me wonder whether checking for pseudo elms should be done inside elementIsDistinct to avoid the repeat?
| const ancestorStyle = window.getComputedStyle(ancestorNode); | ||
| let curNode = node; | ||
| while (curNode !== ancestorNode) { | ||
| const curNodeStyle = window.getComputedStyle(curNode); |
There was a problem hiding this comment.
In the first iteration curNodeStyle === nodeStyle. Lets avoid calling this expensive function twice.
| 'font-style', | ||
| 'font-size' | ||
| ].reduce((result, cssProp) => { | ||
| let hasStyle = ['font-weight', 'font-style', 'font-size'].some(cssProp => { |
There was a problem hiding this comment.
Maybe this stuff that inherits should go above the while loop. Also, a comment here would be nice to indicate this isn't in the while loop because it inherits. After not having thought about this for three weeks, it took me a bit to realise why you did it this way.
| } | ||
|
|
||
| if ( | ||
| hasSameText(node, curNode) && |
There was a problem hiding this comment.
I'm a little confused, why is hasSameText() not in the while condition? I.e.
while (curNode !== ancestorNode && hasSameText(node, curNode)) {My intuition says that that's what should be happening. Remind me why an ancestor with a background-image that has different text would count as making the link distinct?
First of 2 for #4126 allowing
link-in-text-blockto use an ancestor inline element's styles when considering the style of the link. While doing this I noticed that the unit tests didn't test any of the styles we consider to be distinct, so went ahead and added them.