From a09e8c55c663d2b070f99ab0fdadbcc2c45656b2 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Wed, 7 Dec 2022 21:59:54 -0700 Subject: [PATCH 1/2] rustdoc: clean up docblock table CSS * The rule `display: block` had no noticeable effect. Technically, because markdown tables have a tbody and thead, they get wrapped in an [anonymous table box] in the CSS tree, nested within the `` element's block layout box. This rule was added in #87230 to make the table side-scrolling, but this same issue was doubly fixed in #88742 by wrapping it in an explicit `
` tag. Since accessibility advocates recommend the wrapper div over marking the table as `display: block`, we'll stick with that. https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html * The rule `width: calc(100% - 2px)` had no visible effect, because the anonymous table box was not affected. * The style is tweaked to basically be the same style GitHub uses. In particular, it adds zebra stripes, and removes dotted borders. [anonymous table box]: https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes --- src/librustdoc/html/static/css/rustdoc.css | 14 ++++---------- src/librustdoc/html/static/css/themes/ayu.css | 1 + src/librustdoc/html/static/css/themes/dark.css | 1 + src/librustdoc/html/static/css/themes/light.css | 1 + 4 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 0cd15768ac6e8..63bb2cdbaf238 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -631,22 +631,16 @@ pre, .rustdoc.source .example-wrap { .docblock table { margin: .5em 0; - width: calc(100% - 2px); - overflow-x: auto; - display: block; border-collapse: collapse; } -.docblock table td { +.docblock table td, .docblock table th { padding: .5em; - border: 1px dashed var(--border-color); - vertical-align: top; + border: 1px solid var(--border-color); } -.docblock table th { - padding: .5em; - text-align: left; - border: 1px solid var(--border-color); +.docblock table tr:nth-child(2n) { + background: var(--table-alt-row-background-color); } /* Shift "where ..." part of method or fn definition down a line */ diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index 6e0905e730d08..0436fe0138edc 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -87,6 +87,7 @@ Original by Dempfi (https://github.com/dempfi/ayu) --crate-search-hover-border: #e0e0e0; --source-sidebar-background-selected: #14191f; --source-sidebar-background-hover: #14191f; + --table-alt-row-background-color: #191f26; } h1, h2, h3, h4 { diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 334fc3de5616d..d945e956c533e 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -82,6 +82,7 @@ --crate-search-hover-border: #2196f3; --source-sidebar-background-selected: #333; --source-sidebar-background-hover: #444; + --table-alt-row-background-color: #2A2A2A; } .content .item-info::before { color: #ccc; } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 453e7508af4ba..58955a79316af 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -79,6 +79,7 @@ --crate-search-hover-border: #717171; --source-sidebar-background-selected: #fff; --source-sidebar-background-hover: #e0e0e0; + --table-alt-row-background-color: #F5F5F5; } .content .item-info::before { color: #ccc; } From 34700f6594436b49005151ee12dd2ae06c7cad03 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 8 Dec 2022 09:38:27 -0700 Subject: [PATCH 2/2] rustdoc: add GUI test case for docblock table colors --- src/librustdoc/html/static/css/rustdoc.css | 2 +- src/test/rustdoc-gui/docblock-table.goml | 47 ++++++++++++++++++++++ src/test/rustdoc-gui/src/test_docs/lib.rs | 3 ++ 3 files changed, 51 insertions(+), 1 deletion(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 63bb2cdbaf238..619bdeb011ecd 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -639,7 +639,7 @@ pre, .rustdoc.source .example-wrap { border: 1px solid var(--border-color); } -.docblock table tr:nth-child(2n) { +.docblock table tbody tr:nth-child(2n) { background: var(--table-alt-row-background-color); } diff --git a/src/test/rustdoc-gui/docblock-table.goml b/src/test/rustdoc-gui/docblock-table.goml index 4e316ce0bcbfd..8645c1b1949e3 100644 --- a/src/test/rustdoc-gui/docblock-table.goml +++ b/src/test/rustdoc-gui/docblock-table.goml @@ -2,3 +2,50 @@ goto: "file://" + |DOC_PATH| + "/test_docs/doc_block_table/struct.DocBlockTable. compare-elements-css: (".impl-items .docblock table th", ".top-doc .docblock table th", ["border"]) compare-elements-css: (".impl-items .docblock table td", ".top-doc .docblock table td", ["border"]) + +define-function: ( + "check-colors", + (theme, border_color, zebra_stripe_color), + [ + ("local-storage", {"rustdoc-use-system-theme": "false", "rustdoc-theme": |theme|}), + ("reload"), + ("assert-css", (".top-doc .docblock table tbody tr:nth-child(1)", { + "background-color": "rgba(0, 0, 0, 0)", + })), + ("assert-css", (".top-doc .docblock table tbody tr:nth-child(2)", { + "background-color": |zebra_stripe_color|, + })), + ("assert-css", (".top-doc .docblock table tbody tr:nth-child(3)", { + "background-color": "rgba(0, 0, 0, 0)", + })), + ("assert-css", (".top-doc .docblock table tbody tr:nth-child(4)", { + "background-color": |zebra_stripe_color|, + })), + ("assert-css", (".top-doc .docblock table td", { + "border-style": "solid", + "border-width": "1px", + "border-color": |border_color|, + })), + ("assert-css", (".top-doc .docblock table th", { + "border-style": "solid", + "border-width": "1px", + "border-color": |border_color|, + })), + ] +) + +call-function: ("check-colors", { + "theme": "dark", + "border_color": "rgb(224, 224, 224)", + "zebra_stripe_color": "rgb(42, 42, 42)", +}) +call-function: ("check-colors", { + "theme": "ayu", + "border_color": "rgb(92, 103, 115)", + "zebra_stripe_color": "rgb(25, 31, 38)", +}) +call-function: ("check-colors", { + "theme": "light", + "border_color": "rgb(224, 224, 224)", + "zebra_stripe_color": "rgb(245, 245, 245)", +}) diff --git a/src/test/rustdoc-gui/src/test_docs/lib.rs b/src/test/rustdoc-gui/src/test_docs/lib.rs index 1340511d4726b..d6eeab803dfec 100644 --- a/src/test/rustdoc-gui/src/test_docs/lib.rs +++ b/src/test/rustdoc-gui/src/test_docs/lib.rs @@ -343,6 +343,9 @@ pub mod doc_block_table { /// | header1 | header2 | /// |--------------------------|--------------------------| /// | Lorem Ipsum, Lorem Ipsum | Lorem Ipsum, Lorem Ipsum | + /// | Lorem Ipsum, Lorem Ipsum | Lorem Ipsum, Lorem Ipsum | + /// | Lorem Ipsum, Lorem Ipsum | Lorem Ipsum, Lorem Ipsum | + /// | Lorem Ipsum, Lorem Ipsum | Lorem Ipsum, Lorem Ipsum | pub struct DocBlockTable {} impl DocBlockTableTrait for DocBlockTable {