Skip to content

GitLab

T
tangled
Commit 29ec679e authored by Oriol Brufau's avatar Oriol Brufau Committed by Commit Bot
Browse files
Options

[css-logical] Allow flow-relative border colors in :visited rules 

They should be allowed like the physical border colors.

Spec: https://drafts.csswg.org/css-logical/#border-color
Spec: https://drafts.csswg.org/selectors/#visited-pseudo

BUG=860313

TEST=fast/css/css/logical-box-border-color-visited-001.html
TEST=fast/css/css/logical-box-border-color-visited-002.html
TEST=fast/css/css/logical-box-border-color-visited-003.html

Change-Id: I20967bf4b00716e5c4ec2bac2e3781c81cdaa688
Reviewed-on: https://chromium-review.googlesource.com/1178043
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#584036}
parent f39cb55a
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 0 deletions
third_party/WebKit/LayoutTests/fast/css/logical-box-border-color-visited-link-001-expected.html 0 → 100644
View file @ 29ec679e
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
div {
background: green;
height: 100px;
width: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
third_party/WebKit/LayoutTests/fast/css/logical-box-border-color-visited-link-001.html 0 → 100644
View file @ 29ec679e
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Logical Properties: Flow-Relative Border Colors in Visited Links</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical/#border-color" />
<link rel="help" href="https://drafts.csswg.org/selectors/#visited-pseudo" />
<link rel="match" href="logical-box-border-color-visited-link-001-expected.html" />
<meta name="assert" content="This test checks that flow-relative border color longhands and border shorthands for specific side set border color for visited links." />
<style>
a {
display: inline-block;
vertical-align: top;
border: 25px solid red;
}
#link1, #link2:visited {
border-block-start-color: green;
border-block-end-color: green;
border-inline-start-color: green;
border-inline-end-color: green;
}
#link3 {
border-block-start: 25px solid green;
border-block-end: 25px solid green;
border-inline-start: 25px solid green;
border-inline-end: 25px solid green;
}
#link4:visited {
/* :visited should honor the border color but ignore other values in the shorthand */
border-block-start: 0 none green;
border-block-end: 0 none green;
border-inline-start: 0 none green;
border-inline-end: 0 none green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<!-- Links point to current URL, which should be visited -->
<a id="link1" href=""></a><a id="link2" href=""></a><br />
<a id="link3" href=""></a><a id="link4" href=""></a>
third_party/WebKit/LayoutTests/fast/css/logical-box-border-color-visited-link-002-expected.html 0 → 100644
View file @ 29ec679e
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
div {
background: green;
height: 100px;
width: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
third_party/WebKit/LayoutTests/fast/css/logical-box-border-color-visited-link-002.html 0 → 100644
View file @ 29ec679e
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Logical Properties: Flow-Relative Border Colors in Visited Links</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical/#border-color" />
<link rel="help" href="https://drafts.csswg.org/selectors/#visited-pseudo" />
<link rel="match" href="logical-box-border-color-visited-link-002-expected.html" />
<meta name="assert" content="This test checks that axis border shorthands set border color for visited links." />
<style>
a {
display: inline-block;
vertical-align: top;
border: 25px solid red;
}
#link1, #link2:visited {
border-block-color: green;
border-inline-color: green;
}
#link3 {
border-block: 25px solid green;
border-inline: 25px solid green;
}
#link4:visited {
/* :visited should honor the border color but ignore other values in the shorthand */
border-block: 0 none green;
border-inline: 0 none green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<!-- Links point to current URL, which should be visited -->
<a id="link1" href=""></a><a id="link2" href=""></a><br />
<a id="link3" href=""></a><a id="link4" href=""></a>
third_party/WebKit/LayoutTests/fast/css/logical-box-border-color-visited-link-003-expected.html 0 → 100644
View file @ 29ec679e
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
div {
background: green;
height: 100px;
width: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
third_party/WebKit/LayoutTests/fast/css/logical-box-border-color-visited-link-003.html 0 → 100644
View file @ 29ec679e
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Logical Properties: Flow-Relative Border Colors in Visited Links</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#border-color" />
<link rel="help" href="https://drafts.csswg.org/selectors/#visited-pseudo" />
<link rel="match" href="logical-box-border-color-visited-link-003-expected.html" />
<meta name="assert" content="This test checks that mapping for flow-relative border colors in visited links uses :link's writing mode instead of :visited's one." />
<style>
a {
display: inline-block;
vertical-align: top;
border: 25px solid green;
border-top-color: red;
border-left-color: red;
}
#link1:visited,
#link2,
#link3:visited,
#link4 {
direction: rtl;
}
#link1:visited,
#link2:visited,
#link3,
#link4 {
writing-mode: vertical-rl;
}
#link1:visited {
border-block-start-color: green;
border-inline-start-color: green;
}
#link2:visited {
border-block-start-color: green;
border-inline-end-color: green;
}
#link3:visited {
border-inline-start-color: green;
border-block-end-color: green;
}
#link4:visited {
border-inline-end-color: green;
border-block-end-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<!-- Links point to current URL, which should be visited -->
<a id="link1" href=""></a><a id="link2" href=""></a><br />
<a id="link3" href=""></a><a id="link4" href=""></a>
third_party/blink/renderer/core/css/CSSProperties.json5
View file @ 29ec679e
...@@ -4204,6 +4204,7 @@ ...@@ -4204,6 +4204,7 @@
{ {
name: "border-inline-start-color", name: "border-inline-start-color",
property_methods: ["ParseSingleValue"], property_methods: ["ParseSingleValue"],
valid_for_visited_link: true,
direction_aware_options: { direction_aware_options: {
logical_side: "start", logical_side: "start",
shorthand_for_physical_side: "borderColorShorthand", shorthand_for_physical_side: "borderColorShorthand",
...@@ -4227,6 +4228,7 @@ ...@@ -4227,6 +4228,7 @@
{ {
name: "border-inline-end-color", name: "border-inline-end-color",
property_methods: ["ParseSingleValue"], property_methods: ["ParseSingleValue"],
valid_for_visited_link: true,
direction_aware_options: { direction_aware_options: {
logical_side: "end", logical_side: "end",
shorthand_for_physical_side: "borderColorShorthand", shorthand_for_physical_side: "borderColorShorthand",
...@@ -4250,6 +4252,7 @@ ...@@ -4250,6 +4252,7 @@
{ {
name: "border-block-start-color", name: "border-block-start-color",
property_methods: ["ParseSingleValue"], property_methods: ["ParseSingleValue"],
valid_for_visited_link: true,
direction_aware_options: { direction_aware_options: {
logical_side: "before", logical_side: "before",
shorthand_for_physical_side: "borderColorShorthand", shorthand_for_physical_side: "borderColorShorthand",
...@@ -4273,6 +4276,7 @@ ...@@ -4273,6 +4276,7 @@
{ {
name: "border-block-end-color", name: "border-block-end-color",
property_methods: ["ParseSingleValue"], property_methods: ["ParseSingleValue"],
valid_for_visited_link: true,
direction_aware_options: { direction_aware_options: {
logical_side: "after", logical_side: "after",
shorthand_for_physical_side: "borderColorShorthand", shorthand_for_physical_side: "borderColorShorthand",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment