Upstream "algo container" styles to W3C stylesheet?

[tabatkins]

In a number of specs, people have been manually copying around a block of style that formats algorithm blocks in a special way. See https://drafts.css-houdini.org/css-typed-om/#unparsedvalue-objects for an example. This seems to be pretty popular, so I'm inclined to build it into Bikeshed's default stylesheet, and think it should be upstreamed to the W3C stylesheet as well.

The CSS is pretty simple:

[data-algorithm]:not(.heading) {
  padding: .5em;
  border: thin solid #ddd; border-radius: .5em;
  margin: .5em calc(-0.5em - 1px);
}
[data-algorithm]:not(.heading) > :first-child {
  margin-top: 0;
}
[data-algorithm]:not(.heading) > :last-child {
  margin-bottom: 0;
}
[data-algorithm] [data-algorithm] {
    margin: 1em 0;
}

It's just a thin gray border, outset so the algorithm text itself lines up with surrounding text. It functions really well in algo-heavy specs as a lightweight but noticeable delimiter of the bounds of an algorithm, especially useful when you have several algos in a row that might otherwise blend together.

(For darkmode I think the naive inverse gray, #333, looks great.)

(The :not(.heading) bits are because Bikeshed can take the data-algorithm attribute on a heading to declare the entire section an algorithm, for the purposes of var-checking. It doesn't need the styling in that case.)

/cc @jyasskin

[deniak]

The proposed addition looks fine to me. @plehegar @fantasai, any objection to add this?

[plehegar]

No objection from me but I sent an email to spec-prod just in case others have comments.

[svgeesus]

Looks good to me.

[marcoscaceres]

Respec uses .algorithm, so I wonder if we can make it work with that too?

[marcoscaceres]

(Alternatively, Respec could recursively add data-algorithm to ol.algorithm… but be nice if it just works… in any case, please check that there isn’t going to be any style class with Respec specs)

[tabatkins]

I can have bikeshed output a class=algorithm, that makes sense to me. (The data-algorithm attribute is just used for internal purposes currently and wouldn't have to be output if not for the styling use, but I'll be adding more structure soon.)

[marcoscaceres]

Ok, cool. We can then rip out whatever Respec is adding for algorithms for custom style. Just needs a little coordination, but should be trivial and quick to do.

[plehegar]

@deniak , looks like we should be going with:

.algorithm:not(.heading) {
  padding: .5em;
  border: thin solid #ddd; border-radius: .5em;
  margin: .5em calc(-0.5em - 1px);
}
.algorithm:not(.heading) > :first-child {
  margin-top: 0;
}
.algorithm:not(.heading) > :last-child {
  margin-bottom: 0;
}
.algorithm .algorithm {
    margin: 1em 0;
}