link a:visited color is black because invalid css inheritance a overrides a:visited without reason

RESOLVED DUPLICATE of bug 713106

Status

()

Firefox
Developer Tools: Inspector
RESOLVED DUPLICATE of bug 713106
3 years ago
2 years ago

People

(Reporter: Cezary Wagner, Unassigned)

Tracking

({css1, testcase})

38 Branch
css1, testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Created attachment 8620505 [details]
kazar-v1.zip Source code to test VISITED links

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0
Build ID: 20150525141253

Steps to reproduce:

1. I am applying styles in right order.
2. Firefox report that link should be blue but is rendered and black!!!



Actual results:

1. Links should be blue - computed color is blue - computed style order is blue - link is BLACK???
a. link is black - see computed styles should be blue
https://www.dropbox.com/s/ygiasz5iau1wqcu/Zrzut%20ekranu%202015-06-10%2021.15.38.png?dl=0
b. link is black - see styles order should be blue
https://www.dropbox.com/s/phw8291t8sigezc/Zrzut%20ekranu%202015-06-10%2021.56.39.png?dl=0
c. disable a { style which should have not impact - see links not is blue as should be before
https://www.dropbox.com/s/jg55odfkgo12fu4/Zrzut%20ekranu%202015-06-10%2021.16.30.png?dl=0





Expected results:

1. Link should be black.
(Reporter)

Comment 1

3 years ago
I was checked that styles order applied in console is invalid and computed value is invalid - whatever rendered color is valid - since a:link should has no impact on visited - fix console.

I looks that FF works but Chrome not works.

I will send you another CSS set :visited and gives valid color!
(Reporter)

Comment 2

3 years ago
Created attachment 8620533 [details]
output.css - CSS which can change :visited color - previous is forcing error in console and computed values which was blue but should be black!!!

output.css - CSS which can change :visited color - previous is forcing error in console and computed values which was blue but should be black!!!
(Reporter)

Comment 3

3 years ago
This is valid CSS to make :visited blue whatever - console and computed values is still invalid since shows blue for :visited from :link what is still bug.

/* fix bootstrap problems */
a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}
a:focus {
  outline: none;
}

a:link, a:visited {
  color: #2b6598;
  text-decoration: none;
}
a:link:hover,
a:link:focus {
  color: #1a3d5c;
  text-decoration: underline;
}
a:link:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:visited:hover,
a:visited:focus {
  color: #1a3d5c;
  text-decoration: underline;
}
a:visited:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Comment 4

3 years ago
Please provide a minimized testcase (just the HTML and CSS needed to reproduce the issue and nothing else).

Are you reporting an issue with the display in web pages or Firefox's developer tools?

You can't fetch the actual color of visited links. That's intentional behavior.
https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
Flags: needinfo?(cezary.wagner)
Keywords: testcase-wanted
Summary: link a:visited color is black because invalid css injeritance a overrides a:visited without reason → link a:visited color is black because invalid css inheritance a overrides a:visited without reason
(Reporter)

Comment 5

3 years ago
Are you not to lazy to read attachments :) - really?

Can you clean my room for this code in exchange - if I will have allergy I will need your help?

https://jsfiddle.net/0adxtrxh/

SCREEN
https://www.dropbox.com/s/3ueown87cfcqnp7/Zrzut%20ekranu%202015-06-14%2019.49.41.png?dl=0

HTML
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1173505">I can not use delivered example - since I am to lazy to read attachments</a>

CSS
/* fix bootstrap problems */
a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}
a:focus {
  outline: none;
}

a:link {
  color: #2b6598;
  text-decoration: none;
}
a:link:hover,
a:link:focus {
  color: #1a3d5c;
  text-decoration: underline;
}
a:link:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:visited:hover,
a:visited:focus {
  color: #1a3d5c;
  text-decoration: underline;
}
a:visited:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
Flags: needinfo?(cezary.wagner)

Comment 6

3 years ago
There's no color specified for unhovered visited links. It seems that the rule that's applied is a { color: inherit; } — which is what I expect, and the same result in IE 11 and Opera 29.

The Inspector tools of all three browsers show a:link { color: #2b6598; } as the rule that's applied.
Component: Untriaged → Developer Tools: Inspector
Keywords: testcase-wanted → css1, testcase
Inspector bug triage. Filter on CLIMBING SHOES.

This bug is a duplicate of Bug 713106. ":visited" styles are not displayed in devtools at the moment.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 713106
You need to log in before you can comment on or make changes to this bug.