Closed Bug 1173505 Opened 9 years ago Closed 8 years ago

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

Categories

(DevTools :: Inspector, defect)

38 Branch
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED DUPLICATE of bug 713106

People

(Reporter: cezary.wagner, Unassigned)

Details

(Keywords: css1, testcase)

Attachments

(2 files)

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.
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!
output.css - CSS which can change :visited color - previous is forcing error in console and computed values which was blue but should be black!!!
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;
}
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
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)
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
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
Closed: 8 years ago
Resolution: --- → DUPLICATE
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: