diff options
Diffstat (limited to 'layout/docs')
71 files changed, 7744 insertions, 0 deletions
diff --git a/layout/docs/AccessibleCaret.rst b/layout/docs/AccessibleCaret.rst new file mode 100644 index 0000000000..8644e4327b --- /dev/null +++ b/layout/docs/AccessibleCaret.rst @@ -0,0 +1,80 @@ +*************** +AccessibleCaret +*************** + +AccessibleCaret is a pair of raindrop shape handles at both ends of selection +highlight, or it is a single handle at the blinking caret in a text area. It +assists the user to change the range of the selection highlight or the position +of the blinking caret on platforms with touch-event support. + + +Meta Bug +======== + +`Bug 1124074 <https://bugzilla.mozilla.org/show_bug.cgi?id=1124074>`__ tracks all the open issues. + + +Gecko implementation details +============================ + +Preferences +----------- +* ``layout.accessiblecaret.enabled_on_touch`` (Enabled on Firefox with touch-event support since 51.) +* ``layout.accessiblecaret.enabled`` (Defaults off, but it can be turn on to force enable AccessibleCaret.) +* ``layout.accessiblecaret.hide_carets_for_mouse_input`` (Defaults on. Turn + this on to debug AccessibleCaret on desktop browser with mouse events.) + +AccessibleCaretEventHub State Transition Diagram +------------------------------------------------ + +This diagram depicts the state transition of the state machine in +AccessibleCaretEventHub, which handles external events and callbacks. + +Note that the diagram omits some callbacks which do not cause a state transition +such as ``NotifySelectionChanged`` or ``Reflow``. + +This table is a mapping of the real events and callback to the actions described +on the edge of the diagram: + ++---------------------------------------------------+--------------+ +| Real events or callbacks | Actions | ++===================================================+==============+ +| ``eMouseDown`` or ``eTouchStart`` | Press | ++---------------------------------------------------+--------------+ +| ``eMouseMove`` or ``eTouchMove`` | Move | ++---------------------------------------------------+--------------+ +| ``eMouseUp`` or ``eTouchEnd`` or ``eTouchCancel`` | Release | ++---------------------------------------------------+--------------+ +| ``eMouseLongTap`` | Long tap | ++---------------------------------------------------+--------------+ +| ``AsyncPanZoomStarted()`` | Scroll start | ++---------------------------------------------------+--------------+ +| ``AsyncPanZoomStopped()`` | Scroll end | ++---------------------------------------------------+--------------+ +| ``NotifyBlur()`` | Blur | ++---------------------------------------------------+--------------+ + +.. image:: AccessibleCaretEventHubStates.png + +Debug Tips +---------- + +* Dump AccessibleCaret log from command line: run ``MOZ_LOG=AccessibleCaret:5 ./mach run``. +* Dump AccessibleCaret log by using a preference: Open ``about:config`` and add a pref ``logging.AccessibleCaret`` with value ``debug`` or ``verbose`` (case matters). +* ``AC_LOG()`` is useful to add new logs. + + +Developers +========== + +Current maintainer +------------------ + +* Ting-Yu Lin <aethanyc@gmail.com> + +Developers Emeritus +------------------- + +* Morris Tseng <mtseng@mozilla.com> +* Jeremy Chen <jeremychen@mozilla.com> +* Boris Chiou <boris@mozilla.com>* diff --git a/layout/docs/AccessibleCaretEventHubStates.dot b/layout/docs/AccessibleCaretEventHubStates.dot new file mode 100644 index 0000000000..e1af363692 --- /dev/null +++ b/layout/docs/AccessibleCaretEventHubStates.dot @@ -0,0 +1,37 @@ +// Steps to generate AccessibleCaretEventHubStates.png +// 1. Install Graphviz +// 2. dot -T png -o AccessibleCaretEventHubStates.png AccessibleCaretEventHubStates.dot +// +// Note: If the edge has 'constraint=false', it is not used in ranking the +// nodes. http://www.graphviz.org/doc/info/attrs.html#d:constraint + +digraph event_hub_states { + node [style=filled]; + edge [color="gray30", fontcolor="gray20", fontsize=12] + + NoAction [label="NoAction\n(Initial)"color="#96FF2F"]; + NoAction -> PressCaret [label="Press & on a caret"]; + NoAction -> PressNoCaret [label="Press & not on a caret"]; + NoAction -> Scroll [label="Scroll start"]; + + PressCaret [color="#84D8FF"]; + PressCaret -> DragCaret [label="Move & distance is large"]; + PressCaret -> NoAction [label="Release (synthesizing a tap)"]; + + DragCaret [color="#84D8FF"]; + DragCaret -> DragCaret [label="Move"]; + DragCaret -> NoAction [label="Release"]; + + PressNoCaret [color="#E8C516"]; + PressNoCaret -> NoAction [label="Move & distance is large or\nRelease or\nBlur"]; + PressNoCaret -> LongTap [label="Long tap"]; + PressNoCaret -> Scroll [label="Scroll start", constraint=false]; + + LongTap [color="#E8C516"] + LongTap -> NoAction [label="Release"]; + LongTap -> Scroll [label="Scroll start", constraint=false]; + + Scroll [color="#FF9022"] + Scroll -> NoAction [label="Scroll end"]; + Scroll -> NoAction [label="Blur"]; +} diff --git a/layout/docs/AccessibleCaretEventHubStates.png b/layout/docs/AccessibleCaretEventHubStates.png Binary files differnew file mode 100644 index 0000000000..b3ccc69bd5 --- /dev/null +++ b/layout/docs/AccessibleCaretEventHubStates.png diff --git a/layout/docs/LayoutDebugger.md b/layout/docs/LayoutDebugger.md new file mode 100644 index 0000000000..911c365cbd --- /dev/null +++ b/layout/docs/LayoutDebugger.md @@ -0,0 +1,12 @@ +# Layout Debugger + +## Overview + +The layout debugger can dump a variety of things including: +- Matched CSS Rules +- Text Runs +- Frames + +## Usage +- Use a debug build or add `ac_add_options --enable-layout-debugger` to your mozconfig. +- Run with `./mach run --layoutdebug [filename]` diff --git a/layout/docs/Reftest.rst b/layout/docs/Reftest.rst new file mode 100644 index 0000000000..0f14b0961f --- /dev/null +++ b/layout/docs/Reftest.rst @@ -0,0 +1,763 @@ +Layout Engine Visual Tests (reftest) +==================================== + +Layout Engine Visual Tests (reftest) +L. David Baron <dbaron@dbaron.org>, Mozilla Corporation +July 19, 2006 + +This code is designed to run tests of Mozilla's layout engine. These +tests consist of an HTML (or other format) file along with a reference +in the same format. The tests are run based on a manifest file, and for +each test, PASS or FAIL is reported, and UNEXPECTED is reported if the +result (PASS or FAIL) was not the expected result noted in the manifest. + +Images of the display of both tests are captured, and most test types +involve comparing these images (e.g., test types == or !=) to determine +whether the test passed. The captures of the tests are taken in a +viewport that is 800 pixels wide and 1000 pixels tall, so any content +outside that area will be ignored (except for any scrollbars that are +displayed). Ideally, however, tests should be written so that they fit +within 600x600, since we may in the future want to switch to 600x600 to +match http://lists.w3.org/Archives/Public/www-style/2012Sep/0562.html . + +Why this way? +------------- + +Writing HTML tests where the reference rendering is also in HTML is +harder than simply writing bits of HTML that can be regression-tested by +comparing the rendering of an older build to that of a newer build +(perhaps using stored reference images from the older build). However, +comparing across time has major disadvantages: + + * Comparisons across time either require two runs for every test, or + they require stored reference images appropriate for the platform and + configuration (often limiting testing to a very specific + configuration). + + * Comparisons across time may fail due to expected changes, for + example, changes in the default style sheet for HTML, changes in the + appearance of form controls, or changes in default preferences like + default font size or default colors. + +Using tests for which the pass criteria were explicitly chosen allows +running tests at any time to see whether they still pass. + +Manifest Format +--------------- + +The test manifest format is a plain text file. A line starting with a +``"#"`` is a comment. Lines may be commented using whitespace followed by +a ``"#"`` and the comment. Each non-blank line (after removal of comments) +must be one of the following: + +Inclusion of another manifest +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + + ``<skip-type>* include <relative_path>`` + + ``<skip-type>`` is one of the skip or skip-if items (see their definitions + in ``<failure-type>`` below). If any of the skip types evaluate to true (i.e. + they are a plain ``skip`` or they are a ``skip-if`` with a condition that + evaluates to true), then the include statement is skipped. Otherwise, + reftests in the specified manifest are included in the set of reftests + that are run. + +A test item +~~~~~~~~~~~ + + ``[ <failure-type> | <preference> ]* [<http>] <type> <url> <url_ref>`` + + where + + a. ``<failure-type>`` (optional) is one of the following: + + ``fails`` + The test passes if the images of the two renderings DO NOT meet the + conditions specified in the ``<type>``. + + ``fails-if(condition)`` + If the condition is met, the test passes if the images of the two + renderings DO NOT meet the conditions of ``<type>``. If the condition + is not met, the test passes if the conditions of ``<type>`` are met. + + ``needs-focus`` + The test fails or times out if the reftest window is not focused. + + ``random`` + The results of the test are random and therefore not to be considered in the output. + + ``random-if(condition)`` + The results of the test are random if a given condition is met. + + ``silentfail`` + This test may fail silently, and if that happens it should count as if + the test passed. This is useful for cases where silent failure is the + intended behavior (for example, in an out of memory situation in + JavaScript, we stop running the script silently and immediately, in + hopes of reclaiming enough memory to keep the browser functioning). + + ``silentfail-if(condition)`` + This test may fail silently if the condition is met. + + ``skip`` + This test should not be run. This is useful when a test fails in a + catastrophic way, such as crashing or hanging the browser. Using + ``skip`` is preferred to simply commenting out the test because we + want to report the test failure at the end of the test run. + + ``skip-if(condition)`` + If the condition is met, the test is not run. This is useful if, for + example, the test crashes only on a particular platform (i.e. it + allows us to get test coverage on the other platforms). + + ``slow`` + The test may take a long time to run, so run it if slow tests are + either enabled or not disabled (test manifest interpreters may choose + whether or not to run such tests by default). + + ``slow-if(condition)`` + If the condition is met, the test is treated as if ``slow`` had been + specified. This is useful for tests which are slow only on particular + platforms (e.g. a test which exercised out-of-memory behavior might be + fast on a 32-bit system but inordinately slow on a 64-bit system). + + ``fuzzy(minDiff-maxDiff,minPixelCount-maxPixelCount)`` + This allows a test to pass if the pixel value differences are between + ``minDiff`` and ``maxDiff``, inclusive, and the total number of + different pixels is between ``minPixelCount`` and ``maxPixelCount``, + inclusive. It can also be used with ``!=`` to ensure that the + difference is outside the specified interval. Note that with ``!=`` + tests the minimum bounds of the ranges must be zero. + + Fuzzy tends to be used for two different sorts of cases. The main + case is tests that are expected to be equal, but actually fail in a + minor way (e.g., an antialiasing difference), and we want to ensure + that the test doesn't regress further so we don't want to mark the + test as failing. For these cases, test annotations should be the + tightest bounds possible: if the behavior is entirely deterministic + this means a range like ``fuzzy(1-1,8-8)``, and if at all possible, + the ranges should not include 0. In cases where the test only + sometimes fails, this unfortunately requires using 0 in both ranges, + which means that we won't get reports of an unexpected pass if the + problem is fixed (allowing us to remove the ``fuzzy()`` annotation + and expect the test to pass from then on). + + The second case where fuzzy is used is tests that are supposed + to allow some amount of variability (i.e., tests where the + specification allows variability such that we can't assert + that all pixels are the same). Such tests should generally be + avoided (for example, by covering up the pixels that can vary + with another element), but when they are needed, the ranges in + the ``fuzzy()`` annotation should generally include 0. + + ``fuzzy-if(condition,minDiff-maxDiff,minPixelCount-maxPixelCount)`` + If the condition is met, the test is treated as if ``fuzzy`` had been + specified. This is useful if there are differences on particular + platforms. See ``fuzzy()`` above. + + ``require-or(cond1&&cond2&&...,fallback)`` + Require some particular setup be performed or environmental + condition(s) made true (eg setting debug mode) before the test + is run. If any condition is unknown, unimplemented, or fails, + revert to the fallback failure-type. + Example: ``require-or(debugMode,skip)`` + + ``asserts(count)`` + Loading the test and reference is known to assert exactly + ``count`` times. + NOTE: An asserts() notation with a non-zero count or maxCount + suppresses use of a cached canvas for the test with the + annotation. However, if later occurrences of the same test + are not annotated, they will use the cached canvas + (potentially from the load that asserted). This allows + repeated use of the same test or reference to be annotated + correctly (which may be particularly useful when the uses are + in different subdirectories that can be tested independently), + but does not force them to be, nor does it force suppression + of caching for a common reference when it is the test that + asserts. + + ``asserts-if(condition,count)`` + Same as above, but only if condition is true. + + ``asserts(minCount-maxCount)`` + Loading the test and reference is known to assert between + minCount and maxCount times, inclusive. + NOTE: See above regarding canvas caching. + + ``asserts-if(condition,minCount-maxCount)`` + Same as above, but only if condition is true. + + ``noautofuzz`` + Disables the autofuzzing behaviour hard-coded in the reftest harness + for specific platform configurations. The autofuzzing is intended to + compensate for inherent nondeterminism that results in intermittently + fuzzy results (with small amounts of fuzz) across many/all tests on + a given platform. Specifying 'noautofuzz' on the test will disable + the autofuzzing for that test and require an exact match. + + Conditions are JavaScript expressions *without spaces* in them. + They are evaluated in a sandbox in which a limited set of + variables are defined. See the BuildConditionSandbox function in + ``layout/tools/reftest.js`` for details. + + Examples of using conditions: :: + + + fails-if(winWidget) == test reference + asserts-if(cocoaWidget,2) load crashtest + + + b. ``<preference>`` (optional) is a string of the form + + ``pref(<name>,<value>)`` + + ``test-pref(<name>,<value>)`` + + ``ref-pref(<name>,<value>)`` + + where ``<name>`` is the name of a preference setting, as seen in + about:config, and ``<value>`` is the value to which this preference + should be set. ``<value>`` may be a boolean (true/false), an integer, + or a quoted string *without spaces*, according to the type of the + preference. + + The preference will be set to the specified value prior to + rendering the test and/or reference canvases (pref() applies to + both, test-pref() only to the test, and ref-pref() only to the + reference), and will be restored afterwards so that following + tests are not affected. Note that this feature is only useful for + "live" preferences that take effect immediately, without requiring + a browser restart. + + c. ``<http>``, if present, is one of the strings (sans quotes) "HTTP" or + "HTTP(..)" or "HTTP(../..)" or "HTTP(../../..)", etc. , indicating that + the test should be run over an HTTP server because it requires certain + HTTP headers or a particular HTTP status. (Don't use this if your test + doesn't require this functionality, because it unnecessarily slows down + the test.) + + With "HTTP", HTTP tests have the restriction that any resource an HTTP + test accesses must be accessed using a relative URL, and the test and + the resource must be within the directory containing the reftest + manifest that describes the test (or within a descendant directory). + The variants "HTTP(..)", etc., can be used to relax this restriction by + allowing resources in the parent directory, etc. + + To modify the HTTP status or headers of a resource named FOO, create a + sibling file named FOO^headers^ with the following contents: + + ``[<http-status>]`` + + ``<http-header>*`` + + ``<http-status>`` + A line of the form "HTTP ###[ <description>]", where ### indicates + the desired HTTP status and <description> indicates a desired HTTP + status description, if any. If this line is omitted, the default is + "HTTP 200 OK". + + ``<http-header>`` + A line in standard HTTP header line format, i.e. + "Field-Name: field-value". You may not repeat the use of a Field-Name + and must coalesce such headers together, and each header must be + specified on a single line, but otherwise the format exactly matches + that from HTTP itself. + + HTTP tests may also incorporate SJS files. SJS files provide similar + functionality to CGI scripts, in that the response they produce can be + dependent on properties of the incoming request. Currently these + properties are restricted to method type and headers, but eventually + it should be possible to examine data in the body of the request as + well when computing the generated response. An SJS file is a JavaScript + file with a .sjs extension which defines a global `handleRequest` + function (called every time that file is loaded during reftests) in this + format: :: + + function handleRequest(request, response) + { + response.setStatusLine(request.httpVersion, 200, "OK"); + + // You *probably* want this, or else you'll get bitten if you run + // reftest multiple times with the same profile. + response.setHeader("Cache-Control", "no-cache"); + + response.write("any ASCII data you want"); + + var outputStream = response.bodyOutputStream; + // ...anything else you want to do, synchronously... + } + + For more details on exactly which functions and properties are available + on request/response in handleRequest, see the nsIHttpRe(quest|sponse) + definitions in ``netwerk/test/httpserver/nsIHttpServer.idl``. + + HTTP tests can also make use of example.org URIs in order to test cross + site behaviour. "example.org/filename" will access filename in the same + directly as the current reftest. (Not currently implemented for android.) + + d. ``<type>`` is one of the following: + + ``==`` + The test passes if the images of the two renderings are the SAME. + + ``!=`` + The test passes if the images of the two renderings are DIFFERENT. + + ``load`` + The test passes unconditionally if the page loads. url_ref must be + omitted, and the test cannot be marked as fails or random. (Used to + test for crashes, hangs, assertions, and leaks.) + + ``script`` + The loaded page records the test's pass or failure status in a + JavaScript data structure accessible through the following API. + + ``getTestCases()`` returns an array of test result objects + representing the results of the tests performed by the page. + + Each test result object has two methods: + + ``testPassed()`` returns true if the test result object passed, + otherwise it returns false. + + ``testDescription()`` returns a string describing the test + result. + + ``url_ref`` must be omitted. The test may be marked as fails or + random. (Used to test the JavaScript Engine.) + + ``print`` + The test passes if the printouts (as PDF) of the two renderings + are the SAME by applying the following comparisons: + + - The number of pages generated for both printouts must match. + - The text content of both printouts must match (rasterized text + does not match real text). + + You can specify a print range by setting the reftest-print-range + attribute on the document element. Example: :: + + <html reftest-print-range="2-3"> + ... + + + The following example would lead to a single page print: :: + + <html reftest-print-range="2-2"> + ... + + You can also print selected elements only: :: + + <html reftest-print-range="selection"> + ... + + Make sure to include code in your test that actually selects something. + + Future additions to the set of comparisons might include: + + - Matching the paper size + - Validating printed headers and footers + - Testing (fuzzy) position of elements + - Testing specific print related CSS properties + + The main difference between ``print`` and ``==/!=`` reftests is that + ``print`` makes us compare the structure of print results (by parsing + the output PDF) rather than taking screenshots and comparing pixel + values. This allows us to test for common printing related issues + like text being rasterized when it shouldn't. This difference in + behavior is also why this is its own reftest operator, rather than + a flavor of ``==/!=``. It would be somewhat misleading to list these + print reftests as ``==/!=``, because they don't actually check for + pixel matching. + + See the chapter about Pagination Tests if you are looking for testing + layout in pagination mode. + + e. ``<url>`` is either a relative file path or an absolute URL for the + test page + + f. ``<url_ref>`` is either a relative file path or an absolute URL for + the reference page + + The only difference between ``<url>`` and ``<url_ref>`` is that results of + the test are reported using ``<url>`` only. + +Specification of a url prefix +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + + ``url-prefix <string>`` + + ``<string>`` will be prepended to relative ``<url>`` and ``<url_ref>`` for + all following test items in the manifest. + + ``<string>`` will not be prepended to the relative path when including + another manifest, e.g. ``include <relative_path>.`` + + ``<string>`` will not be prepended to any ``<url>`` or ``<url_ref>`` matching + the pattern ``/^\w+:/``. This will prevent the prefix from being applied to + any absolute url containing a protocol such as ``data:``, ``about:``, or + ``http:``. + + While the typical use of url-prefix is expected to be as the first line of + a manifest, it is legal to use it anywhere in a manifest. Subsequent uses + of url-prefix overwrite any existing values. + +Specification of defaults +~~~~~~~~~~~~~~~~~~~~~~~~~ + + ``defaults [<failure-type> | <preference> | <http>]`` + + where ``<failure-type>``, ``<preference>``, and ``<http>`` are defined above. + + The default settings will be used for all following test items in the manifest. + Any test specific settings will override the defaults, just as later items + within a line override earlier ones. + + A defaults line with no settings will reset the defaults to be empty. + + As with url-prefix, defaults will often be used at the start of a manifest file + so that it applies to all test items, but it is legal for defaults to appear + anywhere in the manifest. A subsequent defaults will reset any previous default + settings and overwrite them with the new settings. + + It is invalid to set non-skip defaults before an include line, just as it is + invalid to specify non-skip settings directly on the include line itself. If a + manifest needs to use both defaults and include, the include should appear + before the defaults. If it's important to specify the include later on in the + manifest, a blank defaults line directly preceding the include can be used to + reset the defaults. + +This test manifest format could be used by other harnesses, such as ones +that do not depend on XUL, or even ones testing other layout engines. + +Running Tests +------------- + +To run a given reftest use something like the following :: + +./mach reftest <path to individual test or directory> + +As an example, if we wanted to run the reftests relevant to async scrolling, +run something like the following:: + +./mach reftest ./layout/reftest/async-scrolling &> reftest.out + +and then search/grep reftest.out for "UNEXPECTED". + +There are two scripts provided to convert the reftest.out to HTML. +clean-reftest-output.pl converts reftest.out into simple HTML, stripping +lines from the log that aren't relevant. reftest-to-html.pl converts +the output into html that makes it easier to visually check for +failures. See :ref:`debugging failures <debugging-failures>` for +more details on making sense of reftest results. + +Testable Areas +-------------- + +This framework is capable of testing many areas of the layout engine. +It is particularly well-suited to testing dynamic change handling (by +comparison to the static end-result as a reference) and incremental +layout (comparison of a script-interrupted layout to one that was not). +However, it is also possible to write tests for many other things that +can be described in terms of equivalence, for example: + + * CSS cascading could be tested by comparing the result of a + complicated set of style rules that makes a word green to <span + style="color:green">word</span>. + + * <canvas> compositing operators could be tested by comparing the + result of drawing using canvas to a block-level element with the + desired color as a CSS background-color. + + * CSS counters could be tested by comparing the text output by counters + with a page containing the text written out + + * complex margin collapsing could be tested by comparing the complex + case to a case where the margin is written out, or where the margin + space is created by an element with 'height' and transparent + background + +When it is not possible to test by equivalence, it may be possible to +test by non-equivalence. For example, testing justification in cases +with more than two words, or more than three different words, is +difficult. However, it is simple to test that justified text is at +least displayed differently from left-, center-, or right-aligned text. + +Writing Tests +------------- + +When writing tests for this framework, it is important for the test to +depend only on behaviors that are known to be correct and permanent. +For example, tests should not depend on default font sizes, default +margins of the body element, the default style sheet used for HTML, the +default appearance of form controls, or anything else that can be +avoided. + +In general, the best way to achieve this is to make the test and the +reference identical in as many aspects as possible. For example: + +Good test markup: :: + + <div style="color:green"><table><tr><td><span>green + </span></td></tr></table></div> + +Good reference markup: :: + + <div><table><tr><td><span style="color:green">green + </span></td></tr></table></div> + +BAD reference markup: :: + + <!-- 3px matches the default cellspacing and cellpadding --> + <div style="color:green; padding: 3px">green + </div> + +BAD test markup: :: + + <!-- span doesn't change the positioning, so skip it --> + <div style="color:green"><table><tr><td>green + </td></tr></table></div> + +Asynchronous Tests: class="reftest-wait" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +Normally reftest takes a snapshot of the given markup's rendering right +after the load event fires for content. If your test needs to postpone +the moment the snapshot is taken, it should make sure a class +'reftest-wait' is on the root element by the moment the load event +fires. The easiest way to do this is to put it in the markup, e.g.: :: + + <html class="reftest-wait"> + +When your test is ready, you should remove this class from the root +element, for example using this code: :: + + document.documentElement.className = ""; + + +Note that in layout tests it is often enough to trigger layout using :: + + document.body.offsetWidth // HTML example + +When possible, you should use this technique instead of making your +test async. + +Invalidation Tests: MozReftestInvalidate Event +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +When a test (or reference) uses reftest-wait, reftest tracks invalidation +via MozAfterPaint and updates the test image in the same way that +a regular window would be repainted. Therefore it is possible to test +invalidation-related bugs by setting up initial content and then +dynamically modifying it before removing reftest-wait. However, it is +important to get the timing of these dynamic modifications right so that +the test doesn't accidentally pass because a full repaint of the window +was already pending. To help with this, reftest fires one MozReftestInvalidate +event at the document root element for a reftest-wait test when it is safe to +make changes that should test invalidation. The event bubbles up to the +document and window so you can set listeners there too. For example, :: + + function doTest() { + document.body.style.border = ""; + document.documentElement.removeAttribute('class'); + } + document.addEventListener("MozReftestInvalidate", doTest, false); + +Painting Tests: class="reftest-no-paint" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +If an element shouldn't be painted, set the class "reftest-no-paint" on it +when doing an invalidation test. Causing a repaint in your +MozReftestInvalidate handler (for example, by changing the body's background +colour) will accurately test whether the element is painted. + +Display List Tests: class="reftest-[no-]display-list" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +These classes work similarly to reftest-no-paint, but check if the element has +display items created or not. These classes are useful for checking the behaviour +of retained display lists, where the display list is incrementally updated by +changes, rather than thrown out and rebuilt from scratch. + +Opaque Layer Tests: class="reftest-opaque-layer" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +If an element should be assigned to a PaintedLayer that's opaque, set the class +"reftest-opaque-layer" on it. This checks whether the layer is opaque during +the last paint of the test, and it works whether your test is an invalidation +test or not. In order to pass the test, the element has to have a primary +frame, and that frame's display items must all be assigned to a single painted +layer and no other layers, so it can't be used on elements that create stacking +contexts (active or inactive). + +Layerization Tests: reftest-assigned-layer="layer-name" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +If two elements should be assigned to the same PaintedLayer, choose any string +value as the layer name and set the attribute reftest-assigned-layer="yourname" +on both elements. Reftest will check whether all elements with the same +reftest-assigned-layer value share the same layer. It will also test whether +elements with different reftest-assigned-layer values are assigned to different +layers. +The same restrictions as with class="reftest-opaque-layer" apply: All elements +must have a primary frame, and that frame's display items must all be assigned +to the same PaintedLayer and no other layers. If these requirements are not +met, the test will fail. + +Snapshot The Whole Window: class="reftest-snapshot-all" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +In a reftest-wait test, to disable testing of invalidation and force the final +snapshot to be taken of the whole window, set the "reftest-snapshot-all" +class on the root element. + +Avoid triggering flushes: class="reftest-no-flush" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +The reftest harness normally triggers flushes by calling +getBoundingClientRect on the root element. If the root element of the +test has class="reftest-no-flush", it doesn't do this. + +This is useful for testing animations on the compositor thread, since +the flushing will cause a main thread style update. + +Zoom Tests: reftest-zoom="<float>" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +When the root element of a test has a "reftest-zoom" attribute, that zoom +factor is applied when rendering the test. The corresponds to the desktop "full +zoom" style zoom. The reftest document will be 800 device pixels wide by 1000 +device pixels high. The reftest harness assumes that the CSS pixel dimensions +are 800/zoom and 1000/zoom. For best results therefore, choose zoom factors +that do not require rounding when we calculate the number of appunits per +device pixel; i.e. the zoom factor should divide 60, so 60/zoom is an integer. + +Setting Scrollport Size: reftest-scrollport-w/h="<int>" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +If either of the "reftest-scrollport-w" and "reftest-scrollport-h" attributes on +the root element are non-zero, sets the scroll-position-clamping scroll-port +size to the given size in CSS pixels. This does not affect the size of the +snapshot that is taken. + +Setting Resolution: reftest-resolution="<float>" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +If the root element of a test has a "reftest-resolution" attribute, the page +is rendered with the specified resolution (as if the user pinch-zoomed in +to that scale). Note that the difference between reftest-async-zoom and +reftest-resolution is that reftest-async-zoom only applies the scale in +the compositor, while reftest-resolution causes the page to be paint at that +resolution. This attribute can be used together with initial-scale in meta +viewport tag, in such cases initial-scale is applied first then +reftest-resolution changes the scale. + +This attributes requires the pref apz.allow_zooming=true to have an effect. + +Setting Async Scroll Mode: reftest-async-scroll attribute +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +If the "reftest-async-scroll" attribute is set on the root element, we try to +enable async scrolling and zooming for the document. This is unsupported in many +configurations. + +Setting Displayport Dimensions: reftest-displayport-x/y/w/h="<int>" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +If any of the "reftest-displayport-x", "reftest-displayport-y", +"reftest-displayport-w" and "reftest-displayport-h" attributes on the root +element are nonzero, sets the displayport dimensions to the given bounds in +CSS pixels. This does not affect the size of the snapshot that is taken. + +When the "reftest-async-scroll" attribute is set on the root element, *all* +elements in the document are checked for "reftest-displayport-x/y/w/h" and have +displayports set on them when those attributes are present. + +Testing Async Scrolling: reftest-async-scroll-x/y="<int>" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +When the "reftest-async-scroll" attribute is set on the root element, for any +element where either the "reftest-async-scroll-x" or "reftest-async-scroll-y +attributes are nonzero, at the end of the test take the snapshot with the given +offset (in CSS pixels) added to the async scroll offset. + +Testing Async Zooming: reftest-async-zoom="<float>" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +When the "reftest-async-zoom" attribute is present on the root element then at +the end of the test take the snapshot with the given async zoom on top of any +existing zoom. Content is not re-rendered at the new zoom level. This +corresponds to the mobile style "pinch zoom" style of zoom. This is unsupported +in many configurations, and any tests using this will probably want to have +pref(apz.allow_zooming,true) on them. + +Pagination Tests: class="reftest-paged" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +Now that the patch for bug 374050 has landed +(https://bugzilla.mozilla.org/show_bug.cgi?id=374050), it is possible to +create reftests that run in a paginated context. + +The page size used is 5in wide and 3in tall (with the default half-inch +margins). This is to allow tests to have less text and to make the +entire test fit on the screen. + +There is a layout/reftests/printing directory for pagination reftests; however, +there is nothing special about this directory. You can put pagination reftests +anywhere that is appropriate. + +The suggested first lines for any pagination test is: :: + +<!DOCTYPE html><html class="reftest-paged"> +<style>html{font-size:12pt}</style> + +The reftest-paged class on the root element triggers the reftest to +switch into page mode. Fixing the font size is suggested, although not +required, because the pages are a fixed size in inches. The switch to page mode +happens on load if the reftest-wait class is not present; otherwise it happens +immediately after firing the MozReftestInvalidate event. + +The underlying layout support for this mode isn't really complete; it +doesn't use exactly the same codepath as real print preview/print. In +particular, scripting and frames are likely to cause problems; it is untested, +though. That said, it should be sufficient for testing layout issues related +to pagination. + +Process Crash Tests: class="reftest-expect-process-crash" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +If you are running a test that causes a process +under Electrolysis to crash as part of a reftest, this will cause process +crash minidump files to be left in the profile directory. The test +infrastructure that runs the reftests will notice these minidump files and +dump out information from them, and these additional error messages in the logs +can end up erroneously being associated with other errors from the reftest run. +They are also confusing, since the appearance of "PROCESS-CRASH" messages in +the test run output can seem like a real problem, when in fact it is the +expected behavior. + +To indicate to the reftest framework that a test is expecting a +process to crash, have the test include "reftest-expect-process-crash" as +one of the root element's classes by the time the test has finished. This will +cause any minidump files that are generated while running the test to be removed +and they won't cause any error messages in the test run output. + +Skip Forcing A Content Process Layer-Tree Update: reftest-no-sync-layers attribute +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +Normally when an multi-process reftest test ends, we force the content process +to push a layer-tree update to the compositor before taking the snapshot. +Setting the "reftest-no-sync-layers" attribute on the root element skips this +step, enabling testing that layer-tree updates are being correctly generated. +However the test must manually wait for a MozAfterPaint event before ending. + +Debugging Failures +------------------ + +The Reftest Analyzer has been created to make debugging reftests a bit easier. +If a reftest is failing, upload the log to the Reftest Analyzer to view the +differences between the expected result and the actual outcome of the reftest. +The Reftest Analyzer can be found at the following url: + +https://hg.mozilla.org/mozilla-central/raw-file/tip/layout/tools/reftest/reftest-analyzer.xhtml diff --git a/layout/docs/css-gap-decorations/Overview.bs b/layout/docs/css-gap-decorations/Overview.bs new file mode 100644 index 0000000000..982ec7dd3e --- /dev/null +++ b/layout/docs/css-gap-decorations/Overview.bs @@ -0,0 +1,1228 @@ +<!-- -*- Mode: HTML; indent-tabs-mode: nil; sgml-basic-offset: 4 -*- --> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<pre class='metadata'> +Title: CSS Gap Decorations +Shortname: css-gap-decorations +Level: 1 +Status: ED +Work Status: exploring +Group: CSSWG +URL: https://matspalmgren.github.io/css-gap-decorations/Overview.html +Editor: Mats Palmgren, Mozilla Corporation http://mozilla.com, mats@mozilla.com +Abstract: This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations. +Markup Shorthands: biblio yes +Markup Shorthands: css yes +Markup Shorthands: dfn yes +Boilerplate: repository-issue-tracking off +Issue Tracking: CSSWG github issue #6748 https://github.com/w3c/csswg-drafts/issues/6748 +</pre> +<pre class="link-defaults"> +spec:css-box-4; type:value; for:<box>; text:margin-box +spec:css-grid-3; type:dfn; text:masonry axis +spec:css-grid-2; type:dfn; text:collapsed track +</pre> + +Introduction {#intro} +===================== + + <em>This section is not normative.</em> + +Overview {#overview} +-------------------- + + + This is a proposal to add CSS features for decorating <a href="https://drafts.csswg.org/css-align#gaps">gaps</a>. + (Some use cases and background discussion can be found in <a href="https://github.com/w3c/csswg-drafts/issues/2748">issue #2748</a>.) + We propose to extend the 'column-rule-width' property with new values. + Add properties to support images and gradients. + Add properties for aligning the rule to specific anchor points, + specifying its extent area, and to control its position and length within that area. + We add support for row rules by adding the corresponding 'row-*' properties. + We also widen the scope of these properties so that they can be used in + <a>flex containers</a>, <a>grid containers</a>, + <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers, + as well as <a>multi-column containers</a>. + + +Module Interactions {#placement} +-------------------------------- + + This module extends the definition of the 'column-rule-width' property, + adding <<percentage>> and ''row-rule-width/auto'' values. + We also generalize the existing ''column-rule-*'' properties to apply to other + types of containers. + Accordingly, we propose to move the existing ''column-rule'' properties from + the <a href="https://drafts.csswg.org/css-multicol">Multi-column</a> spec to + the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec. + Additionally, all new properties and shorthands in this proposal are intended + as additions to the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec. + + +Definitions {#definitions} +-------------------------------- + + In this specification, we will use the term <dfn>lateral axis</dfn> to refer to + the axis in which the rule's thickness grows (i.e. the axis ''column-rule-width'' + use). The other axis is the rule's <dfn>longitudinal axis</dfn> and + its size in this axis is the <dfn>rule length</dfn>. + These definitions are relative to the rule itself and does not depend on if + the rule is a row or column rule, or what the 'writing-mode' is. + +Rule Images and Gradients {#rule-image} +======================================= + + Authors may specify an image or gradient to be used in place of the ''column-rule-style''. + These properties are loosely modeled after the corresponding + <a href="https://drafts.csswg.org/css-backgrounds/#border-images">'border-image-*'</a> properties. + Rules are one-dimensional though, as opposed to borders which have four sides around an area. + A rule is like a border with just one side rendered with the other sides having ''border-style: none''. + +The 'column-rule-image-source' and 'row-rule-image-source' Properties {#column-rule-image-source} +------------------------------------------------------------------------------------------------- + + <pre class=propdef> + Name: column-rule-image-source, row-rule-image-source + Value: none | <<image>> + Initial: none + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: N/A + Computed value: the keyword ''column-rule-image-source/none'' or the computed <<image>> + Animation type: discrete + </pre> + + These properties specify an <<image>> to use in place of the rendering specified + by the ''column-rule-style''/''row-rule-style'' properties. + + As for borders, a rule image is not rendered when the corresponding ''column-rule-style''/''row-rule-style'' is ''column-rule-style/none''. + +The 'column-rule-image-slice' and 'row-rule-image-slice' Properties {#column-rule-image-slice} +---------------------------------------------------------------------------------------------- + + <pre class=propdef> + Name: column-rule-image-slice, row-rule-image-slice + Value: [<<number [0,∞]>> | <<percentage [0,∞]>>]{1,2} + Initial: 0 + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: refer to image size in the rule's longitudinal axis + Computed value: one or two values, each either a number or percentage + Animation type: discrete + </pre> + + 'column-rule-image-slice' specify inward offsets from the start and end edges + of the image in the rule's longitudinal axis, dividing it into three regions: + two edge areas and one middle area. + + When two values are specified, they set the offsets on the start and end sides in + that order. If the end value is missing, it is the same as the start value. + + <dl dfn-for=column-rule-image-slice dfn-type=value> + <dt><dfn><<percentage [0,∞]>></dfn> + <dd>Percentages are relative to the image size in the rule's longitudinal axis + + <dt><dfn><<number [0,∞]>></dfn> + <dd>Numbers represent pixels in the image (if the image is a raster + image) or vector coordinates (if the image is a vector image). + </dl> + + Negative values are not allowed. + Computed values larger than the size of the image are interpreted as ''100%''. + + If the image must be sized to determine the slices + (for example, for SVG images with no intrinsic size), + then it is sized using the [[css-images-3#default-sizing]] + with no [=specified size=] and the [=rule containing rectangle=] as the [=default object size=]. + + The regions given by the 'column-rule-image-slice' values may overlap. + However if the sum of the start and end values is equal to or greater than + the size of the image, the middle part becomes empty. + + +The 'column-rule-image-repeat' and 'row-rule-image-repeat' Properties {#column-rule-image-repeat} +------------------------------------------------------------------------------------------------- + + <pre class=propdef> + Name: column-rule-image-repeat, row-rule-image-repeat + Value: stretch | repeat | round | space + Initial: stretch + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: N/A + Computed value: the specified keyword + Animation type: discrete + </pre> + + These properties specify how the middle part of a sliced rule image is scaled and tiled. + Values have the following meanings: + + <dl dfn-for=column-rule-image-repeat dfn-type=value> + <dt><dfn>stretch</dfn></dt> + <dd>The image is stretched to fill the area. + <dt><dfn>repeat</dfn></dt> + <dd>The image is tiled (repeated) to fill the area. + <dt><dfn>round</dfn></dt> + <dd>The image is tiled (repeated) to fill the area. If it does not + fill the area with a whole number of tiles, the image is rescaled + so that it does. + <dt><dfn>space</dfn></dt> + <dd>The image is tiled (repeated) to fill the area. If it does not + fill the area with a whole number of tiles, the extra space is + distributed around the tiles. + </dl> + + The exact process for scaling and tiling the image parts is defined by drawing the equivalent + ''border-image'' with the top and bottom ''border-image-slice'' values set from the corresponding + ''column-rule-image-slice'' values, and the ''border-image-slice'' left value set to ''100%'' and + the right value set to ''0''. The ''border-image-width'' top value set to the ''column-rule-image-slice'' + top value. The ''border-image-width'' top value set to the ''column-rule-image-slice'' + bottom value. The ''border-image-width'' top value set to zero. + + + +The 'column-rule-image' and 'row-rule-image' Shorthands {#column-rule-image} +---------------------------------------------------------------------------- + + <pre class='propdef shorthand'> + Name: column-rule-image, row-rule-image + Value: <<'column-rule-image-source'>> || <<'column-rule-image-slice'>> || <<'column-rule-image-repeat'>> + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + </pre> + + + <aside class=example> + This <a href="examples/grid-image-001.html">example</a> demonstrates the new + rule image properties presented above in a grid layout with spanning elements. + <figure> + <img src="media/grid-image-001.png"> + <figcaption> + Example of image rules. + </figcaption> + </figure> + </aside> + + <aside class=example> + Here's a <a href="examples/grid-image-002.html">variation</a> of the example above + that animates the container's size and stretch the middle part of the images. + <figure> + <video src="media/grid-image-002.webm" autoplay loop></video> + <figcaption> + Example of stretching image rules when the container is resized. + </figcaption> + </figure> + </aside> + + <aside class=example> + This is a similar <a href="examples/grid-gradient-001.html">example</a> using gradients. + <figure> + <img src="media/grid-gradient-001.png"> + <figcaption> + Example of gradient rules. + </figcaption> + </figure> + </aside> + + <aside class=example> + Here's an <a href="examples/flexbox-coupon-rule.html">example</a> demonstrating + support for a use case mentioned in + <a href="https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621983931">issue #2748</a>. + It's a coupon with a perforation rendered by a semi-transparent rule image between two flex items. + <figure> + <img src="media/flexbox-coupon-rule.png"> + <figcaption> + An example of a semi-transparent column rule image. + </figcaption> + </figure> + </aside> + + +Rule Positioning and Sizing {#size} +=================================== + +The 'column-rule-width' and 'row-rule-width' Properties {#column-rule-width} +---------------------------------------------------------------------------- + + <pre class='propdef partial'> + Name: column-rule-width + New Values: <<percentage>> | auto + Initial: medium + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=lateral axis=] + Computed value: absolute length if the specified value is <<line-width>>; ''0px'' if the column rule style is ''column-rule-style/none'' or ''column-rule-style/hidden''. Otherwise, the specified value. + Animation type: by computed value type + </pre> + + <pre class='propdef'> + Name: row-rule-width + Value: <<line-width>> | <<percentage>> | auto + Initial: medium + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=lateral axis=] + Computed value: absolute length if the specified value is <<line-width>>; ''0px'' if the column rule style is ''row-rule-style/none'' or ''row-rule-style/hidden''. Otherwise, the specified value. + Animation type: by computed value type + </pre> + + These properties sets the thickness (lateral size) of a rule in the column and row axis, respectively. + Negative specified values are not allowed. + The [=used value=] is floored at zero (in case a 'calc()' expression evaluates to a negative value for example). + + See [[#resolving-position-and-size-algo]] below for how 'auto' is resolved. + + +The 'column-rule-length' and 'row-rule-length' Properties {#column-rule-length} +------------------------------------------------------------------------------- + + <pre class=propdef> + Name: column-rule-length, row-rule-length + Value: <<length-percentage>> | auto + Initial: auto + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=longitudinal axis=] + Computed value: the specified value + Animation type: by computed value type + </pre> + + These properties sets the [=rule length=] (longitudinal size) of a rule in the column and row axis, respectively. + Negative specified values are not allowed. + The [=used value=] is floored at zero (in case a 'calc()' expression evaluates to a negative value for example). + + See [[#resolving-position-and-size-algo]] below for how 'auto' is resolved. + + Note: These properties work the same as the '*-rule-width' properties in the [=lateral axis=], except that they have a different initial value. + + +The Rule Lateral Inset Properties {#column-rule-lateral-inset-start} +-------------------------------------------------------------------- + + <pre class=propdef> + Name: column-rule-lateral-inset-start, column-rule-lateral-inset-end, row-rule-lateral-inset-start, row-rule-lateral-inset-end + Value: <<length-percentage>> | auto + Initial: auto + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=lateral axis=] + Computed value: the specified value + Animation type: by computed value type + </pre> + + These properties sets the lateral start/end offset of the rule in the column and row axis, respectively. + A positive value moves the position inward and a negative value outward from the corresponding [=rule containing rectangle's=] edge. + + <aside class=example> + This <a href="examples/grid-lateral-002.html">example</a> demonstrates aligning a rule at the start of the gap. + <figure> + <img src="media/grid-lateral-002.png"> + <figcaption> + Examples of aligning a rule at the start of the gap with a lateral start offset. + </figcaption> + </figure> + </aside> + + <aside class=example> + This <a href="examples/grid-lateral-003.html">example</a> demonstrates aligning a rule at the end of the gap. + <figure> + <img src="media/grid-lateral-003.png"> + <figcaption> + Examples of aligning a rule at the end of the gap with a lateral end offset. + </figcaption> + </figure> + </aside> + + NOTE: The ''column-rule-lateral-inset'' and ''column-rule-width'' [=used values=] are calculated in a similar way to how 'left'/'right' and + 'width' are <a href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width">calculated</a> for an absolutely positioned + box. The precise algorithm is described next. + + +Resolving a rule's position and size {#resolving-position-and-size-algo} +------------------------------------------------------------------------ + + Given a triplet of values: inset-start/end and a size for an axis, ''column-rule-width/auto'' values + are resolved so that the sum of the three values equals the [=rule containing rectangle=] size in + the same axis. These are the rules for resolving them: + <ol id=rule-sizing> + <li>if all the values are ''column-rule-width/auto'' then set both inset values to zero and solve for size + <li>if none of the values are ''column-rule-width/auto'' then the situation is over-constrained: solve by + treating the end inset value as ''column-rule-width/auto'' + <li>if both inset properties are ''column-rule-width/auto'', but the size is not, then solve with the additional constraint + that the inset values must have equal values (resulting in the rule being centered) + <li>if the size is ''column-rule-width/auto'' and only one of the inset values is ''column-rule-width/auto'' then set the ''column-rule-width/auto'' inset value to zero + and solve for size, if that makes size negative then set the size to zero and solve for the ''column-rule-width/auto'' + inset value instead (i.e. the rule is sized to fill the remaining space, until it becomes zero in + which case its positioned at the non-''column-rule-width/auto'' inset edge) + <li>if the size is ''column-rule-width/auto'' and both inset values are non-''column-rule-width/auto'' then solve for size, + if that makes the size negative then set the size to zero and solve again by + treating the end inset value as ''column-rule-width/auto'' + </ol> + + These rules resolves the ''column-rule-width'', ''column-rule-lateral-inset-start'', and ''column-rule-lateral-inset-end'' triplet + of values in a rule's lateral axis. + + The same rules are also used to resolve ''column-rule-length'', ''column-rule-longitudinal-[edge-]inset-start'', and ''column-rule-longitudinal-[edge-]inset-end'' triplet of values in a rule's longitudinal axis (see the <a href=#column-rule-longitudinal-inset-start>longitudinal</a> property + descriptions below for which of the "edge" or non-"edge" values is used). + + Ditto for the corresponding ''row-rule-*'' properties. + + <aside class=example> + This <a href="examples/grid-lateral-001.html">example</a> demonstrates the rules above. + Note in particular the latter two grids, which shows what happens when the sum of the + insets are greater than the [=rule containing rectangle's=] size. There's still + a zero-sized column rule there, which the row rule (purple) aligns to. + <figure> + <img src="media/grid-lateral-001.png"> + <figcaption> + Examples of lateral rule sizing with various inset values. + </figcaption> + </figure> + </aside> + + +The 'column-rule-lateral-inset' and 'row-rule-lateral-inset' Shorthands {#column-rule-lateral-inset} +---------------------------------------------------------------------------------------------------- + + <pre class='propdef shorthand'> + Name: column-rule-lateral-inset + Value: <<'column-rule-lateral-inset-start'>> <<'column-rule-lateral-inset-end'>>? + </pre> + + <pre class='propdef shorthand'> + Name: row-rule-lateral-inset + Value: <<'row-rule-lateral-inset-start'>> <<'row-rule-lateral-inset-end'>>? + </pre> + + These are shortands for specifying the corresponding start/end values. + If one value is specified it is used for both start and end. + + +The Rule Longitudinal Inset Properties {#column-rule-longitudinal-inset-start} +------------------------------------------------------------------------------ + + <pre class=propdef> + Name: column-rule-longitudinal-inset-start, column-rule-longitudinal-inset-end, row-rule-longitudinal-inset-start, row-rule-longitudinal-inset-end + Value: <<length-percentage>> | auto + Initial: 0 + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=longitudinal axis=] + Computed value: the specified value + Animation type: by computed value type + </pre> + + These properties sets the longitudinal start/end inset of the rule in the column + and row axis, respectively. They are only used on a rule's edges that are interior. + The <a href=#column-rule-longitudinal-edge-inset-start>*-rule-longitudinal-edge-inset</a> + properties are used for rule edges that are on the outer edges of an axis. + The [=used values=] are calculated the same as for the lateral properties above. + + <aside class=example> + This <a href="examples/grid-lateral-004.html">example</a> shows the default rule alignment and size in both axes. + <figure> + <img src="media/grid-lateral-004.png"> + <figcaption> + Example of a rule with default rule alignment and size in both axes. + </figcaption> + </figure> + </aside> + + Note: These have a different initial value than the lateral inset properties, meaning the rule will stretch to fill the [=rule containing rectangle=] in this axis. The initial values as specified above are backward compatible with how column rules are sized and positioned in legacy <a spec=css-multicol>multi-column layout</a>. + + <aside class=example> + Here's a few simple <a href="examples/grid-longitudinal-001.html">examples</a> of + the rule sizing and inset properties. + Note that the grid items have ''opacity: 0.5'' to show any rules underneath them. + <figure> + <img src="media/grid-longitudinal-001.png"> + <figcaption> + Examples of rule sizing and inset values. + </figcaption> + </figure> + </aside> + + <aside class=example> + This <a href="examples/grid-longitudinal-002.html">example</a> demonstrates + that the inset properties can be animated and that they are relative the [=rule containing rectangle=], + which itself depends on the <a href="#rule-align">rule's alignment</a> in its longitudinal axis. + Note that the longitudinal insets in this example are definite and not animated. The reason + they follow the animated lateral position of the rule in the orthogonal axis is that they have + <a href="#column-rule-align">''column-rule-align/rule'' alignment</a>. + <figure> + <video src="media/grid-longitudinal-002.webm" autoplay loop></video> + <figcaption> + Example of rule alignment and animated inset values. + </figcaption> + </figure> + </aside> + + +The 'column-rule-longitudinal-inset' and 'row-rule-longitudinal-inset' Shorthands {#column-rule-longitudinal-inset} +------------------------------------------------------------------------------------------------------------------- + + <pre class='propdef shorthand'> + Name: column-rule-longitudinal-inset + Value: <<'column-rule-longitudinal-inset-start'>> <<'column-rule-longitudinal-inset-end'>>? + </pre> + + <pre class='propdef shorthand'> + Name: row-rule-longitudinal-inset + Value: <<'row-rule-longitudinal-inset-start'>> <<'row-rule-longitudinal-inset-end'>>? + </pre> + + These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end. + + +The Rule Longitudinal Edge Inset Properties {#column-rule-longitudinal-edge-inset-start} +------------------------------------------------------------------------------ + + <pre class=propdef> + Name: column-rule-longitudinal-edge-inset-start, column-rule-longitudinal-edge-inset-end, row-rule-longitudinal-edge-inset-start, row-rule-longitudinal-edge-inset-end + Value: <<length-percentage>> | auto + Initial: 0 + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=longitudinal axis=] + Computed value: the specified value + Animation type: by computed value type + </pre> + + These properties are identical to their non-"edge" counter-parts. These properties are used + on the start edge of the first rule that on the container's start edge in its + [=longitudinal axis=], and the end edge of the last rule at the end of the container. + For interior rule edges, the <a href=#column-rule-longitudinal-inset-start>non-"edge" properties</a> are used. + In other words, these properties are used together with the <a href=#column-rule-edge-align>''*-rule-edge-align''</a> + properties (defined below) and the ''*-rule-longitudinal-inset'' properties are used together with <a href=#column-rule-align>''*-rule-align''</a>. + + +The 'column-rule-longitudinal-edge-inset' and 'row-rule-longitudinal-edge-inset' Shorthands {#column-rule-longitudinal-edge-inset} +------------------------------------------------------------------------------------------------------------------- + + <pre class='propdef shorthand'> + Name: column-rule-longitudinal-edge-inset + Value: <<'column-rule-longitudinal-edge-inset-start'>> <<'column-rule-longitudinal-edge-inset-end'>>? + </pre> + + <pre class='propdef shorthand'> + Name: row-rule-longitudinal-edge-inset + Value: <<'row-rule-longitudinal-edge-inset-start'>> <<'row-rule-longitudinal-edge-inset-end'>>? + </pre> + + These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end. + + +Row Rule Style and Color {#row-rule-props} +=============================================== + +The 'row-rule-style' and 'row-rule-color' Properties {#row-rule-style} +-------------------------------------------------- + + <pre class=propdef> + Name: row-rule-style + Value: <<line-style>> + Initial: none + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: N/A + Computed value: specified keyword + Animation type: discrete + </pre> + + <pre class=propdef> + Name: row-rule-color + Value: <<color>> + Initial: currentcolor + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: N/A + Computed value: computed color + Animation type: by computed value type + </pre> + + These properties are the same as the ''column-'' properties but for the row rules. + +The 'row-rule' Shorthand {#row-rule} +-------------------------------------------------- + + This shorthand works the same as ''column-rule''. + + <pre class="propdef shorthand"> + Name: row-rule + Value: <<'row-rule-width'>> || <<'row-rule-style'>> || <<'row-rule-color'>> + </pre> + + ISSUE: lots of new possible shorthands... we now have many + properties (and shorthands) with a ''column-rule'' and ''row-rule'' prefix. + Should we add shorthands for some of those with a 'rule' prefix to specify + both axes, like so: 'rule-foo: <<row-rule-foo>> <<column-rule-foo>>?'. + As usual, we have to be careful with the separator though, to make it + forward-compatible with any changes we might want to make... + + +Rule Alignment {#rule-align} +============================ + +The 'column-rule-align' and 'row-rule-align' Properties {#column-rule-align} +-------------------------------------------------- + + <pre class=propdef> + Name: column-rule-align, row-rule-align + Value: [gap | gap-center | gap-over | rule | rule-center | rule-over]{1,2} + Initial: gap + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: N/A + Computed value: the specified value + Animation type: discrete + </pre> + + These properties specify the start/end attachment point of the [=rule containing rectangle=] + in the [=longitudinal axis=]. The start value is specified first, the end value second. + If only one value is specified it is used for both start and end. + These properties are only used for interior edges. The '*-rule-edge-align' properties + described below specify the alignment on the outer edges. The initial value, ''column-rule-align/gap'', + means that, by default, a rule will stretch its longitudinal size to fill the space + from the end of the gap "above" to the start of the gap "below" ("above" meaning the gap + in the orthogonal axis on the rule's start side). + + <aside class=example> + This <a href="examples/grid-align-001.html">example</a> illustrates a few alignment options. + Note that the row rules all have a 1px longitudinal inset + to separate the individual rule segments. (''column-rule-align/rule-center'', + for example, would otherwise look like one long rule) + + Note also that the column rule is intentionally not centered in + the gap (to separate the ''row-rule-align/rule-center'' position + from the ''row-rule-align/gap-center'' position) + <figure> + <img src="media/grid-align-001.png"> + <figcaption> + Example of 'row-rule-align' in a grid container. + </figcaption> + </figure> + + You might be wondering if there's a bug in the bottom-right example. + Why is the ''row-rule-align-start/gap-over'' not honored there? + That's a non-interior rule edge and it's controlled separately with ''row-rule-edge-align'', see below. + </aside> + +The 'column-rule-edge-align' and 'row-rule-edge-align' Properties {#column-rule-edge-align} +------------------------------------------------------------ + + <pre class=propdef> + Name: column-rule-edge-align, row-rule-edge-align + Value: [gap | gap-center | gap-over]{1,2} + Initial: gap + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: N/A + Computed value: the specified value + Animation type: discrete + </pre> + + These properties specify the start/end attachment point of the [=rule containing rectangle=] + in the [=longitudinal axis=] for the outer edges only. That is, the start edge of the first rule + and the end edge of the last rule (which may be the same rule). + The start value is specified first, the end value second. If only one value is specified it + is used for both start and end. (Attachment points for the interior rule edges are + specified with the <a href=#column-rule-align>'*-rule-align'</a> properties above.) + + Note: The ''column-rule-align/rule''/''column-rule-align/rule-center''/''column-rule-align/rule-over'' + keywords are omitted here (compared with + ''column-rule-align'') since there are no rules in the edge gutters. + + + The figure below illustrates the alignment values. + The red values are used for the top column rule's start edge and the yellow + values are used for its end edge. The yellow values are also used for the bottom + column rule's start edge. However, in this + case the roles of ''column-rule-align/gap'' / ''column-rule-align/gap-over'' and + ''column-rule-align/rule'' / ''column-rule-align/rule-over'' are swapped. It's only the + center values that are shared. Also note that ''column-rule-align/gap-center'' + isn't necessarily aligned with ''column-rule-align/rule-center''. In this case they aren't + aligned because the row rule (purple) is using a lateral start inset. The cyan colored + values are used for the bottom column border's end edge. (If the top border were to + stretch over the entire grid, then they would be used for its end edge.) + + ''column-rule-edge-align'' controls which of the red and cyan colored + attachment points should be used. ''column-rule-edge-align'' the yellow colored + ones (and all other interior edges if there were more rows). + + <figure> + <img src="media/rule-alignment-values.png"> + <figcaption> + Illustration of rule alignment values. + </figcaption> + </figure> + + Here's the rule styling used for the above example: + ```css + column-rule: 14px solid blue; + column-rule-align: rule-center rule; + column-rule-edge-align: gap-center gap-over; + + row-rule: 16px solid #7000ff; + row-rule-lateral-inset-start: 30px; + ``` + + The alignment points follow the same pattern in the other axis for the row rules. + In this case the row rule is using the initial values (''column-rule-align/gap'') + so they align with the inline axis gap edges. + + ISSUE: Are there use cases for other box-related edge attachment points? + e.g. 'padding | padding-center | padding-over | border...' + + +Rule Extent {#rule-extent} +============================== + +The 'column-rule-extent' and 'row-rule-extent' Properties {#column-rule-extent} +------------------------------------------------------------------------------- + + <pre class=propdef> + Name: column-rule-extent, row-rule-extent + Value: [segment | start | end | short | long | all-start | all-end | all-short | all-long ] allow-overlap? + Initial: long + Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers + Inherited: no + Percentages: N/A + Computed value: the specified value + Animation type: discrete + </pre> + + ISSUE: perhaps make ''all'' a separate keyword? like so: ''[segment | [[start | end | short | long] all?] ] allow-overlap?'' + + These properties specify the extent of the rule in its [=longitudinal axis=]. + <dfn>segment</dfn> is an abstract term to describe the distance between two consecutive gaps. + An extent can cover one or more segments and the <dfn>extent size</dfn> is the distance between + the start position of the first of those segments and the end position of the last segment. + We'll define ''column-rule-extent/segment'' in more detail in the container-specific sub-sections that follow. + + The ''column-rule-extent/allow-overlap'' only affects rules in grid and table layout with spanning items/cells. + It controls whether a rule should continue through such a span. + + Note: It's only an item's <a href="https://drafts.csswg.org/css-grid/#grid-span">grid span</a> + that are considered when determining if an item is spanning or not, not its layout position or size. + + The ''column-rule-extent/all-*'' values makes a rule extend over all segments in an axis, + subject to not being interrupted by a span. In grid and table layout, where the tracks/table groups/rows + all have the same length in a rule's longitudinal axis, all the ''column-rule-extent/all-*'' have + the same behavior. They are intended for flexbox and masonry layout, where the gaps may fall at different + positions in adjacent flex lines and masonry tracks. + + The lateral position of a rule is determined by its first segment. + + The following sub-sections will describe the rule extent for each type of layout container in more detail. + + +### Grid Containers ### {#rule-extent-grid} + + In a [=grid container=], gaps are placed between tracks, so the ''column-rule-extent/segment'' + value maps to the extent of a [=grid cell=]. + + This <a href="examples/grid-segment-001.html">example</a> illustrates ''column-rule-extent/segment'' rules. + Note that rules are generated in all gaps, whether there are items in a grid cell or not. + + <aside class=example> + <figure> + <img src="media/grid-segment-001.png"> + <figcaption> + Example of column and row rules with ''column-rule-extent/segment'' extent in a grid container. + </figcaption> + </figure> + </aside> + + [=Collapsed tracks=] don't count -- they don't generate gaps and thus don't have gap rules. + They generally behave as if they don't exist as far as rules are concerned. + The <a href="examples/grid-segment-002.html">example</a> below also + illustrates that the position and size of the items don't affect the rules; it's only the position and size + of the [=grid cells=] that count. + <aside class=example> + <figure> + <img src="media/grid-segment-002.png"> + <figcaption> + Example of column and row rules with in a grid container with [=collapsed tracks=]. + </figcaption> + </figure> + </aside> + + Rules behave symmetrically in the grid axes, but a [=masonry axis=] in a + <a href="https://drafts.csswg.org/css-grid-3">masonry grid layout</a> behaves + differently; we'll cover that case in a separate <a href=#rule-extent-masonry>section</a> later. + + In a grid axis, rules are created between adjacent (non-collapsed) tracks and their [=extent sizes=] + are controlled by the ''column-rule-extent''/''row-rule-extent'' values as follows: + <dl dfn-for=row-rule-extent dfn-type=value> + <dt><dfn>segment</dfn></dt> + <dd>the [=extent size=] is the size of [=grid cell=] in the relevant axis + <dt><dfn>start</dfn></dt> + <dd>the [=extent size=] is the size of the [=next grid cell span=] in the start-most of the two adjacent tracks + <dt><dfn>end</dfn></dt> + <dd>the [=extent size=] is the size of the [=next grid cell span=] in the end-most of the two adjacent tracks + <dt><dfn>short</dfn></dt> + <dd>the [=extent size=] is the smaller of the [=next grid cell span=] sizes of the two adjacent tracks + <dt><dfn>long</dfn></dt> + <dd>the [=extent size=] is the larger of the [=next grid cell span=] sizes of the two adjacent tracks + <dt><dfn>all-start</dfn>, <dfn>all-end</dfn>, <dfn>all-short</dfn>, <dfn>all-long</dfn></dt> + <dd>the [=extent size=] is the length of the track in the relevant axis + (they all behave the same because all tracks in a [=grid=] axis have the same size) + <dt><dfn>allow-overlap</dfn></dt> + <dd>controls whether the [=next grid cell span=] stops short of a cell which has an item spanning + over the gap (see the <a href="#rule-extent-grid-algorithm">algorithm</a> below) + </dl> + + The following algorithm determines the rule segments to create in an axis and their [=extent sizes=]. + For each pair of adjacent tracks, we first find the <dfn>next grid cell span</dfn> for + each track. Then select one of those per the property values above. + + For each pair of adjacent tracks, start by setting each track's <var>current cell</var> to + be its first cell in the [=implicit grid=], then: + + <ol id="rule-extent-grid-algorithm"> + <li>if ''column-rule-extent/allow-overlap'' was not specified, and the <var>current cell</var> in + the start-most of the pair of tracks contains an item that spans into the end-most of the tracks, + then skip this cell and let the <var>current cell</var> of each track be the cell after it, + then go to step 1 or exit if there are no more cells + <li>if the ''*-rule-extent'' is one of the ''column-rule-extent/all-*'' values, + then the [=next grid cell span=] is the span of cells from the <var>current cell</var> to + last cell in the track (inclusive); if ''column-rule-extent/allow-overlap'' was not specified, + then stop before the first (opposite axis) track that contains an item spanning between this + pair of tracks + <li>otherwise, if the <var>current cell</var> is empty, or ''*-rule-extent'' is ''column-rule-extent/segment'', + then the [=next grid cell span=] of that track is the <var>current cell</var> + <li>otherwise, if the <var>current cell</var> contains items that are spanning in the same axis, + then that track's [=next grid cell span=] is the longest of those spans; + if ''column-rule-extent/allow-overlap'' was not specified, then stop before + the first (opposite axis) track that contains an item spanning between this pair of tracks + <li>create a rule segment with the following [=extent size=]: + <ol type="lower-alpha"> + <li>for ''column-rule-extent/short''(''column-rule-extent/long''), + the [=extent size=] is the length of the shortest(longest) of + the two [=next grid cell spans=] + <li>for ''column-rule-extent/start''(''column-rule-extent/end''), + the [=extent size=] is the length of the [=next grid cell span=] + of the start-most(end-most) track + <li>for ''column-rule-extent/all-*'', + the [=extent size=] is the length of the [=next grid cell span=] + (which is always the same for the two tracks) + </ol> + <li>set the <var>current cell</var> to the next cell, in each track, that is after the last cell + of the [=next grid cell span=] that we picked in the steps above; exit if there are no more cells; + otherwise, go to step 1. + </ol> + + <aside class=example> + This <a href="examples/grid-extent-001.html">example</a> demonstrates the difference between + the ''row-rule-extent'' values in a grid with spanning items. The grid has seven columns. + The grid items are semi-transparent to show any rules or overlapping items under them. + Item 7 for example has ''grid-column: 2 / span 3'' and item 3 has ''grid-row: 1 / span 2''. + They are both forced to span into the cell in row 2, column 4 to illustrate what happens + when items span like this. + <figure> + <img src="media/grid-extent-001.png"> + <figcaption> + Examples of ''row-rule-extent'' in a grid container. + </figcaption> + </figure> + </aside> + + +#### Subgrid #### {#rule-extent-subgrid} + + A subgrid creates its own set of gap rules. It uses its own gaps, which are centered with, but + may have a different size than the ancestor grid(s), as described in + <a href="https://drafts.csswg.org/css-grid/#subgrids">subgrids</a>. + Other than that, rules are created inside a subgrid in the same way as in a regular grid. + + A grid item that is a subgrid affects its parent grid's rule formation exactly as + a regular non-subgrid item would (whether the parent is also a subgrid or not), + i.e. its span (if any) affects the <a href="#rule-extent-grid-algorithm">algorithm</a> + above in the same way. + + ''column-rule-extent/allow-overlap'' can be used in the parent to extend its rules under + the subgrid. The subgrid's rules, if any, are rendered by the subgrid and thus render + on top of the parent, as usual. + + When the subgrid determines its rule extents, it does not consider any items that + aren't its own grid items, i.e. any items in an ancestor grid that have been placed into + the same grid cell that the subgrid occupies are not considered. Furthermore, it only uses + its own local gap and rule metrics for positioning and sizing its rules. It doesn't + consider any gaps or rules that originate outside of the subgrid. + + <aside class=example> + This <a href="examples/grid-subgrid-001.html">example</a> illustrates that + a subgrid uses its own local gap and rule metrics for positioning and sizing + its rules. It also shows what happens when a parent rule crosses a subgrid item. + + Note that the parent's column rule passing through the subgrid is not used for + the ''row-rule-align: rule'' in the subgrid. The subgrid is in fact completely + unaware of any parent rules. + <figure> + <img src="media/grid-subgrid-001.png"> + <figcaption> + Example of gap rules in a subgrid. + </figcaption> + </figure> + </aside> + + +#### Masonry #### {#rule-extent-masonry} + + Masonry layout has one grid axis (which may be [=subgridded=]) and one [=masonry axis=]. + The grid axis works the same as has been described above. The masonry axis is special + since an item is placed into a grid track based on the layout size of the items before + it, so they are typically not aligned over the tracks. Furthermore, + the grid tracks may have a different start position + (due to [=masonry axis=] <a href="https://drafts.csswg.org/css-grid-3/#tracks-alignment">alignment</a>) + and size. + + <aside class=example> + This <a href="examples/grid-masonry-001.html">example</a> illustrates a few + variations of rules in a masonry grid layout. All the grids have + ''column-rule-edge-align: gap-over'' to extend the edge rules out to + the content-box edge. + <figure> + <img src="media/grid-masonry-001.png"> + <figcaption> + Example of gap rules in a masonry grid. + </figcaption> + </figure> + </aside> + + <aside class=example> + This <a href="examples/grid-masonry-002.html">example</a> illustrates + some of the ''column-rule-extent: all-*'' values. + <figure> + <img src="media/grid-masonry-002.png"> + <figcaption> + Example of gap rules in a masonry grid. + </figcaption> + </figure> + </aside> + + ISSUE: TODO: add definition list and algorithm here... + + ISSUE: is it useful to be able to create a rule extent for the <i>intersection</i> or <i>union</i> between two tracks, like so: <img style="display:block" src="media/masonry-all-shorter.png">It's pretty easy to implement, fwiw... (I accidently implemented ''column-rule-extent/short''/''column-rule-extent/long'' like that before I realized it was inconsistent with how they work elsewhere). I think it's a case that is unique to a masonry axis though, at least <i>currently</i>... + +### Flex Containers ### {#rule-extent-flexbox} + + In a <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">row-oriented flex container</a>, + the ''row-rule-*'' properties creates rules between flex lines, + and the ''column-rule-*'' properties creates rules between <a href=css-flexbox>flex items</a> + within a <a href=cs-flexbox>flex line</a>. + + In <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">column-oriented flex container</a>, + the roles of ''row-rule-extent'' and ''column-rule-extent'' are swapped. For the rest of this sub-section we + will describe the row-oriented case (just swap column/row in the text below to get the column-oriented case). + + Flex items can't span multiple lines so there are no collisions possible for the main axis rules, + hence the ''column-rule-extent/allow-overlap'' keyword is ignored in flex layout in the main axis. + A subsequent flex line is considered as a collision for the cross axis rules, i.e. a cross axis rule + has the extent of one flex line, unless ''column-rule-extent/allow-overlap'' is used (together with + one the ''column-rule-extent/all-*'' values). The reason is that items in different lines + typically don't line up in a way that the gaps between items are aligned across the lines + (unless an author is very careful to arrange that), so this is to have a safe default behavior. + + ''column-rule-extent/all-long allow-overlap'' can be used to override that and + the [=extent size=] is then from the cross axis start edge of the first flex line + to the cross axis end edge of the last flex line (all the ''all-*'' behave the same). + Only the first flex line creates column rules in this case, + and the rule's lateral position is taken from the gap in the first line. + + Advisement: Authors are advised to <strong>not</strong> use the ''column-rule-extent/allow-overlap'' value in + the main axis of a multi-line flex container since it's likely to make items + on subsequent lines overlap the rules. It may be used when all flex items are + guaranteed to have the exact same main axis [=outer size=] and align such that + the gaps are aligned between all the lines. + + Rules are created between adjacent flex lines, and their [=extent sizes=] are controlled by + the ''row-rule-extent'' values defined as follows: + <dl dfn-for=row-rule-extent dfn-type=value> + <dt>segment</dt> + <dd>behaves as ''row-rule-extent/short'' + <dt>start</dt> + <dd>use the [=outer size=] of the items in the flex line on the block axis start side + <dt>end</dt> + <dd>use the [=outer size=] of the items in the flex line on the block axis end side + <dt>short</dt> + <dd>use the [=outer size=] of the [=next flex line item=] which has the smaller size (see detailed algorithm below) + <dt>long</dt> + <dd>use the [=outer size=] of the [=next flex line item=] which has the larger size (see detailed algorithm below) + <dt>all-start</dt> + <dd>the distance between the start position of the first item to the end position of the last item on the start side flex line + <dt>all-end</dt> + <dd>the distance between the start position of the first item to the end position of the last item on the end side flex line + <dt>all-short</dt> + <dd>the distance between the end-most start position of the first item on each flex line to the start-most end position of the last item on each flex line + <dt>all-long</dt> + <dd>the distance between the start-most start position of the first item on each flex line to the end-most end position of the last item on each flex line + <dt>allow-overlap</dt> + <dd>is ignored in this axis since flex items can't span between flex lines so there are no collisions (as defined in this spec) + </dl> + + The <dfn>next flex line item</dfn> is assigned by the following algorithm. + For each pair of adjacent flex lines, start with assigning the [=next flex line item=] to + the first item (in [=order-modified document order=]) on the respective line, then: + + <ol id="rule-extent-flexbox-algorithm" start=0> + <li>exit if neither line has a [=next flex line item=] + <li> + <ol type="lower-alpha"> + <li>if only one line has a [=next flex line item=] then pick that item and go to 2 + <li>if either of the two [=next flex line items=] has a start position that is + beyond the other item's end position, then pick the start-most item and go to 2. + <li>otherwise, pick the item with the smallest(largest) [=outer size=] + for ''row-rule-extent/short''(''row-rule-extent/long'') + </ol> + <li>use the picked item's [=outer size=] as this rule segment's [=extent size=], then change + the [=next flex line item=] for the picked item's line to the next item on its line + <li>assign the [=next flex line item=] for the other line to the next item on this line + that has an inline start position that is greater than the end position of the picked item + </ol> + + (start/end position and sizes above are referring to the item's margin-box in + the rule's longitudinal axis; the phrase "next item" refers to the next item + in [=order-modified document order=]) + + + <aside class=example> + Here are a few examples to illustrate the ''row-rule-extent'' values. + <figure> + <img src="media/flexbox-extent-start-001.png"> + <figcaption> + A ''row-rule-extent: start'' <a href="examples/flexbox-extent-start-001.html">example</a>. + </figcaption> + </figure> + <figure> + <img src="media/flexbox-extent-end-001.png"> + <figcaption> + A ''row-rule-extent: end'' <a href="examples/flexbox-extent-end-001.html">example</a>. + </figcaption> + </figure> + <figure> + <img src="media/flexbox-extent-long-001.png"> + <figcaption> + A ''row-rule-extent: long'' <a href="examples/flexbox-extent-long-001.html">example</a>. + </figcaption> + </figure> + <figure> + <img src="media/flexbox-extent-all-short-001.png"> + <figcaption> + A ''row-rule-extent: all-short'' <a href="examples/flexbox-extent-all-short-001.html">example</a>. + </figcaption> + </figure> + <figure> + <img src="media/flexbox-extent-all-long-001.png"> + <figcaption> + A ''row-rule-extent: all-long'' <a href="examples/flexbox-extent-all-long-001.html">example</a>. + </figcaption> + </figure> + </aside> + + <aside class=example> + This is an <a href="examples/flexbox-extent-all-long-allow-overlap-001.html">example</a> to illustrate + what happens when an ''column-rule-extent: all-long allow-overlap'' rule is + used and the gaps aren't aligned. (The flex items are semi-transparent + to show the column rules underneath). + <figure> + <img src="media/flexbox-extent-all-long-allow-overlap-001.png"> + <figcaption> + A ''column-rule-extent: all-long allow-overlap'' example. + </figcaption> + </figure> + </aside> + + +### Table Containers ### {#rule-extent-table} + + A <a spec=css-tables>table</a> container creates rules between its + <a spec=css-tables>table-column-groups</a> and <a spec=css-tables>table-row-groups</a>. + <a href="https://drafts.csswg.org/css-tables/#visibility-collapse-rendering">Collapsed</a> + column-groups and row-groups are treated as if they don't exist. + Column rules (between <a spec=css-tables>table-column-groups</a>) collide with <a spec=css-tables>table-row-groups</a>. + Row rules (between <a spec=css-tables>table-row-groups</a>) collide with <a spec=css-tables>table-column-groups</a>. + The ''column-rule-extent/allow-overlap'' can be used to create rules that extend over + the entire column/row length. Given that all <a spec=css-tables>table-column-groups</a> have the same block + axis size and all <a spec=css-tables>table-row-groups</a> have same the inline axis size, + the ''column-rule-extent/short''/''column-rule-extent/long''/''column-rule-extent/start''/''column-rule-extent/end'' + keywords behave the same. Ditto for the ''column-rule-extent/all-*'' keywords. + + <aside class=example> + Note, column 2 is collapsed in this example. + <figure> + <img src="media/table-rules-001.png"> + <figcaption> + An <a href="examples/table-rules-001.html">example</a> of table rules. + </figcaption> + </figure> + </aside> + + ISSUE: sort out if non-collapsed column-groups that only contain collapsed columns should generate rules, ditto row-groups/rows + + +### Table Row Group Containers ### {#rule-extent-table-row-group} + + A <a spec=css-tables>table-row-group</a> container creates rules between its <a spec=css-tables>table-rows</a> and between each + <a spec=css-tables>table-cell</a> in a row. Collapsed <a spec=css-tables>table-rows</a> are treated as if they don't exist. + Collapsed <a spec=css-tables>table-columns</a> are treated as if they don't exist. + + Row rules (between <a spec=css-tables>table-rows</a>) collide with cells that have + a row <a spec=css-tables>span</a> crossing it. + Column rules (between <a spec=css-tables>table-cells</a>) collide with cells that have + a column <a spec=css-tables>span</a> crossing it. + ''column-rule-extent/allow-overlap'' can be used to create rules that + extend over such spanning cells. + + <aside class=example> + This <a href="examples/table-row-group-rules-001.html">example</a> illustrates rules between + table rows and cells. And also what happens when the table rules from + the last example is also applied. + <figure> + <img src="media/table-row-group-rules-001.png"> + <figcaption> + Example of table row and cell rules. + </figcaption> + </figure> + </aside> + + ''visibility:collapse'' on <a>table-cells</a> does not affect the rules in any way. + + +### Multi-Column Containers ### {#rule-extent-multicol} + + <a>Multi-column containers</a> already support rendering column rules between their columns. + That's now extended with all the new features described above. The changes described + above are backwards-compatible with existing web content that use <i>valid</i> ''column-rule'' + style values. Some previously <i>invalid</i> ''column-rule'' values are now <i>valid</i> + though, which could cause problems. For example, ''column-rule-width: 100%'', which + previously would not parse, will now start doing something. + + The ''row-rule-*'' properties apply to <a>multi-column containers</a>, and create + row rules between <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-line">multicol lines</a> and <a>spanners</a>, + separating them in the block axis. + + The [=segments=] are the columns and the ''margin-box'' of <a>spanners</a>. + + ISSUE: this proposal makes the assumption that the related proposal that + ''row-gap'' should apply to multi-column containers is also adopted + (<a href=https://github.com/w3c/csswg-drafts/issues/6746>issue #6746</a>). + + <aside class=example> + This <a href="examples/multicol-row-rule-001.html">example</a> illustrates rules in + a multi-column container. + <figure> + <img src="media/multicol-row-rule-001.png"> + <figcaption> + Example of column and row rules in a multi-column. + </figcaption> + </figure> + </aside> + + + <aside class=example> + If <a>multi-column containers</a> add support for + 'column-span: <<integer>>' some time in the future, + this is how row rules will work: + <figure> + <img src="media/multicol-colspan-2.png"> + <figcaption> + Example of ''column-span: 2'' in a multi-column with column and row rules. + </figcaption> + </figure> + </aside> + + + +The Rule Containing Rectangle {#rule-containing-rectangle} +========================================================== + + The <dfn>rule containing rectangle</dfn> is formed by the <a href="#rule-extent">rule extent</a> + and <a href="#rule-align">alignment</a> in the [=longitudinal axis=], and by the size of the + <a href="https://drafts.csswg.org/css-align/#gutter">gutter</a> in the [=lateral axis=]. + (For clarity, the size of the gutter is calculated from the <a href="https://drafts.csswg.org/css-align/#gaps">gap</a> + properties plus any extra space contributed by <a href="https://drafts.csswg.org/css-align/#distribution-values">alignment distribution</a> + but does not include any item margins.) + + It is important to note that the [=rule containing rectangle's=] size in an axis isn't affected by any of + the <a href="#column-rule-lateral-inset">inset properties</a> <i>in the same axis</i> as that would lead to a circular + dependency when resolving inset percentage values. (The [=rule containing rectangle=] is the percentage basis + for all the rule properties which take percentage values.) However, a rule that uses + ''column-rule-align: rule | rule-center | rule-over'' is affected by the <a href="#column-rule-lateral-inset">lateral inset properties</a> + of the rule it aligns to in the <i>opposite axis</i>. + + Here's an illustration of the [=rule containing rectangle=] (the dashed green rectangle) for the top blue rule. + This is a 2x2 grid using the default extent, so the [=extent size=] is the row's block size. + It has the following non-default rule properties: + ```css + column-rule: 14px solid blue; + column-rule-align: rule; + column-rule-edge-align: gap-center; + column-rule-longitudinal-inset-end: 8px; + + row-rule: 6px solid black; + row-rule-lateral-inset-start: 20px; + ``` + + <figure> + <img src="media/rule-containing-rectangle.png"> + <figcaption> + The Rule Containing Rectangle + </figcaption> + </figure> + + Note that the [=rule containing rectangle=] extends to the start of the black horizontal rule, which has a ''row-rule-lateral-inset-start/20px'' + lateral inset (making it non-centered). We align to its start with ''column-rule-align: rule''. From there, + we move the bottom edge of the blue rule up by ''column-rule-longitudinal-inset-end/8px'' with ''column-rule-longitudinal-inset-end: 8px''. + The default ''column-rule-length: auto'' then fills the resulting area. If we were to use + ''column-rule-length: 100%'' here instead, then the rule would fill the [=rule containing rectangle=] + vertically, since that's its percentage basis. (The end inset would then be ignored since the start inset + is zero by default so the situation is over-constrained, and we resolve by ignoring the end inset, per the + <a href=#rule-sizing>sizing rules</a>.) + + +Rule Painting Order {#rule-painting-order} +========================================== + + Column and row rules are painted in the same layer as the element's border. + They are painted after (on top of) the element's border. + All column rules for an element are painted first, then all of its row rules. + The rules for an axis are painted in the order they were generated by + the <a href="#rule-extent">rule extent</a> algorithms described above. + Typically from the logical start to the end of the axis. + + For table layout, all the <a spec=css-tables>table</a> rules (in both axes) + are painted before the rules for the row-groups. The painting order between + multiple row-groups is whatever the <a href="https://drafts.csswg.org/css-tables">table spec</a> + specifies. For an individual row-group, the rules are painted in logical + start to end order in both axes. + + Again, note that for a specific fragment, + <strong>all the column rules are painted before all the row rules</strong>, + the above merely tries to clarify the painting order of the rules for + a specific axis. + + +Rule Overflow {#rule-overflow} +============================== + + The column and row rule areas contributes to a fragment's [=ink overflow=]. + Note that they can overflow an fragment's border-box due to negative inset + values etc. + + <aside class=example> + Here's an <a href="examples/grid-longitudinal-003.html">example</a> showing + rules that overflow their container and how they are clipped. + Both grids have large negative insets to extend the rules outside of the container. + The right grid has ''overflow: hidden'' which clips its rules at the padding area edge. + <figure> + <img src="media/grid-longitudinal-003.png"> + <figcaption> + Examples of rule overflow and clipping. + </figcaption> + </figure> + </aside> + + For clarity, none of the properties in this spec affects layout in any way. + Column and row rules are purely a painting effect. diff --git a/layout/docs/css-gap-decorations/Overview.html b/layout/docs/css-gap-decorations/Overview.html new file mode 100644 index 0000000000..56c46a3468 --- /dev/null +++ b/layout/docs/css-gap-decorations/Overview.html @@ -0,0 +1,3803 @@ +<!doctype html><html lang="en"> + <head> + <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> + <title>CSS Gap Decorations</title> + <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> + <meta content="exploring" name="csswg-work-status"> + <meta content="ED" name="w3c-status"> + <meta content="This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations." name="abstract"> + <link href="../default.css" rel="stylesheet" type="text/css"> + <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> + <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet" type="text/css"> + <meta content="Bikeshed version dfbc2b297, updated Thu Nov 11 15:52:32 2021 -0800" name="generator"> + <link href="https://matspalmgren.github.io/css-gap-decorations/Overview.html" rel="canonical"> + <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> + <meta content="0978a49f760a6618d883efc621c36673a0720e2a" name="document-revision"> +<style>/* style-autolinks */ + +.css.css, .property.property, .descriptor.descriptor { + color: var(--a-normal-text); + font-size: inherit; + font-family: inherit; +} +.css::before, .property::before, .descriptor::before { + content: "‘"; +} +.css::after, .property::after, .descriptor::after { + content: "’"; +} +.property, .descriptor { + /* Don't wrap property and descriptor names */ + white-space: nowrap; +} +.type { /* CSS value <type> */ + font-style: italic; +} +pre .property::before, pre .property::after { + content: ""; +} +[data-link-type="property"]::before, +[data-link-type="propdesc"]::before, +[data-link-type="descriptor"]::before, +[data-link-type="value"]::before, +[data-link-type="function"]::before, +[data-link-type="at-rule"]::before, +[data-link-type="selector"]::before, +[data-link-type="maybe"]::before { + content: "‘"; +} +[data-link-type="property"]::after, +[data-link-type="propdesc"]::after, +[data-link-type="descriptor"]::after, +[data-link-type="value"]::after, +[data-link-type="function"]::after, +[data-link-type="at-rule"]::after, +[data-link-type="selector"]::after, +[data-link-type="maybe"]::after { + content: "’"; +} + +[data-link-type].production::before, +[data-link-type].production::after, +.prod [data-link-type]::before, +.prod [data-link-type]::after { + content: ""; +} + +[data-link-type=element], +[data-link-type=element-attr] { + font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; + font-size: .9em; +} +[data-link-type=element]::before { content: "<" } +[data-link-type=element]::after { content: ">" } + +[data-link-type=biblio] { + white-space: pre; +}</style> +<style>/* style-colors */ + +/* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ +:root { + color-scheme: light dark; + + --text: black; + --bg: white; + + --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); + + --logo-bg: #1a5e9a; + --logo-active-bg: #c00; + --logo-text: white; + + --tocnav-normal-text: #707070; + --tocnav-normal-bg: var(--bg); + --tocnav-hover-text: var(--tocnav-normal-text); + --tocnav-hover-bg: #f8f8f8; + --tocnav-active-text: #c00; + --tocnav-active-bg: var(--tocnav-normal-bg); + + --tocsidebar-text: var(--text); + --tocsidebar-bg: #f7f8f9; + --tocsidebar-shadow: rgba(0,0,0,.1); + --tocsidebar-heading-text: hsla(203,20%,40%,.7); + + --toclink-text: var(--text); + --toclink-underline: #3980b5; + --toclink-visited-text: var(--toclink-text); + --toclink-visited-underline: #054572; + + --heading-text: #005a9c; + + --hr-text: var(--text); + + --algo-border: #def; + + --del-text: red; + --del-bg: transparent; + --ins-text: #080; + --ins-bg: transparent; + + --a-normal-text: #034575; + --a-normal-underline: #bbb; + --a-visited-text: var(--a-normal-text); + --a-visited-underline: #707070; + --a-hover-bg: rgba(75%, 75%, 75%, .25); + --a-active-text: #c00; + --a-active-underline: #c00; + + --blockquote-border: silver; + --blockquote-bg: transparent; + --blockquote-text: currentcolor; + + --issue-border: #e05252; + --issue-bg: #fbe9e9; + --issue-text: var(--text); + --issueheading-text: #831616; + + --example-border: #e0cb52; + --example-bg: #fcfaee; + --example-text: var(--text); + --exampleheading-text: #574b0f; + + --note-border: #52e052; + --note-bg: #e9fbe9; + --note-text: var(--text); + --noteheading-text: hsl(120, 70%, 30%); + --notesummary-underline: silver; + + --assertion-border: #aaa; + --assertion-bg: #eee; + --assertion-text: black; + + --advisement-border: orange; + --advisement-bg: #fec; + --advisement-text: var(--text); + --advisementheading-text: #b35f00; + + --warning-border: red; + --warning-bg: hsla(40,100%,50%,0.95); + --warning-text: var(--text); + + --amendment-border: #330099; + --amendment-bg: #F5F0FF; + --amendment-text: var(--text); + --amendmentheading-text: #220066; + + --def-border: #8ccbf2; + --def-bg: #def; + --def-text: var(--text); + --defrow-border: #bbd7e9; + + --datacell-border: silver; + + --indexinfo-text: #707070; + + --indextable-hover-text: black; + --indextable-hover-bg: #f7f8f9; + + --outdatedspec-bg: rgba(0, 0, 0, .5); + --outdatedspec-text: black; + --outdated-bg: maroon; + --outdated-text: white; + --outdated-shadow: red; + + --editedrec-bg: darkorange; +}</style> +<style>/* style-counters */ + +body { + counter-reset: example figure issue; +} +.issue { + counter-increment: issue; +} +.issue:not(.no-marker)::before { + content: "Issue " counter(issue); +} + +.example { + counter-increment: example; +} +.example:not(.no-marker)::before { + content: "Example " counter(example); +} +.invalid.example:not(.no-marker)::before, +.illegal.example:not(.no-marker)::before { + content: "Invalid Example" counter(example); +} + +figcaption { + counter-increment: figure; +} +figcaption:not(.no-marker)::before { + content: "Figure " counter(figure) " "; +}</style> +<style>/* style-dfn-panel */ + +:root { + --dfnpanel-bg: #ddd; + --dfnpanel-text: var(--text); +} +.dfn-panel { + position: absolute; + z-index: 35; + height: auto; + width: -webkit-fit-content; + width: fit-content; + max-width: 300px; + max-height: 500px; + overflow: auto; + padding: 0.5em 0.75em; + font: small Helvetica Neue, sans-serif, Droid Sans Fallback; + background: var(--dfnpanel-bg); + color: var(--dfnpanel-text); + border: outset 0.2em; +} +.dfn-panel:not(.on) { display: none; } +.dfn-panel * { margin: 0; padding: 0; text-indent: 0; } +.dfn-panel > b { display: block; } +.dfn-panel a { color: var(--dfnpanel-text); } +.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } +.dfn-panel > b + b { margin-top: 0.25em; } +.dfn-panel ul { padding: 0; } +.dfn-panel li { list-style: inside; } +.dfn-panel.activated { + display: inline-block; + position: fixed; + left: .5em; + bottom: 2em; + margin: 0 auto; + max-width: calc(100vw - 1.5em - .4em - .5em); + max-height: 30vh; +} + +.dfn-paneled { cursor: pointer; } +</style> +<style>/* style-issues */ + +a[href].issue-return { + float: right; + float: inline-end; + color: var(--issueheading-text); + font-weight: bold; + text-decoration: none; +} +</style> +<style>/* style-md-lists */ + +/* This is a weird hack for me not yet following the commonmark spec + regarding paragraph and lists. */ +[data-md] > :first-child { + margin-top: 0; +} +[data-md] > :last-child { + margin-bottom: 0; +}</style> +<style>/* style-selflinks */ + +:root { + --selflink-text: white; + --selflink-bg: gray; + --selflink-hover-text: black; +} +.heading, .issue, .note, .example, li, dt { + position: relative; +} +a.self-link { + position: absolute; + top: 0; + left: calc(-1 * (3.5rem - 26px)); + width: calc(3.5rem - 26px); + height: 2em; + text-align: center; + border: none; + transition: opacity .2s; + opacity: .5; +} +a.self-link:hover { + opacity: 1; +} +.heading > a.self-link { + font-size: 83%; +} +li > a.self-link { + left: calc(-1 * (3.5rem - 26px) - 2em); +} +dfn > a.self-link { + top: auto; + left: auto; + opacity: 0; + width: 1.5em; + height: 1.5em; + background: var(--selflink-bg); + color: var(--selflink-text); + font-style: normal; + transition: opacity .2s, background-color .2s, color .2s; +} +dfn:hover > a.self-link { + opacity: 1; +} +dfn > a.self-link:hover { + color: var(--selflink-hover-text); +} + +a.self-link::before { content: "¶"; } +.heading > a.self-link::before { content: "§"; } +dfn > a.self-link::before { content: "#"; } +</style> +<style>/* style-syntax-highlighting */ + +code.highlight { padding: .1em; border-radius: .3em; } +pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } + +.highlight:not(.idl) { background: rgba(0, 0, 0, .03); } +c-[a] { color: #990055 } /* Keyword.Declaration */ +c-[b] { color: #990055 } /* Keyword.Type */ +c-[c] { color: #708090 } /* Comment */ +c-[d] { color: #708090 } /* Comment.Multiline */ +c-[e] { color: #0077aa } /* Name.Attribute */ +c-[f] { color: #669900 } /* Name.Tag */ +c-[g] { color: #222222 } /* Name.Variable */ +c-[k] { color: #990055 } /* Keyword */ +c-[l] { color: #000000 } /* Literal */ +c-[m] { color: #000000 } /* Literal.Number */ +c-[n] { color: #0077aa } /* Name */ +c-[o] { color: #999999 } /* Operator */ +c-[p] { color: #999999 } /* Punctuation */ +c-[s] { color: #a67f59 } /* Literal.String */ +c-[t] { color: #a67f59 } /* Literal.String.Single */ +c-[u] { color: #a67f59 } /* Literal.String.Double */ +c-[cp] { color: #708090 } /* Comment.Preproc */ +c-[c1] { color: #708090 } /* Comment.Single */ +c-[cs] { color: #708090 } /* Comment.Special */ +c-[kc] { color: #990055 } /* Keyword.Constant */ +c-[kn] { color: #990055 } /* Keyword.Namespace */ +c-[kp] { color: #990055 } /* Keyword.Pseudo */ +c-[kr] { color: #990055 } /* Keyword.Reserved */ +c-[ld] { color: #000000 } /* Literal.Date */ +c-[nc] { color: #0077aa } /* Name.Class */ +c-[no] { color: #0077aa } /* Name.Constant */ +c-[nd] { color: #0077aa } /* Name.Decorator */ +c-[ni] { color: #0077aa } /* Name.Entity */ +c-[ne] { color: #0077aa } /* Name.Exception */ +c-[nf] { color: #0077aa } /* Name.Function */ +c-[nl] { color: #0077aa } /* Name.Label */ +c-[nn] { color: #0077aa } /* Name.Namespace */ +c-[py] { color: #0077aa } /* Name.Property */ +c-[ow] { color: #999999 } /* Operator.Word */ +c-[mb] { color: #000000 } /* Literal.Number.Bin */ +c-[mf] { color: #000000 } /* Literal.Number.Float */ +c-[mh] { color: #000000 } /* Literal.Number.Hex */ +c-[mi] { color: #000000 } /* Literal.Number.Integer */ +c-[mo] { color: #000000 } /* Literal.Number.Oct */ +c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ +c-[sc] { color: #a67f59 } /* Literal.String.Char */ +c-[sd] { color: #a67f59 } /* Literal.String.Doc */ +c-[se] { color: #a67f59 } /* Literal.String.Escape */ +c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ +c-[si] { color: #a67f59 } /* Literal.String.Interpol */ +c-[sx] { color: #a67f59 } /* Literal.String.Other */ +c-[sr] { color: #a67f59 } /* Literal.String.Regex */ +c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ +c-[vc] { color: #0077aa } /* Name.Variable.Class */ +c-[vg] { color: #0077aa } /* Name.Variable.Global */ +c-[vi] { color: #0077aa } /* Name.Variable.Instance */ +c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ +</style> +<style>/* style-wpt */ + +:root { + --wpt-border: hsl(0, 0%, 60%); + --wpt-bg: hsl(0, 0%, 95%); + --wpt-text: var(--text); + --wptheading-text: hsl(0, 0%, 30%); +} +@media (prefers-color-scheme: dark) { + :root { + --wpt-border: hsl(0, 0%, 30%); + --wpt-bg: var(--borderedblock-bg); + --wpt-text: var(--text); + --wptheading-text: hsl(0, 0%, 60%); + } +} +.wpt-tests-block { + list-style: none; + border-left: .5em solid var(--wpt-border); + background: var(--wpt-bg); + color: var(--wpt-text); + margin: 1em auto; + padding: .5em; +} +.wpt-tests-block summary { + color: var(--wptheading-text); + font-weight: normal; + text-transform: uppercase; +} +.wpt-tests-block summary::marker{ + color: var(--wpt-border); +} +.wpt-tests-block summary:hover::marker{ + color: var(--wpt-text); +} +/* + The only content of a wpt test block in its closed state is the <summary>, + which contains the word TESTS, + and that is absolutely positioned. + In that closed state, wpt test blocks are styled + to have a top margin whose height is exactly equal + to the height of the absolutely positioned <summary>, + and no other background/padding/margin/border. + The wpt test block elements will therefore allow the maring + of the previous/next block elements + to collapse through them; + if this combined margin would be larger than its own top margin, + it stays as is, + and therefore the pre-existing vertical rhythm of the document is undisturbed. + If that combined margin would be smaller, it is grown to that size. + This means that the wpt test block ensures + that there's always enough vertical space to insert the summary, + without adding more than is needed. +*/ +.wpt-tests-block:not([open]){ + padding: 0; + border: none; + background: none; + font-size: 0.75em; + line-height: 1; + position: relative; + margin: 1em 0 0; +} +.wpt-tests-block:not([open]) summary { + position: absolute; + right: 0; + bottom: 0; +} +/* + It is possible that both the last child of a block element + and the block element itself + would be annotated with a <wpt> block each. + If the block element has a padding or a border, + that's fine, but otherwise + the bottom margin of the block and of its last child would collapse + and both <wpt> elements would overlap, being both placed there. + To avoid that, add 1px of padding to the <wpt> element annotating the last child + to prevent the bottom margin of the block and of its last child from collapsing + (and as much negative margin, + as wel only want to prevent margin collapsing, + but are not trying to actually take more space). +*/ +.wpt-tests-block:not([open]):last-child { + padding-bottom: 1px; + margin-bottom: -1px; +} +/* + Exception to the previous rule: + don't do that in non-last list items, + because it's not necessary, + and would therefore consume more space than strictly needed. + Lists must have list items as children, not <wpt> elements, + so a <wpt> element cannot be a sibling of a list item, + and the collision that the previous rule avoids cannot happen. +*/ +li:not(:last-child) > .wpt-tests-block:not([open]):last-child, +dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { + padding-bottom: 0; + margin-bottom: 0; +} +.wpt-tests-block:not([open]):not(:hover){ + opacity: 0.5; +} +.wpt-tests-list { + list-style: none; + display: grid; + margin: 0; + padding: 0; + grid-template-columns: 1fr max-content auto auto; + grid-column-gap: .5em; +} +.wpt-tests-block hr:last-child { + display: none; +} +.wpt-test { + display: contents; +} +.wpt-test > a { + text-decoration: underline; + border: none; +} +.wpt-test > .wpt-name { grid-column: 1; } +.wpt-test > .wpt-results { grid-column: 2; } +.wpt-test > .wpt-live { grid-column: 3; } +.wpt-test > .wpt-source { grid-column: 4; } + +.wpt-test > .wpt-results { + display: flex; + gap: .1em; +} +.wpt-test .wpt-result { + display: inline-block; + height: 1em; + width: 1em; + border-radius: 50%; + position: relative; +} +</style> +<style>/* style-darkmode */ + +@media (prefers-color-scheme: dark) { + :root { + --text: #ddd; + --bg: black; + + --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); + + --logo-bg: #1a5e9a; + --logo-active-bg: #c00; + --logo-text: white; + + --tocnav-normal-text: #999; + --tocnav-normal-bg: var(--bg); + --tocnav-hover-text: var(--tocnav-normal-text); + --tocnav-hover-bg: #080808; + --tocnav-active-text: #f44; + --tocnav-active-bg: var(--tocnav-normal-bg); + + --tocsidebar-text: var(--text); + --tocsidebar-bg: #080808; + --tocsidebar-shadow: rgba(255,255,255,.1); + --tocsidebar-heading-text: hsla(203,20%,40%,.7); + + --toclink-text: var(--text); + --toclink-underline: #6af; + --toclink-visited-text: var(--toclink-text); + --toclink-visited-underline: #054572; + + --heading-text: #8af; + + --hr-text: var(--text); + + --algo-border: #456; + + --del-text: #f44; + --del-bg: transparent; + --ins-text: #4a4; + --ins-bg: transparent; + + --a-normal-text: #6af; + --a-normal-underline: #555; + --a-visited-text: var(--a-normal-text); + --a-visited-underline: var(--a-normal-underline); + --a-hover-bg: rgba(25%, 25%, 25%, .2); + --a-active-text: #f44; + --a-active-underline: var(--a-active-text); + + --borderedblock-bg: rgba(255, 255, 255, .05); + + --blockquote-border: silver; + --blockquote-bg: var(--borderedblock-bg); + --blockquote-text: currentcolor; + + --issue-border: #e05252; + --issue-bg: var(--borderedblock-bg); + --issue-text: var(--text); + --issueheading-text: hsl(0deg, 70%, 70%); + + --example-border: hsl(50deg, 90%, 60%); + --example-bg: var(--borderedblock-bg); + --example-text: var(--text); + --exampleheading-text: hsl(50deg, 70%, 70%); + + --note-border: hsl(120deg, 100%, 35%); + --note-bg: var(--borderedblock-bg); + --note-text: var(--text); + --noteheading-text: hsl(120, 70%, 70%); + --notesummary-underline: silver; + + --assertion-border: #444; + --assertion-bg: var(--borderedblock-bg); + --assertion-text: var(--text); + + --advisement-border: orange; + --advisement-bg: #222218; + --advisement-text: var(--text); + --advisementheading-text: #f84; + + --warning-border: red; + --warning-bg: hsla(40,100%,20%,0.95); + --warning-text: var(--text); + + --amendment-border: #330099; + --amendment-bg: #080010; + --amendment-text: var(--text); + --amendmentheading-text: #cc00ff; + + --def-border: #8ccbf2; + --def-bg: #080818; + --def-text: var(--text); + --defrow-border: #136; + + --datacell-border: silver; + + --indexinfo-text: #aaa; + + --indextable-hover-text: var(--text); + --indextable-hover-bg: #181818; + + --outdatedspec-bg: rgba(255, 255, 255, .5); + --outdatedspec-text: black; + --outdated-bg: maroon; + --outdated-text: white; + --outdated-shadow: red; + + --editedrec-bg: darkorange; + } + /* In case a transparent-bg image doesn't expect to be on a dark bg, + which is quite common in practice... */ + img { background: white; } +} +@media (prefers-color-scheme: dark) { + :root { + --selflink-text: black; + --selflink-bg: silver; + --selflink-hover-text: white; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --dfnpanel-bg: #222; + --dfnpanel-text: var(--text); + } +} +@media (prefers-color-scheme: dark) { + .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } + + c-[a] { color: #d33682 } /* Keyword.Declaration */ + c-[b] { color: #d33682 } /* Keyword.Type */ + c-[c] { color: #2aa198 } /* Comment */ + c-[d] { color: #2aa198 } /* Comment.Multiline */ + c-[e] { color: #268bd2 } /* Name.Attribute */ + c-[f] { color: #b58900 } /* Name.Tag */ + c-[g] { color: #cb4b16 } /* Name.Variable */ + c-[k] { color: #d33682 } /* Keyword */ + c-[l] { color: #657b83 } /* Literal */ + c-[m] { color: #657b83 } /* Literal.Number */ + c-[n] { color: #268bd2 } /* Name */ + c-[o] { color: #657b83 } /* Operator */ + c-[p] { color: #657b83 } /* Punctuation */ + c-[s] { color: #6c71c4 } /* Literal.String */ + c-[t] { color: #6c71c4 } /* Literal.String.Single */ + c-[u] { color: #6c71c4 } /* Literal.String.Double */ + c-[ch] { color: #2aa198 } /* Comment.Hashbang */ + c-[cp] { color: #2aa198 } /* Comment.Preproc */ + c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ + c-[c1] { color: #2aa198 } /* Comment.Single */ + c-[cs] { color: #2aa198 } /* Comment.Special */ + c-[kc] { color: #d33682 } /* Keyword.Constant */ + c-[kn] { color: #d33682 } /* Keyword.Namespace */ + c-[kp] { color: #d33682 } /* Keyword.Pseudo */ + c-[kr] { color: #d33682 } /* Keyword.Reserved */ + c-[ld] { color: #657b83 } /* Literal.Date */ + c-[nc] { color: #268bd2 } /* Name.Class */ + c-[no] { color: #268bd2 } /* Name.Constant */ + c-[nd] { color: #268bd2 } /* Name.Decorator */ + c-[ni] { color: #268bd2 } /* Name.Entity */ + c-[ne] { color: #268bd2 } /* Name.Exception */ + c-[nf] { color: #268bd2 } /* Name.Function */ + c-[nl] { color: #268bd2 } /* Name.Label */ + c-[nn] { color: #268bd2 } /* Name.Namespace */ + c-[py] { color: #268bd2 } /* Name.Property */ + c-[ow] { color: #657b83 } /* Operator.Word */ + c-[mb] { color: #657b83 } /* Literal.Number.Bin */ + c-[mf] { color: #657b83 } /* Literal.Number.Float */ + c-[mh] { color: #657b83 } /* Literal.Number.Hex */ + c-[mi] { color: #657b83 } /* Literal.Number.Integer */ + c-[mo] { color: #657b83 } /* Literal.Number.Oct */ + c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ + c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ + c-[sc] { color: #6c71c4 } /* Literal.String.Char */ + c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ + c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ + c-[se] { color: #6c71c4 } /* Literal.String.Escape */ + c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ + c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ + c-[sx] { color: #6c71c4 } /* Literal.String.Other */ + c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ + c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ + c-[fm] { color: #268bd2 } /* Name.Function.Magic */ + c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ + c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ + c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ + c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ + c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ +} +</style> + <body class="h-entry"> + <div class="head"> + <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> </p> + <h1 class="p-name no-ref" id="title">CSS Gap Decorations</h1> + <p id="w3c-state"><a href="https://www.w3.org/standards/types#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2021-12-18">18 December 2021</time></p> + <details> + <summary>Specification Metadata</summary> + <div data-fill-with="spec-metadata"> + <dl> + <dt>This version: + <dd><a class="u-url" href="https://matspalmgren.github.io/css-gap-decorations/Overview.html">https://matspalmgren.github.io/css-gap-decorations/Overview.html</a> + <dt>Issue Tracking: + <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-gap-decorations-1">CSSWG Issues Repository</a> + <dd><a href="https://github.com/w3c/csswg-drafts/issues/6748">CSSWG github issue #6748</a> + <dd><a href="#issues-index">Inline In Spec</a> + <dt class="editor">Editor: + <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:mats@mozilla.com">Mats Palmgren</a> (<a class="p-org org" href="http://mozilla.com">Mozilla Corporation</a>) + <dt>Suggest an Edit for this Spec: + <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-gap-decorations-1/Overview.bs">GitHub Editor</a> + </dl> + </div> + </details> + <div data-fill-with="warning"></div> + <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2021 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p> + <hr title="Separator for header"> + </div> + <div class="p-summary" data-fill-with="abstract"> + <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> + <p>This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations.</p> + <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents +(such as HTML and XML) +on screen, on paper, etc. + </div> + <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2> + <div data-fill-with="status"> + <p> This is a public copy of the editors’ draft. + It is provided for discussion only and may change at any moment. + Its publication here does not imply endorsement of its contents by W3C. + Don’t cite this document other than as work in progress. </p> + <p>Please send feedback + by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), + including the spec code “css-gap-decorations” in the title, like this: + “[css-gap-decorations] <i>…summary of comment…</i>”. + All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. + Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-gap-decorations%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. </p> + <p>This document is governed by the <a href="https://www.w3.org/2021/Process-20211102/" id="w3c_process_revision">2 November 2021 W3C Process Document</a>. </p> + <p></p> + </div> + <div data-fill-with="at-risk"></div> + <nav data-fill-with="table-of-contents" id="toc"> + <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> + <ol class="toc" role="directory"> + <li> + <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a> + <ol class="toc"> + <li><a href="#overview"><span class="secno">1.1</span> <span class="content">Overview</span></a> + <li><a href="#placement"><span class="secno">1.2</span> <span class="content">Module Interactions</span></a> + <li><a href="#definitions"><span class="secno">1.3</span> <span class="content">Definitions</span></a> + </ol> + <li> + <a href="#rule-image"><span class="secno">2</span> <span class="content">Rule Images and Gradients</span></a> + <ol class="toc"> + <li><a href="#column-rule-image-source"><span class="secno">2.1</span> <span class="content">The <span class="property">column-rule-image-source</span> and <span class="property">row-rule-image-source</span> Properties</span></a> + <li><a href="#column-rule-image-slice"><span class="secno">2.2</span> <span class="content">The <span class="property">column-rule-image-slice</span> and <span class="property">row-rule-image-slice</span> Properties</span></a> + <li><a href="#column-rule-image-repeat"><span class="secno">2.3</span> <span class="content">The <span class="property">column-rule-image-repeat</span> and <span class="property">row-rule-image-repeat</span> Properties</span></a> + <li><a href="#column-rule-image"><span class="secno">2.4</span> <span class="content">The <span class="property">column-rule-image</span> and <span class="property">row-rule-image</span> Shorthands</span></a> + </ol> + <li> + <a href="#size"><span class="secno">3</span> <span class="content">Rule Positioning and Sizing</span></a> + <ol class="toc"> + <li><a href="#column-rule-width"><span class="secno">3.1</span> <span class="content">The <span class="property">column-rule-width</span> and <span class="property">row-rule-width</span> Properties</span></a> + <li><a href="#column-rule-length"><span class="secno">3.2</span> <span class="content">The <span class="property">column-rule-length</span> and <span class="property">row-rule-length</span> Properties</span></a> + <li><a href="#column-rule-lateral-inset-start"><span class="secno">3.3</span> <span class="content">The Rule Lateral Inset Properties</span></a> + <li><a href="#resolving-position-and-size-algo"><span class="secno">3.4</span> <span class="content">Resolving a rule’s position and size</span></a> + <li><a href="#column-rule-lateral-inset"><span class="secno">3.5</span> <span class="content">The <span class="property">column-rule-lateral-inset</span> and <span class="property">row-rule-lateral-inset</span> Shorthands</span></a> + <li><a href="#column-rule-longitudinal-inset-start"><span class="secno">3.6</span> <span class="content">The Rule Longitudinal Inset Properties</span></a> + <li><a href="#column-rule-longitudinal-inset"><span class="secno">3.7</span> <span class="content">The <span class="property">column-rule-longitudinal-inset</span> and <span class="property">row-rule-longitudinal-inset</span> Shorthands</span></a> + <li><a href="#column-rule-longitudinal-edge-inset-start"><span class="secno">3.8</span> <span class="content">The Rule Longitudinal Edge Inset Properties</span></a> + <li><a href="#column-rule-longitudinal-edge-inset"><span class="secno">3.9</span> <span class="content">The <span class="property">column-rule-longitudinal-edge-inset</span> and <span class="property">row-rule-longitudinal-edge-inset</span> Shorthands</span></a> + </ol> + <li> + <a href="#row-rule-props"><span class="secno">4</span> <span class="content">Row Rule Style and Color</span></a> + <ol class="toc"> + <li><a href="#row-rule-style"><span class="secno">4.1</span> <span class="content">The <span class="property">row-rule-style</span> and <span class="property">row-rule-color</span> Properties</span></a> + <li><a href="#row-rule"><span class="secno">4.2</span> <span class="content">The <span class="property">row-rule</span> Shorthand</span></a> + </ol> + <li> + <a href="#rule-align"><span class="secno">5</span> <span class="content">Rule Alignment</span></a> + <ol class="toc"> + <li><a href="#column-rule-align"><span class="secno">5.1</span> <span class="content">The <span class="property">column-rule-align</span> and <span class="property">row-rule-align</span> Properties</span></a> + <li><a href="#column-rule-edge-align"><span class="secno">5.2</span> <span class="content">The <span class="property">column-rule-edge-align</span> and <span class="property">row-rule-edge-align</span> Properties</span></a> + </ol> + <li> + <a href="#rule-extent"><span class="secno">6</span> <span class="content">Rule Extent</span></a> + <ol class="toc"> + <li> + <a href="#column-rule-extent"><span class="secno">6.1</span> <span class="content">The <span class="property">column-rule-extent</span> and <span class="property">row-rule-extent</span> Properties</span></a> + <ol class="toc"> + <li> + <a href="#rule-extent-grid"><span class="secno">6.1.1</span> <span class="content">Grid Containers</span></a> + <ol class="toc"> + <li><a href="#rule-extent-subgrid"><span class="secno">6.1.1.1</span> <span class="content">Subgrid</span></a> + <li><a href="#rule-extent-masonry"><span class="secno">6.1.1.2</span> <span class="content">Masonry</span></a> + </ol> + <li><a href="#rule-extent-flexbox"><span class="secno">6.1.2</span> <span class="content">Flex Containers</span></a> + <li><a href="#rule-extent-table"><span class="secno">6.1.3</span> <span class="content">Table Containers</span></a> + <li><a href="#rule-extent-table-row-group"><span class="secno">6.1.4</span> <span class="content">Table Row Group Containers</span></a> + <li><a href="#rule-extent-multicol"><span class="secno">6.1.5</span> <span class="content">Multi-Column Containers</span></a> + </ol> + </ol> + <li><a href="#rule-containing-rectangle"><span class="secno">7</span> <span class="content">The Rule Containing Rectangle</span></a> + <li><a href="#rule-painting-order"><span class="secno">8</span> <span class="content">Rule Painting Order</span></a> + <li><a href="#rule-overflow"><span class="secno">9</span> <span class="content">Rule Overflow</span></a> + <li> + <a href="#w3c-conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> + <ol class="toc"> + <li><a href="#w3c-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> + <li><a href="#w3c-conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> + <li> + <a href="#w3c-partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a> + <ol class="toc"> + <li><a href="#w3c-conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> + </ol> + <li><a href="#w3c-testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a> + </ol> + <li> + <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> + <ol class="toc"> + <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> + <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> + </ol> + <li> + <a href="#references"><span class="secno"></span> <span class="content">References</span></a> + <ol class="toc"> + <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> + <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a> + </ol> + <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> + <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> + </ol> + </nav> + <main> + <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2> + <p><em>This section is not normative.</em></p> + <h3 class="heading settled" data-level="1.1" id="overview"><span class="secno">1.1. </span><span class="content">Overview</span><a class="self-link" href="#overview"></a></h3> + <p>This is a proposal to add CSS features for decorating <a href="https://drafts.csswg.org/css-align#gaps">gaps</a>. + (Some use cases and background discussion can be found in <a href="https://github.com/w3c/csswg-drafts/issues/2748">issue #2748</a>.) + We propose to extend the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width">column-rule-width</a> property with new values. + Add properties to support images and gradients. + Add properties for aligning the rule to specific anchor points, + specifying its extent area, and to control its position and length within that area. + We add support for row rules by adding the corresponding <a class="property" data-link-type="propdesc">row-*</a> properties. + We also widen the scope of these properties so that they can be used in <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group">table-row-group</a> containers, + as well as <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container">multi-column containers</a>.</p> + <h3 class="heading settled" data-level="1.2" id="placement"><span class="secno">1.2. </span><span class="content">Module Interactions</span><a class="self-link" href="#placement"></a></h3> + <p>This module extends the definition of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width①">column-rule-width</a> property, + adding <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a> and <span class="css">auto</span> values. + We also generalize the existing <span class="css">column-rule-*</span> properties to apply to other + types of containers. + Accordingly, we propose to move the existing <span class="css">column-rule</span> properties from + the <a href="https://drafts.csswg.org/css-multicol">Multi-column</a> spec to + the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec. + Additionally, all new properties and shorthands in this proposal are intended + as additions to the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec.</p> + <h3 class="heading settled" data-level="1.3" id="definitions"><span class="secno">1.3. </span><span class="content">Definitions</span><a class="self-link" href="#definitions"></a></h3> + <p>In this specification, we will use the term <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="lateral-axis">lateral axis</dfn> to refer to + the axis in which the rule’s thickness grows (i.e. the axis <span class="css">column-rule-width</span> use). The other axis is the rule’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="longitudinal-axis">longitudinal axis</dfn> and + its size in this axis is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="rule-length">rule length</dfn>. + These definitions are relative to the rule itself and does not depend on if + the rule is a row or column rule, or what the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> is.</p> + <h2 class="heading settled" data-level="2" id="rule-image"><span class="secno">2. </span><span class="content">Rule Images and Gradients</span><a class="self-link" href="#rule-image"></a></h2> + <p>Authors may specify an image or gradient to be used in place of the <span class="css">column-rule-style</span>. + These properties are loosely modeled after the corresponding <a href="https://drafts.csswg.org/css-backgrounds/#border-images"><a class="property" data-link-type="propdesc">border-image-*</a></a> properties. + Rules are one-dimensional though, as opposed to borders which have four sides around an area. + A rule is like a border with just one side rendered with the other sides having <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style">border-style: none</a>.</p> + <h3 class="heading settled" data-level="2.1" id="column-rule-image-source"><span class="secno">2.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-source" id="ref-for-propdef-column-rule-image-source">column-rule-image-source</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image-source" id="ref-for-propdef-row-rule-image-source">row-rule-image-source</a> Properties</span><a class="self-link" href="#column-rule-image-source"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-image-source"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image-source">column-rule-image-source</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image-source">row-rule-image-source</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image"><image></a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>none + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>N/A + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>the keyword <span class="css">none</span> or the computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image①"><image></a> + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>discrete + </table> + <p>These properties specify an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image②"><image></a> to use in place of the rendering specified + by the <span class="css">column-rule-style</span>/<span class="css">row-rule-style</span> properties.</p> + <p>As for borders, a rule image is not rendered when the corresponding <span class="css">column-rule-style</span>/<span class="css">row-rule-style</span> is <span class="css">none</span>.</p> + <h3 class="heading settled" data-level="2.2" id="column-rule-image-slice"><span class="secno">2.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice">column-rule-image-slice</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image-slice" id="ref-for-propdef-row-rule-image-slice">row-rule-image-slice</a> Properties</span><a class="self-link" href="#column-rule-image-slice"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-image-slice"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image-slice">column-rule-image-slice</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image-slice">row-rule-image-slice</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod">[<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value"><number [0,∞]></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage [0,∞]></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>0 + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container②">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container②">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table②">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group②">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>refer to image size in the rule’s longitudinal axis + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>one or two values, each either a number or percentage + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>discrete + </table> + <p><a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice①">column-rule-image-slice</a> specify inward offsets from the start and end edges + of the image in the rule’s longitudinal axis, dividing it into three regions: + two edge areas and one middle area.</p> + <p>When two values are specified, they set the offsets on the start and end sides in + that order. If the end value is missing, it is the same as the start value.</p> + <dl> + <dt><dfn class="css" data-dfn-for="column-rule-image-slice" data-dfn-type="value" data-export id="valdef-column-rule-image-slice-percentage-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②"><percentage [0,∞]></a><a class="self-link" href="#valdef-column-rule-image-slice-percentage-0"></a></dfn> + <dd>Percentages are relative to the image size in the rule’s longitudinal axis + <dt><dfn class="css" data-dfn-for="column-rule-image-slice" data-dfn-type="value" data-export id="valdef-column-rule-image-slice-number-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①"><number [0,∞]></a><a class="self-link" href="#valdef-column-rule-image-slice-number-0"></a></dfn> + <dd>Numbers represent pixels in the image (if the image is a raster + image) or vector coordinates (if the image is a vector image). + </dl> + <p>Negative values are not allowed. + Computed values larger than the size of the image are interpreted as <span class="css">100%</span>.</p> + <p>If the image must be sized to determine the slices + (for example, for SVG images with no intrinsic size), + then it is sized using the <a href="https://www.w3.org/TR/css-images-3/#default-sizing"><cite>CSS Images 3</cite> § 4.3.1 Default Sizing Algorithm</a> with no <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#specified-size" id="ref-for-specified-size">specified size</a> and the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①">rule containing rectangle</a> as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#default-object-size" id="ref-for-default-object-size">default object size</a>.</p> + <p>The regions given by the <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice②">column-rule-image-slice</a> values may overlap. + However if the sum of the start and end values is equal to or greater than + the size of the image, the middle part becomes empty.</p> + <h3 class="heading settled" data-level="2.3" id="column-rule-image-repeat"><span class="secno">2.3. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-repeat" id="ref-for-propdef-column-rule-image-repeat">column-rule-image-repeat</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image-repeat" id="ref-for-propdef-row-rule-image-repeat">row-rule-image-repeat</a> Properties</span><a class="self-link" href="#column-rule-image-repeat"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-image-repeat"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image-repeat">column-rule-image-repeat</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image-repeat">row-rule-image-repeat</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod">stretch <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> repeat <span id="ref-for-comb-one③">|</span> round <span id="ref-for-comb-one④">|</span> space + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>stretch + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container③">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container③">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container③">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table③">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group③">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>N/A + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>the specified keyword + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>discrete + </table> + <p>These properties specify how the middle part of a sliced rule image is scaled and tiled. + Values have the following meanings:</p> + <dl> + <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-stretch">stretch<a class="self-link" href="#valdef-column-rule-image-repeat-stretch"></a></dfn> + <dd>The image is stretched to fill the area. + <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-repeat">repeat<a class="self-link" href="#valdef-column-rule-image-repeat-repeat"></a></dfn> + <dd>The image is tiled (repeated) to fill the area. + <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-round">round<a class="self-link" href="#valdef-column-rule-image-repeat-round"></a></dfn> + <dd>The image is tiled (repeated) to fill the area. If it does not + fill the area with a whole number of tiles, the image is rescaled + so that it does. + <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-space">space<a class="self-link" href="#valdef-column-rule-image-repeat-space"></a></dfn> + <dd>The image is tiled (repeated) to fill the area. If it does not + fill the area with a whole number of tiles, the extra space is + distributed around the tiles. + </dl> + <p>The exact process for scaling and tiling the image parts is defined by drawing the equivalent <span class="css">border-image</span> with the top and bottom <span class="css">border-image-slice</span> values set from the corresponding <span class="css">column-rule-image-slice</span> values, and the <span class="css">border-image-slice</span> left value set to <span class="css">100%</span> and + the right value set to <span class="css">0</span>. The <span class="css">border-image-width</span> top value set to the <span class="css">column-rule-image-slice</span> top value. The <span class="css">border-image-width</span> top value set to the <span class="css">column-rule-image-slice</span> bottom value. The <span class="css">border-image-width</span> top value set to zero.</p> + <h3 class="heading settled" data-level="2.4" id="column-rule-image"><span class="secno">2.4. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image" id="ref-for-propdef-column-rule-image">column-rule-image</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image" id="ref-for-propdef-row-rule-image">row-rule-image</a> Shorthands</span><a class="self-link" href="#column-rule-image"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-image"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image">column-rule-image</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image">row-rule-image</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-source" id="ref-for-propdef-column-rule-image-source①"><'column-rule-image-source'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice③"><'column-rule-image-slice'></a> <span id="ref-for-comb-any①">||</span> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-repeat" id="ref-for-propdef-column-rule-image-repeat①"><'column-rule-image-repeat'></a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container④">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container④">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container④">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table④">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group④">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + </table> + <aside class="example" id="example-c9ee9e2e"> + <a class="self-link" href="#example-c9ee9e2e"></a> This <a href="examples/grid-image-001.html">example</a> demonstrates the new + rule image properties presented above in a grid layout with spanning elements. + <figure> + <img height="488" src="media/grid-image-001.png" width="608"> + <figcaption> Example of image rules. </figcaption> + </figure> + </aside> + <aside class="example" id="example-0518370f"> + <a class="self-link" href="#example-0518370f"></a> Here’s a <a href="examples/grid-image-002.html">variation</a> of the example above + that animates the container’s size and stretch the middle part of the images. + <figure> + <video autoplay loop src="media/grid-image-002.webm"></video> + <figcaption> Example of stretching image rules when the container is resized. </figcaption> + </figure> + </aside> + <aside class="example" id="example-746571da"> + <a class="self-link" href="#example-746571da"></a> This is a similar <a href="examples/grid-gradient-001.html">example</a> using gradients. + <figure> + <img height="489" src="media/grid-gradient-001.png" width="608"> + <figcaption> Example of gradient rules. </figcaption> + </figure> + </aside> + <aside class="example" id="example-4f51bab9"> + <a class="self-link" href="#example-4f51bab9"></a> Here’s an <a href="examples/flexbox-coupon-rule.html">example</a> demonstrating + support for a use case mentioned in <a href="https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621983931">issue #2748</a>. + It’s a coupon with a perforation rendered by a semi-transparent rule image between two flex items. + <figure> + <img height="108" src="media/flexbox-coupon-rule.png" width="253"> + <figcaption> An example of a semi-transparent column rule image. </figcaption> + </figure> + </aside> + <h2 class="heading settled" data-level="3" id="size"><span class="secno">3. </span><span class="content">Rule Positioning and Sizing</span><a class="self-link" href="#size"></a></h2> + <h3 class="heading settled" data-level="3.1" id="column-rule-width"><span class="secno">3.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width②">column-rule-width</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-width" id="ref-for-propdef-row-rule-width">row-rule-width</a> Properties</span><a class="self-link" href="#column-rule-width"></a></h3> + <table class="def propdef partial" data-link-for-hint="column-rule-width"> + <tbody> + <tr> + <th>Name: + <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width③">column-rule-width</a> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a> + <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> auto + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>medium + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑤">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑤">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑤">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑤">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑤">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis">lateral axis</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>absolute length if the specified value is <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width" title="Expands to: medium | thick | thin"><line-width></a>; <span class="css">0px</span> if the column rule style is <span class="css">none</span> or <span class="css">hidden</span>. Otherwise, the specified value. + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>by computed value type + </table> + <table class="def propdef" data-link-for-hint="row-rule-width"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-width">row-rule-width</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width①" title="Expands to: medium | thick | thin"><line-width></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value④"><percentage></a> <span id="ref-for-comb-one⑦">|</span> auto + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>medium + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑥">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑥">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑥">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑥">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑥">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①②">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis①">lateral axis</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>absolute length if the specified value is <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width②" title="Expands to: medium | thick | thin"><line-width></a>; <span class="css">0px</span> if the column rule style is <span class="css">none</span> or <span class="css">hidden</span>. Otherwise, the specified value. + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>by computed value type + </table> + <p>These properties sets the thickness (lateral size) of a rule in the column and row axis, respectively. + Negative specified values are not allowed. + The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used value</a> is floored at zero (in case a 'calc()' expression evaluates to a negative value for example).</p> + <p>See <a href="#resolving-position-and-size-algo">§ 3.4 Resolving a rule’s position and size</a> below for how <a class="property" data-link-type="propdesc">auto</a> is resolved.</p> + <h3 class="heading settled" data-level="3.2" id="column-rule-length"><span class="secno">3.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-length" id="ref-for-propdef-column-rule-length">column-rule-length</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-length" id="ref-for-propdef-row-rule-length">row-rule-length</a> Properties</span><a class="self-link" href="#column-rule-length"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-length"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-length">column-rule-length</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-length">row-rule-length</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> auto + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>auto + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑦">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑦">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑦">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑦">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑦">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①③">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis">longitudinal axis</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>the specified value + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>by computed value type + </table> + <p>These properties sets the <a data-link-type="dfn" href="#rule-length" id="ref-for-rule-length">rule length</a> (longitudinal size) of a rule in the column and row axis, respectively. + Negative specified values are not allowed. + The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value①">used value</a> is floored at zero (in case a 'calc()' expression evaluates to a negative value for example).</p> + <p>See <a href="#resolving-position-and-size-algo">§ 3.4 Resolving a rule’s position and size</a> below for how <a class="property" data-link-type="propdesc">auto</a> is resolved.</p> + <p class="note" role="note"><span>Note:</span> These properties work the same as the <a class="property" data-link-type="propdesc">*-rule-width</a> properties in the <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis②">lateral axis</a>, except that they have a different initial value.</p> + <h3 class="heading settled" data-level="3.3" id="column-rule-lateral-inset-start"><span class="secno">3.3. </span><span class="content">The Rule Lateral Inset Properties</span><a class="self-link" href="#column-rule-lateral-inset-start"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-lateral-inset-start"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-lateral-inset-start">column-rule-lateral-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-lateral-inset-end">column-rule-lateral-inset-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-lateral-inset-start">row-rule-lateral-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-lateral-inset-end">row-rule-lateral-inset-end</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> auto + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>auto + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑧">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑧">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑧">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑧">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑧">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①④">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis③">lateral axis</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>the specified value + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>by computed value type + </table> + <p>These properties sets the lateral start/end offset of the rule in the column and row axis, respectively. + A positive value moves the position inward and a negative value outward from the corresponding <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑤">rule containing rectangle’s</a> edge.</p> + <aside class="example" id="example-2ebfce9b"> + <a class="self-link" href="#example-2ebfce9b"></a> This <a href="examples/grid-lateral-002.html">example</a> demonstrates aligning a rule at the start of the gap. + <figure> + <img height="170" src="media/grid-lateral-002.png" width="941"> + <figcaption> Examples of aligning a rule at the start of the gap with a lateral start offset. </figcaption> + </figure> + </aside> + <aside class="example" id="example-c7a1d008"> + <a class="self-link" href="#example-c7a1d008"></a> This <a href="examples/grid-lateral-003.html">example</a> demonstrates aligning a rule at the end of the gap. + <figure> + <img height="170" src="media/grid-lateral-003.png" width="928"> + <figcaption> Examples of aligning a rule at the end of the gap with a lateral end offset. </figcaption> + </figure> + </aside> + <p class="note" role="note"><span>NOTE:</span> The <span class="css">column-rule-lateral-inset</span> and <span class="css">column-rule-width</span> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value②">used values</a> are calculated in a similar way to how <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width</a> are <a href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width">calculated</a> for an absolutely positioned + box. The precise algorithm is described next.</p> + <h3 class="heading settled" data-level="3.4" id="resolving-position-and-size-algo"><span class="secno">3.4. </span><span class="content">Resolving a rule’s position and size</span><a class="self-link" href="#resolving-position-and-size-algo"></a></h3> + <p>Given a triplet of values: inset-start/end and a size for an axis, <span class="css">auto</span> values + are resolved so that the sum of the three values equals the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑥">rule containing rectangle</a> size in + the same axis. These are the rules for resolving them:</p> + <ol id="rule-sizing"> + <li>if all the values are <span class="css">auto</span> then set both inset values to zero and solve for size + <li>if none of the values are <span class="css">auto</span> then the situation is over-constrained: solve by + treating the end inset value as <span class="css">auto</span> + <li>if both inset properties are <span class="css">auto</span>, but the size is not, then solve with the additional constraint + that the inset values must have equal values (resulting in the rule being centered) + <li>if the size is <span class="css">auto</span> and only one of the inset values is <span class="css">auto</span> then set the <span class="css">auto</span> inset value to zero + and solve for size, if that makes size negative then set the size to zero and solve for the <span class="css">auto</span> inset value instead (i.e. the rule is sized to fill the remaining space, until it becomes zero in + which case its positioned at the non-<span class="css">auto</span> inset edge) + <li>if the size is <span class="css">auto</span> and both inset values are non-<span class="css">auto</span> then solve for size, + if that makes the size negative then set the size to zero and solve again by + treating the end inset value as <span class="css">auto</span> + </ol> + <p>These rules resolves the <span class="css">column-rule-width</span>, <span class="css">column-rule-lateral-inset-start</span>, and <span class="css">column-rule-lateral-inset-end</span> triplet + of values in a rule’s lateral axis.</p> + <p>The same rules are also used to resolve <span class="css">column-rule-length</span>, <span class="css">column-rule-longitudinal-[edge-]inset-start</span>, and <span class="css">column-rule-longitudinal-[edge-]inset-end</span> triplet of values in a rule’s longitudinal axis (see the <a href="#column-rule-longitudinal-inset-start">longitudinal</a> property + descriptions below for which of the "edge" or non-"edge" values is used).</p> + <p>Ditto for the corresponding <span class="css">row-rule-*</span> properties.</p> + <aside class="example" id="example-a31fa0e2"> + <a class="self-link" href="#example-a31fa0e2"></a> This <a href="examples/grid-lateral-001.html">example</a> demonstrates the rules above. + Note in particular the latter two grids, which shows what happens when the sum of the + insets are greater than the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑦">rule containing rectangle’s</a> size. There’s still + a zero-sized column rule there, which the row rule (purple) aligns to. + <figure> + <img height="651" src="media/grid-lateral-001.png" width="997"> + <figcaption> Examples of lateral rule sizing with various inset values. </figcaption> + </figure> + </aside> + <h3 class="heading settled" data-level="3.5" id="column-rule-lateral-inset"><span class="secno">3.5. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-lateral-inset" id="ref-for-propdef-column-rule-lateral-inset">column-rule-lateral-inset</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-lateral-inset" id="ref-for-propdef-row-rule-lateral-inset">row-rule-lateral-inset</a> Shorthands</span><a class="self-link" href="#column-rule-lateral-inset"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-lateral-inset"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-lateral-inset">column-rule-lateral-inset</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-lateral-inset-start" id="ref-for-propdef-column-rule-lateral-inset-start"><'column-rule-lateral-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-lateral-inset-end" id="ref-for-propdef-column-rule-lateral-inset-end"><'column-rule-lateral-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + </table> + <table class="def propdef" data-link-for-hint="row-rule-lateral-inset"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-lateral-inset">row-rule-lateral-inset</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-lateral-inset-start" id="ref-for-propdef-row-rule-lateral-inset-start"><'row-rule-lateral-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-lateral-inset-end" id="ref-for-propdef-row-rule-lateral-inset-end"><'row-rule-lateral-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + </table> + <p>These are shortands for specifying the corresponding start/end values. + If one value is specified it is used for both start and end.</p> + <h3 class="heading settled" data-level="3.6" id="column-rule-longitudinal-inset-start"><span class="secno">3.6. </span><span class="content">The Rule Longitudinal Inset Properties</span><a class="self-link" href="#column-rule-longitudinal-inset-start"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-longitudinal-inset-start"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-inset-start">column-rule-longitudinal-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-inset-end">column-rule-longitudinal-inset-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-inset-start">row-rule-longitudinal-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-inset-end">row-rule-longitudinal-inset-end</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> auto + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>0 + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑨">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑨">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑨">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑨">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑨">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑧">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis①">longitudinal axis</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>the specified value + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>by computed value type + </table> + <p>These properties sets the longitudinal start/end inset of the rule in the column + and row axis, respectively. They are only used on a rule’s edges that are interior. + The <a href="#column-rule-longitudinal-edge-inset-start">*-rule-longitudinal-edge-inset</a> properties are used for rule edges that are on the outer edges of an axis. + The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value③">used values</a> are calculated the same as for the lateral properties above.</p> + <aside class="example" id="example-7f768fba"> + <a class="self-link" href="#example-7f768fba"></a> This <a href="examples/grid-lateral-004.html">example</a> shows the default rule alignment and size in both axes. + <figure> + <img height="280" src="media/grid-lateral-004.png" width="514"> + <figcaption> Example of a rule with default rule alignment and size in both axes. </figcaption> + </figure> + </aside> + <p class="note" role="note"><span>Note:</span> These have a different initial value than the lateral inset properties, meaning the rule will stretch to fill the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑨">rule containing rectangle</a> in this axis. The initial values as specified above are backward compatible with how column rules are sized and positioned in legacy <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-layout" id="ref-for-multi-column-layout">multi-column layout</a>.</p> + <aside class="example" id="example-156ca2f0"> + <a class="self-link" href="#example-156ca2f0"></a> Here’s a few simple <a href="examples/grid-longitudinal-001.html">examples</a> of + the rule sizing and inset properties. + Note that the grid items have <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity: 0.5</a> to show any rules underneath them. + <figure> + <img height="889" src="media/grid-longitudinal-001.png" width="629"> + <figcaption> Examples of rule sizing and inset values. </figcaption> + </figure> + </aside> + <aside class="example" id="example-3020da77"> + <a class="self-link" href="#example-3020da77"></a> This <a href="examples/grid-longitudinal-002.html">example</a> demonstrates + that the inset properties can be animated and that they are relative the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①⓪">rule containing rectangle</a>, + which itself depends on the <a href="#rule-align">rule’s alignment</a> in its longitudinal axis. + Note that the longitudinal insets in this example are definite and not animated. The reason + they follow the animated lateral position of the rule in the orthogonal axis is that they have <a href="#column-rule-align"><span class="css">rule</span> alignment</a>. + <figure> + <video autoplay loop src="media/grid-longitudinal-002.webm"></video> + <figcaption> Example of rule alignment and animated inset values. </figcaption> + </figure> + </aside> + <h3 class="heading settled" data-level="3.7" id="column-rule-longitudinal-inset"><span class="secno">3.7. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset" id="ref-for-propdef-column-rule-longitudinal-inset">column-rule-longitudinal-inset</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-inset" id="ref-for-propdef-row-rule-longitudinal-inset">row-rule-longitudinal-inset</a> Shorthands</span><a class="self-link" href="#column-rule-longitudinal-inset"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-longitudinal-inset"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-inset">column-rule-longitudinal-inset</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset-start" id="ref-for-propdef-column-rule-longitudinal-inset-start"><'column-rule-longitudinal-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset-end" id="ref-for-propdef-column-rule-longitudinal-inset-end"><'column-rule-longitudinal-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + </table> + <table class="def propdef" data-link-for-hint="row-rule-longitudinal-inset"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-inset">row-rule-longitudinal-inset</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-inset-start" id="ref-for-propdef-row-rule-longitudinal-inset-start"><'row-rule-longitudinal-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-inset-end" id="ref-for-propdef-row-rule-longitudinal-inset-end"><'row-rule-longitudinal-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + </table> + <p>These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.</p> + <h3 class="heading settled" data-level="3.8" id="column-rule-longitudinal-edge-inset-start"><span class="secno">3.8. </span><span class="content">The Rule Longitudinal Edge Inset Properties</span><a class="self-link" href="#column-rule-longitudinal-edge-inset-start"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-longitudinal-edge-inset-start"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-edge-inset-start">column-rule-longitudinal-edge-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-edge-inset-end">column-rule-longitudinal-edge-inset-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-edge-inset-start">row-rule-longitudinal-edge-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-edge-inset-end">row-rule-longitudinal-edge-inset-end</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> auto + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>0 + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⓪">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⓪">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⓪">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①⓪">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①⓪">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①①">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis②">longitudinal axis</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>the specified value + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>by computed value type + </table> + <p>These properties are identical to their non-"edge" counter-parts. These properties are used + on the start edge of the first rule that on the container’s start edge in its <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis③">longitudinal axis</a>, and the end edge of the last rule at the end of the container. + For interior rule edges, the <a href="#column-rule-longitudinal-inset-start">non-"edge" properties</a> are used. + In other words, these properties are used together with the <a href="#column-rule-edge-align"><span class="css">*-rule-edge-align</span></a> properties (defined below) and the <span class="css">*-rule-longitudinal-inset</span> properties are used together with <a href="#column-rule-align"><span class="css">*-rule-align</span></a>.</p> + <h3 class="heading settled" data-level="3.9" id="column-rule-longitudinal-edge-inset"><span class="secno">3.9. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-edge-inset" id="ref-for-propdef-column-rule-longitudinal-edge-inset">column-rule-longitudinal-edge-inset</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-edge-inset" id="ref-for-propdef-row-rule-longitudinal-edge-inset">row-rule-longitudinal-edge-inset</a> Shorthands</span><a class="self-link" href="#column-rule-longitudinal-edge-inset"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-longitudinal-edge-inset"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-edge-inset">column-rule-longitudinal-edge-inset</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-edge-inset-start" id="ref-for-propdef-column-rule-longitudinal-edge-inset-start"><'column-rule-longitudinal-edge-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-edge-inset-end" id="ref-for-propdef-column-rule-longitudinal-edge-inset-end"><'column-rule-longitudinal-edge-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + </table> + <table class="def propdef" data-link-for-hint="row-rule-longitudinal-edge-inset"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-edge-inset">row-rule-longitudinal-edge-inset</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-edge-inset-start" id="ref-for-propdef-row-rule-longitudinal-edge-inset-start"><'row-rule-longitudinal-edge-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-edge-inset-end" id="ref-for-propdef-row-rule-longitudinal-edge-inset-end"><'row-rule-longitudinal-edge-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + </table> + <p>These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.</p> + <h2 class="heading settled" data-level="4" id="row-rule-props"><span class="secno">4. </span><span class="content">Row Rule Style and Color</span><a class="self-link" href="#row-rule-props"></a></h2> + <h3 class="heading settled" data-level="4.1" id="row-rule-style"><span class="secno">4.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-row-rule-style" id="ref-for-propdef-row-rule-style">row-rule-style</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-color" id="ref-for-propdef-row-rule-color">row-rule-color</a> Properties</span><a class="self-link" href="#row-rule-style"></a></h3> + <table class="def propdef" data-link-for-hint="row-rule-style"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-style">row-rule-style</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-style" id="ref-for-typedef-line-style" title="Expands to: dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid"><line-style></a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>none + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①①">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①①">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①①">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①①">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①①">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>N/A + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>specified keyword + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>discrete + </table> + <table class="def propdef" data-link-for-hint="row-rule-color"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-color">row-rule-color</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-4/#typedef-color" id="ref-for-typedef-color" title="Expands to: aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | transparent | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen"><color></a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>currentcolor + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①②">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①②">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①②">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①②">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①②">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>N/A + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>computed color + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>by computed value type + </table> + <p>These properties are the same as the <span class="css">column-</span> properties but for the row rules.</p> + <h3 class="heading settled" data-level="4.2" id="row-rule"><span class="secno">4.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-row-rule" id="ref-for-propdef-row-rule">row-rule</a> Shorthand</span><a class="self-link" href="#row-rule"></a></h3> + <p>This shorthand works the same as <span class="css">column-rule</span>.</p> + <table class="def propdef" data-link-for-hint="row-rule"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule">row-rule</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-width" id="ref-for-propdef-row-rule-width①"><'row-rule-width'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any②">||</a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-style" id="ref-for-propdef-row-rule-style①"><'row-rule-style'></a> <span id="ref-for-comb-any③">||</span> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-color" id="ref-for-propdef-row-rule-color①"><'row-rule-color'></a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>see individual properties + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + </table> + <p class="issue" id="issue-53073ff7"><a class="self-link" href="#issue-53073ff7"></a> lots of new possible shorthands... we now have many + properties (and shorthands) with a <span class="css">column-rule</span> and <span class="css">row-rule</span> prefix. + Should we add shorthands for some of those with a <a class="property" data-link-type="propdesc">rule</a> prefix to specify + both axes, like so: 'rule-foo: <span class="production"><row-rule-foo></span> <span class="production"><column-rule-foo></span>?'. + As usual, we have to be careful with the separator though, to make it + forward-compatible with any changes we might want to make...</p> + <h2 class="heading settled" data-level="5" id="rule-align"><span class="secno">5. </span><span class="content">Rule Alignment</span><a class="self-link" href="#rule-align"></a></h2> + <h3 class="heading settled" data-level="5.1" id="column-rule-align"><span class="secno">5.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-align" id="ref-for-propdef-column-rule-align">column-rule-align</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-align" id="ref-for-propdef-row-rule-align">row-rule-align</a> Properties</span><a class="self-link" href="#column-rule-align"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-align"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-align">column-rule-align</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-align">row-rule-align</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod">[gap <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> gap-center <span id="ref-for-comb-one①③">|</span> gap-over <span id="ref-for-comb-one①④">|</span> rule <span id="ref-for-comb-one①⑤">|</span> rule-center <span id="ref-for-comb-one①⑥">|</span> rule-over]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{1,2}</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>gap + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①③">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①③">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①③">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①③">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①③">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>N/A + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>the specified value + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>discrete + </table> + <p>These properties specify the start/end attachment point of the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①②">rule containing rectangle</a> in the <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis④">longitudinal axis</a>. The start value is specified first, the end value second. + If only one value is specified it is used for both start and end. + These properties are only used for interior edges. The <a class="property" data-link-type="propdesc">*-rule-edge-align</a> properties + described below specify the alignment on the outer edges. The initial value, <span class="css">gap</span>, + means that, by default, a rule will stretch its longitudinal size to fill the space + from the end of the gap "above" to the start of the gap "below" ("above" meaning the gap + in the orthogonal axis on the rule’s start side).</p> + <aside class="example" id="example-d52ec54e"> + <a class="self-link" href="#example-d52ec54e"></a> This <a href="examples/grid-align-001.html">example</a> illustrates a few alignment options. + Note that the row rules all have a 1px longitudinal inset + to separate the individual rule segments. (<span class="css">rule-center</span>, + for example, would otherwise look like one long rule) + <p>Note also that the column rule is intentionally not centered in + the gap (to separate the <span class="css">rule-center</span> position + from the <span class="css">gap-center</span> position)</p> + <figure> + <img height="596" src="media/grid-align-001.png" width="692"> + <figcaption> Example of <a class="property" data-link-type="propdesc" href="#propdef-row-rule-align" id="ref-for-propdef-row-rule-align①">row-rule-align</a> in a grid container. </figcaption> + </figure> + <p>You might be wondering if there’s a bug in the bottom-right example. + Why is the <span class="css">gap-over</span> not honored there? + That’s a non-interior rule edge and it’s controlled separately with <span class="css">row-rule-edge-align</span>, see below.</p> + </aside> + <h3 class="heading settled" data-level="5.2" id="column-rule-edge-align"><span class="secno">5.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-edge-align" id="ref-for-propdef-column-rule-edge-align">column-rule-edge-align</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-edge-align" id="ref-for-propdef-row-rule-edge-align">row-rule-edge-align</a> Properties</span><a class="self-link" href="#column-rule-edge-align"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-edge-align"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-edge-align">column-rule-edge-align</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-edge-align">row-rule-edge-align</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod">[gap <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> gap-center <span id="ref-for-comb-one①⑧">|</span> gap-over]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range②">{1,2}</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>gap + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①④">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①④">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①④">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①④">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①④">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>N/A + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>the specified value + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>discrete + </table> + <p>These properties specify the start/end attachment point of the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①③">rule containing rectangle</a> in the <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis⑤">longitudinal axis</a> for the outer edges only. That is, the start edge of the first rule + and the end edge of the last rule (which may be the same rule). + The start value is specified first, the end value second. If only one value is specified it + is used for both start and end. (Attachment points for the interior rule edges are + specified with the <a href="#column-rule-align"><a class="property" data-link-type="propdesc">*-rule-align</a></a> properties above.)</p> + <p class="note" role="note"><span>Note:</span> The <span class="css">rule</span>/<span class="css">rule-center</span>/<span class="css">rule-over</span> keywords are omitted here (compared with <span class="css">column-rule-align</span>) since there are no rules in the edge gutters.</p> + <p>The figure below illustrates the alignment values. + The red values are used for the top column rule’s start edge and the yellow + values are used for its end edge. The yellow values are also used for the bottom + column rule’s start edge. However, in this + case the roles of <span class="css">gap</span> / <span class="css">gap-over</span> and <span class="css">rule</span> / <span class="css">rule-over</span> are swapped. It’s only the + center values that are shared. Also note that <span class="css">gap-center</span> isn’t necessarily aligned with <span class="css">rule-center</span>. In this case they aren’t + aligned because the row rule (purple) is using a lateral start inset. The cyan colored + values are used for the bottom column border’s end edge. (If the top border were to + stretch over the entire grid, then they would be used for its end edge.)</p> + <p><span class="css">column-rule-edge-align</span> controls which of the red and cyan colored + attachment points should be used. <span class="css">column-rule-edge-align</span> the yellow colored + ones (and all other interior edges if there were more rows).</p> + <figure> + <img height="585" src="media/rule-alignment-values.png" width="621"> + <figcaption> Illustration of rule alignment values. </figcaption> + </figure> + <p>Here’s the rule styling used for the above example:</p> +<pre class="language-css highlight"> <c- k>column-rule</c-><c- p>:</c-> <c- m>14</c-><c- k>px</c-> solid blue<c- p>;</c-> + <c- k>column-rule-align</c-><c- p>:</c-> rule-center rule<c- p>;</c-> + <c- k>column-rule-edge-align</c-><c- p>:</c-> gap-center gap-over<c- p>;</c-> + + <c- k>row-rule</c-><c- p>:</c-> <c- m>16</c-><c- k>px</c-> solid #7000ff<c- p>;</c-> + <c- k>row-rule-lateral-inset-start</c-><c- p>:</c-> <c- m>30</c-><c- k>px</c-><c- p>;</c-> +</pre> + <p>The alignment points follow the same pattern in the other axis for the row rules. + In this case the row rule is using the initial values (<span class="css">gap</span>) + so they align with the inline axis gap edges.</p> + <p class="issue" id="issue-13842b6f"><a class="self-link" href="#issue-13842b6f"></a> Are there use cases for other box-related edge attachment points? + e.g. 'padding | padding-center | padding-over | border...'</p> + <h2 class="heading settled" data-level="6" id="rule-extent"><span class="secno">6. </span><span class="content">Rule Extent</span><a class="self-link" href="#rule-extent"></a></h2> + <h3 class="heading settled" data-level="6.1" id="column-rule-extent"><span class="secno">6.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent">column-rule-extent</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent">row-rule-extent</a> Properties</span><a class="self-link" href="#column-rule-extent"></a></h3> + <table class="def propdef" data-link-for-hint="column-rule-extent"> + <tbody> + <tr> + <th>Name: + <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-extent">column-rule-extent</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-extent">row-rule-extent</dfn> + <tr class="value"> + <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> + <td class="prod">[segment <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> start <span id="ref-for-comb-one②⓪">|</span> end <span id="ref-for-comb-one②①">|</span> short <span id="ref-for-comb-one②②">|</span> long <span id="ref-for-comb-one②③">|</span> all-start <span id="ref-for-comb-one②④">|</span> all-end <span id="ref-for-comb-one②⑤">|</span> all-short <span id="ref-for-comb-one②⑥">|</span> all-long ] allow-overlap<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a> + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> + <td>long + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> + <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⑤">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑤">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑤">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①⑤">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①⑤">table-row-group</a> containers + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> + <td>no + <tr> + <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> + <td>N/A + <tr> + <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> + <td>the specified value + <tr> + <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> + <td>per grammar + <tr> + <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> + <td>discrete + </table> + <p class="issue" id="issue-70dc1ba4"><a class="self-link" href="#issue-70dc1ba4"></a> perhaps make <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-box-4/#valdef-margin-trim-all" id="ref-for-valdef-margin-trim-all">all</a> a separate keyword? like so: <span class="css">[segment | [[start | end | short | long] all?] ] allow-overlap?</span></p> + <p>These properties specify the extent of the rule in its <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis⑥">longitudinal axis</a>. <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="segment">segment</dfn> is an abstract term to describe the distance between two consecutive gaps. + An extent can cover one or more segments and the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="extent-size">extent size</dfn> is the distance between + the start position of the first of those segments and the end position of the last segment. + We’ll define <span class="css">segment</span> in more detail in the container-specific sub-sections that follow.</p> + <p>The <span class="css">allow-overlap</span> only affects rules in grid and table layout with spanning items/cells. + It controls whether a rule should continue through such a span.</p> + <p class="note" role="note"><span>Note:</span> It’s only an item’s <a href="https://drafts.csswg.org/css-grid/#grid-span">grid span</a> that are considered when determining if an item is spanning or not, not its layout position or size.</p> + <p>The <span class="css">all-*</span> values makes a rule extend over all segments in an axis, + subject to not being interrupted by a span. In grid and table layout, where the tracks/table groups/rows + all have the same length in a rule’s longitudinal axis, all the <span class="css">all-*</span> have + the same behavior. They are intended for flexbox and masonry layout, where the gaps may fall at different + positions in adjacent flex lines and masonry tracks.</p> + <p>The lateral position of a rule is determined by its first segment.</p> + <p>The following sub-sections will describe the rule extent for each type of layout container in more detail.</p> + <h4 class="heading settled" data-level="6.1.1" id="rule-extent-grid"><span class="secno">6.1.1. </span><span class="content">Grid Containers</span><a class="self-link" href="#rule-extent-grid"></a></h4> + <p>In a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑥">grid container</a>, gaps are placed between tracks, so the <span class="css">segment</span> value maps to the extent of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-cell" id="ref-for-grid-cell">grid cell</a>.</p> + <p>This <a href="examples/grid-segment-001.html">example</a> illustrates <span class="css">segment</span> rules. + Note that rules are generated in all gaps, whether there are items in a grid cell or not.</p> + <aside class="example" id="example-9ccc5773"> + <a class="self-link" href="#example-9ccc5773"></a> + <figure> + <img height="228" src="media/grid-segment-001.png" width="312"> + <figcaption> Example of column and row rules with <span class="css">segment</span> extent in a grid container. </figcaption> + </figure> + </aside> + <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#collapsed-track" id="ref-for-collapsed-track">Collapsed tracks</a> don’t count -- they don’t generate gaps and thus don’t have gap rules. + They generally behave as if they don’t exist as far as rules are concerned. + The <a href="examples/grid-segment-002.html">example</a> below also + illustrates that the position and size of the items don’t affect the rules; it’s only the position and size + of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-cell" id="ref-for-grid-cell①">grid cells</a> that count.</p> + <aside class="example" id="example-9818bbbb"> + <a class="self-link" href="#example-9818bbbb"></a> + <figure> + <img height="228" src="media/grid-segment-002.png" width="608"> + <figcaption> Example of column and row rules with in a grid container with <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#collapsed-track" id="ref-for-collapsed-track①">collapsed tracks</a>. </figcaption> + </figure> + </aside> + <p>Rules behave symmetrically in the grid axes, but a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-3/#masonry-axis" id="ref-for-masonry-axis">masonry axis</a> in a <a href="https://drafts.csswg.org/css-grid-3">masonry grid layout</a> behaves + differently; we’ll cover that case in a separate <a href="#rule-extent-masonry">section</a> later.</p> + <p>In a grid axis, rules are created between adjacent (non-collapsed) tracks and their <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size">extent sizes</a> are controlled by the <span class="css">column-rule-extent</span>/<span class="css">row-rule-extent</span> values as follows:</p> + <dl> + <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-segment">segment<a class="self-link" href="#valdef-row-rule-extent-segment"></a></dfn> + <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①">extent size</a> is the size of <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-cell" id="ref-for-grid-cell②">grid cell</a> in the relevant axis + <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-start">start<a class="self-link" href="#valdef-row-rule-extent-start"></a></dfn> + <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size②">extent size</a> is the size of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span">next grid cell span</a> in the start-most of the two adjacent tracks + <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-end">end<a class="self-link" href="#valdef-row-rule-extent-end"></a></dfn> + <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size③">extent size</a> is the size of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span①">next grid cell span</a> in the end-most of the two adjacent tracks + <dt><dfn class="dfn-paneled css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-short">short</dfn> + <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size④">extent size</a> is the smaller of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span②">next grid cell span</a> sizes of the two adjacent tracks + <dt><dfn class="dfn-paneled css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-long">long</dfn> + <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑤">extent size</a> is the larger of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span③">next grid cell span</a> sizes of the two adjacent tracks + <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-all-start">all-start<a class="self-link" href="#valdef-row-rule-extent-all-start"></a></dfn>, <dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-all-end">all-end<a class="self-link" href="#valdef-row-rule-extent-all-end"></a></dfn>, <dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-all-short">all-short<a class="self-link" href="#valdef-row-rule-extent-all-short"></a></dfn>, <dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-all-long">all-long<a class="self-link" href="#valdef-row-rule-extent-all-long"></a></dfn> + <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑥">extent size</a> is the length of the track in the relevant axis + (they all behave the same because all tracks in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid" id="ref-for-grid">grid</a> axis have the same size) + <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-allow-overlap">allow-overlap<a class="self-link" href="#valdef-row-rule-extent-allow-overlap"></a></dfn> + <dd>controls whether the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span④">next grid cell span</a> stops short of a cell which has an item spanning + over the gap (see the <a href="#rule-extent-grid-algorithm">algorithm</a> below) + </dl> + <p>The following algorithm determines the rule segments to create in an axis and their <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑦">extent sizes</a>. + For each pair of adjacent tracks, we first find the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="next-grid-cell-span">next grid cell span</dfn> for + each track. Then select one of those per the property values above.</p> + <p>For each pair of adjacent tracks, start by setting each track’s <var>current cell</var> to + be its first cell in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#implicit-grid" id="ref-for-implicit-grid">implicit grid</a>, then:</p> + <ol id="rule-extent-grid-algorithm"> + <li>if <span class="css">allow-overlap</span> was not specified, and the <var>current cell</var> in + the start-most of the pair of tracks contains an item that spans into the end-most of the tracks, + then skip this cell and let the <var>current cell</var> of each track be the cell after it, + then go to step 1 or exit if there are no more cells + <li>if the <span class="css">*-rule-extent</span> is one of the <span class="css">all-*</span> values, + then the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑤">next grid cell span</a> is the span of cells from the <var>current cell</var> to + last cell in the track (inclusive); if <span class="css">allow-overlap</span> was not specified, + then stop before the first (opposite axis) track that contains an item spanning between this + pair of tracks + <li>otherwise, if the <var>current cell</var> is empty, or <span class="css">*-rule-extent</span> is <span class="css">segment</span>, + then the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑥">next grid cell span</a> of that track is the <var>current cell</var> + <li>otherwise, if the <var>current cell</var> contains items that are spanning in the same axis, + then that track’s <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑦">next grid cell span</a> is the longest of those spans; + if <span class="css">allow-overlap</span> was not specified, then stop before + the first (opposite axis) track that contains an item spanning between this pair of tracks + <li> + create a rule segment with the following <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑧">extent size</a>: + <ol type="lower-alpha"> + <li>for <span class="css">short</span>(<span class="css">long</span>), + the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑨">extent size</a> is the length of the shortest(longest) of + the two <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑧">next grid cell spans</a> + <li>for <span class="css">start</span>(<span class="css">end</span>), + the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①⓪">extent size</a> is the length of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑨">next grid cell span</a> of the start-most(end-most) track + <li>for <span class="css">all-*</span>, + the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①①">extent size</a> is the length of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span①⓪">next grid cell span</a> (which is always the same for the two tracks) + </ol> + <li>set the <var>current cell</var> to the next cell, in each track, that is after the last cell + of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span①①">next grid cell span</a> that we picked in the steps above; exit if there are no more cells; + otherwise, go to step 1. + </ol> + <aside class="example" id="example-a07793b6"> + <a class="self-link" href="#example-a07793b6"></a> This <a href="examples/grid-extent-001.html">example</a> demonstrates the difference between + the <span class="css">row-rule-extent</span> values in a grid with spanning items. The grid has seven columns. + The grid items are semi-transparent to show any rules or overlapping items under them. + Item 7 for example has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-column" id="ref-for-propdef-grid-column">grid-column: 2 / span 3</a> and item 3 has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-row" id="ref-for-propdef-grid-row">grid-row: 1 / span 2</a>. + They are both forced to span into the cell in row 2, column 4 to illustrate what happens + when items span like this. + <figure> + <img height="811" src="media/grid-extent-001.png" width="805"> + <figcaption> Examples of <span class="css">row-rule-extent</span> in a grid container. </figcaption> + </figure> + </aside> + <h5 class="heading settled" data-level="6.1.1.1" id="rule-extent-subgrid"><span class="secno">6.1.1.1. </span><span class="content">Subgrid</span><a class="self-link" href="#rule-extent-subgrid"></a></h5> + <p>A subgrid creates its own set of gap rules. It uses its own gaps, which are centered with, but + may have a different size than the ancestor grid(s), as described in <a href="https://drafts.csswg.org/css-grid/#subgrids">subgrids</a>. + Other than that, rules are created inside a subgrid in the same way as in a regular grid.</p> + <p>A grid item that is a subgrid affects its parent grid’s rule formation exactly as + a regular non-subgrid item would (whether the parent is also a subgrid or not), + i.e. its span (if any) affects the <a href="#rule-extent-grid-algorithm">algorithm</a> above in the same way.</p> + <p><span class="css">allow-overlap</span> can be used in the parent to extend its rules under + the subgrid. The subgrid’s rules, if any, are rendered by the subgrid and thus render + on top of the parent, as usual.</p> + <p>When the subgrid determines its rule extents, it does not consider any items that + aren’t its own grid items, i.e. any items in an ancestor grid that have been placed into + the same grid cell that the subgrid occupies are not considered. Furthermore, it only uses + its own local gap and rule metrics for positioning and sizing its rules. It doesn’t + consider any gaps or rules that originate outside of the subgrid.</p> + <aside class="example" id="example-c3d8a4e8"> + <a class="self-link" href="#example-c3d8a4e8"></a> This <a href="examples/grid-subgrid-001.html">example</a> illustrates that + a subgrid uses its own local gap and rule metrics for positioning and sizing + its rules. It also shows what happens when a parent rule crosses a subgrid item. + <p>Note that the parent’s column rule passing through the subgrid is not used for + the <a class="css" data-link-type="propdesc" href="#propdef-row-rule-align" id="ref-for-propdef-row-rule-align②">row-rule-align: rule</a> in the subgrid. The subgrid is in fact completely + unaware of any parent rules.</p> + <figure> + <img height="256" src="media/grid-subgrid-001.png" width="826"> + <figcaption> Example of gap rules in a subgrid. </figcaption> + </figure> + </aside> + <h5 class="heading settled" data-level="6.1.1.2" id="rule-extent-masonry"><span class="secno">6.1.1.2. </span><span class="content">Masonry</span><a class="self-link" href="#rule-extent-masonry"></a></h5> + <p>Masonry layout has one grid axis (which may be <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#subgrid" id="ref-for-subgrid">subgridded</a>) and one <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-3/#masonry-axis" id="ref-for-masonry-axis①">masonry axis</a>. + The grid axis works the same as has been described above. The masonry axis is special + since an item is placed into a grid track based on the layout size of the items before + it, so they are typically not aligned over the tracks. Furthermore, + the grid tracks may have a different start position + (due to <span id="ref-for-masonry-axis②">masonry axis</span> <a href="https://drafts.csswg.org/css-grid-3/#tracks-alignment">alignment</a>) + and size.</p> + <aside class="example" id="example-7a037cfa"> + <a class="self-link" href="#example-7a037cfa"></a> This <a href="examples/grid-masonry-001.html">example</a> illustrates a few + variations of rules in a masonry grid layout. All the grids have <a class="css" data-link-type="propdesc" href="#propdef-column-rule-edge-align" id="ref-for-propdef-column-rule-edge-align①">column-rule-edge-align: gap-over</a> to extend the edge rules out to + the content-box edge. + <figure> + <img height="785" src="media/grid-masonry-001.png" width="691"> + <figcaption> Example of gap rules in a masonry grid. </figcaption> + </figure> + </aside> + <aside class="example" id="example-a0ffc13c"> + <a class="self-link" href="#example-a0ffc13c"></a> This <a href="examples/grid-masonry-002.html">example</a> illustrates + some of the <a class="css" data-link-type="propdesc" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent①">column-rule-extent: all-*</a> values. + <figure> + <img height="772" src="media/grid-masonry-002.png" width="730"> + <figcaption> Example of gap rules in a masonry grid. </figcaption> + </figure> + </aside> + <p class="issue" id="issue-b6f1d65c"><a class="self-link" href="#issue-b6f1d65c"></a> TODO: add definition list and algorithm here...</p> + <p class="issue" id="issue-3e9abc31"><a class="self-link" href="#issue-3e9abc31"></a> is it useful to be able to create a rule extent for the <i>intersection</i> or <i>union</i> between two tracks, like so: <img height="435" src="media/masonry-all-shorter.png" style="display:block" width="701">It’s pretty easy to implement, fwiw... (I accidently implemented <span class="css">short</span>/<span class="css">long</span> like that before I realized it was inconsistent with how they work elsewhere). I think it’s a case that is unique to a masonry axis though, at least <i>currently</i>...</p> + <h4 class="heading settled" data-level="6.1.2" id="rule-extent-flexbox"><span class="secno">6.1.2. </span><span class="content">Flex Containers</span><a class="self-link" href="#rule-extent-flexbox"></a></h4> + <p>In a <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">row-oriented flex container</a>, + the <span class="css">row-rule-*</span> properties creates rules between flex lines, + and the <span class="css">column-rule-*</span> properties creates rules between <a href="css-flexbox">flex items</a> within a <a href="cs-flexbox">flex line</a>.</p> + <p>In <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">column-oriented flex container</a>, + the roles of <span class="css">row-rule-extent</span> and <span class="css">column-rule-extent</span> are swapped. For the rest of this sub-section we + will describe the row-oriented case (just swap column/row in the text below to get the column-oriented case).</p> + <p>Flex items can’t span multiple lines so there are no collisions possible for the main axis rules, + hence the <span class="css">allow-overlap</span> keyword is ignored in flex layout in the main axis. + A subsequent flex line is considered as a collision for the cross axis rules, i.e. a cross axis rule + has the extent of one flex line, unless <span class="css">allow-overlap</span> is used (together with + one the <span class="css">all-*</span> values). The reason is that items in different lines + typically don’t line up in a way that the gaps between items are aligned across the lines + (unless an author is very careful to arrange that), so this is to have a safe default behavior.</p> + <p><span class="css">all-long allow-overlap</span> can be used to override that and + the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①②">extent size</a> is then from the cross axis start edge of the first flex line + to the cross axis end edge of the last flex line (all the <span class="css">all-*</span> behave the same). + Only the first flex line creates column rules in this case, + and the rule’s lateral position is taken from the gap in the first line.</p> + <p><strong class="advisement"> Authors are advised to <strong>not</strong> use the <span class="css">allow-overlap</span> value in + the main axis of a multi-line flex container since it’s likely to make items + on subsequent lines overlap the rules. It may be used when all flex items are + guaranteed to have the exact same main axis <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size">outer size</a> and align such that + the gaps are aligned between all the lines.</strong></p> + <p>Rules are created between adjacent flex lines, and their <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①③">extent sizes</a> are controlled by + the <span class="css">row-rule-extent</span> values defined as follows:</p> + <dl> + <dt>segment + <dd>behaves as <a class="css" data-link-type="maybe" href="#valdef-row-rule-extent-short" id="ref-for-valdef-row-rule-extent-short">short</a> + <dt>start + <dd>use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size①">outer size</a> of the items in the flex line on the block axis start side + <dt>end + <dd>use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size②">outer size</a> of the items in the flex line on the block axis end side + <dt>short + <dd>use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size③">outer size</a> of the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item">next flex line item</a> which has the smaller size (see detailed algorithm below) + <dt>long + <dd>use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size④">outer size</a> of the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item①">next flex line item</a> which has the larger size (see detailed algorithm below) + <dt>all-start + <dd>the distance between the start position of the first item to the end position of the last item on the start side flex line + <dt>all-end + <dd>the distance between the start position of the first item to the end position of the last item on the end side flex line + <dt>all-short + <dd>the distance between the end-most start position of the first item on each flex line to the start-most end position of the last item on each flex line + <dt>all-long + <dd>the distance between the start-most start position of the first item on each flex line to the end-most end position of the last item on each flex line + <dt>allow-overlap + <dd>is ignored in this axis since flex items can’t span between flex lines so there are no collisions (as defined in this spec) + </dl> + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="next-flex-line-item">next flex line item</dfn> is assigned by the following algorithm. + For each pair of adjacent flex lines, start with assigning the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item②">next flex line item</a> to + the first item (in <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#order-modified-document-order" id="ref-for-order-modified-document-order">order-modified document order</a>) on the respective line, then:</p> + <ol id="rule-extent-flexbox-algorithm" start="0"> + <li>exit if neither line has a <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item③">next flex line item</a> + <li> + <ol type="lower-alpha"> + <li>if only one line has a <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item④">next flex line item</a> then pick that item and go to 2 + <li>if either of the two <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item⑤">next flex line items</a> has a start position that is + beyond the other item’s end position, then pick the start-most item and go to 2. + <li>otherwise, pick the item with the smallest(largest) <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size⑤">outer size</a> for <a class="css" data-link-type="maybe" href="#valdef-row-rule-extent-short" id="ref-for-valdef-row-rule-extent-short①">short</a>(<a class="css" data-link-type="maybe" href="#valdef-row-rule-extent-long" id="ref-for-valdef-row-rule-extent-long">long</a>) + </ol> + <li>use the picked item’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size⑥">outer size</a> as this rule segment’s <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①④">extent size</a>, then change + the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item⑥">next flex line item</a> for the picked item’s line to the next item on its line + <li>assign the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item⑦">next flex line item</a> for the other line to the next item on this line + that has an inline start position that is greater than the end position of the picked item + </ol> + <p>(start/end position and sizes above are referring to the item’s margin-box in + the rule’s longitudinal axis; the phrase "next item" refers to the next item + in <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#order-modified-document-order" id="ref-for-order-modified-document-order①">order-modified document order</a>)</p> + <aside class="example" id="example-374fda56"> + <a class="self-link" href="#example-374fda56"></a> Here are a few examples to illustrate the <span class="css">row-rule-extent</span> values. + <figure> + <img height="194" src="media/flexbox-extent-start-001.png" width="314"> + <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent①">row-rule-extent: start</a> <a href="examples/flexbox-extent-start-001.html">example</a>. </figcaption> + </figure> + <figure> + <img height="194" src="media/flexbox-extent-end-001.png" width="314"> + <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent②">row-rule-extent: end</a> <a href="examples/flexbox-extent-end-001.html">example</a>. </figcaption> + </figure> + <figure> + <img height="194" src="media/flexbox-extent-long-001.png" width="314"> + <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent③">row-rule-extent: long</a> <a href="examples/flexbox-extent-long-001.html">example</a>. </figcaption> + </figure> + <figure> + <img height="194" src="media/flexbox-extent-all-short-001.png" width="314"> + <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent④">row-rule-extent: all-short</a> <a href="examples/flexbox-extent-all-short-001.html">example</a>. </figcaption> + </figure> + <figure> + <img height="194" src="media/flexbox-extent-all-long-001.png" width="314"> + <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent⑤">row-rule-extent: all-long</a> <a href="examples/flexbox-extent-all-long-001.html">example</a>. </figcaption> + </figure> + </aside> + <aside class="example" id="example-b631e64a"> + <a class="self-link" href="#example-b631e64a"></a> This is an <a href="examples/flexbox-extent-all-long-allow-overlap-001.html">example</a> to illustrate + what happens when an <a class="css" data-link-type="propdesc" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent②">column-rule-extent: all-long allow-overlap</a> rule is + used and the gaps aren’t aligned. (The flex items are semi-transparent + to show the column rules underneath). + <figure> + <img height="194" src="media/flexbox-extent-all-long-allow-overlap-001.png" width="314"> + <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent③">column-rule-extent: all-long allow-overlap</a> example. </figcaption> + </figure> + </aside> + <h4 class="heading settled" data-level="6.1.3" id="rule-extent-table"><span class="secno">6.1.3. </span><span class="content">Table Containers</span><a class="self-link" href="#rule-extent-table"></a></h4> + <p>A <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①⑥">table</a> container creates rules between its <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-column-group" id="ref-for-table-column-group">table-column-groups</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①⑥">table-row-groups</a>. <a href="https://drafts.csswg.org/css-tables/#visibility-collapse-rendering">Collapsed</a> column-groups and row-groups are treated as if they don’t exist. + Column rules (between <span id="ref-for-table-column-group①">table-column-groups</span>) collide with <span id="ref-for-table-row-group①⑦">table-row-groups</span>. + Row rules (between <span id="ref-for-table-row-group①⑧">table-row-groups</span>) collide with <span id="ref-for-table-column-group②">table-column-groups</span>. + The <span class="css">allow-overlap</span> can be used to create rules that extend over + the entire column/row length. Given that all <span id="ref-for-table-column-group③">table-column-groups</span> have the same block + axis size and all <span id="ref-for-table-row-group①⑨">table-row-groups</span> have same the inline axis size, + the <span class="css">short</span>/<span class="css">long</span>/<span class="css">start</span>/<span class="css">end</span> keywords behave the same. Ditto for the <span class="css">all-*</span> keywords.</p> + <aside class="example" id="example-5015561d"> + <a class="self-link" href="#example-5015561d"></a> Note, column 2 is collapsed in this example. + <figure> + <img height="346" src="media/table-rules-001.png" width="818"> + <figcaption> An <a href="examples/table-rules-001.html">example</a> of table rules. </figcaption> + </figure> + </aside> + <p class="issue" id="issue-0ca7394a"><a class="self-link" href="#issue-0ca7394a"></a> sort out if non-collapsed column-groups that only contain collapsed columns should generate rules, ditto row-groups/rows</p> + <h4 class="heading settled" data-level="6.1.4" id="rule-extent-table-row-group"><span class="secno">6.1.4. </span><span class="content">Table Row Group Containers</span><a class="self-link" href="#rule-extent-table-row-group"></a></h4> + <p>A <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group②⓪">table-row-group</a> container creates rules between its <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row" id="ref-for-table-row">table-rows</a> and between each <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-cell" id="ref-for-table-cell">table-cell</a> in a row. Collapsed <span id="ref-for-table-row①">table-rows</span> are treated as if they don’t exist. + Collapsed <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-column" id="ref-for-table-column">table-columns</a> are treated as if they don’t exist.</p> + <p>Row rules (between <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row" id="ref-for-table-row②">table-rows</a>) collide with cells that have + a row <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#span" id="ref-for-span">span</a> crossing it. + Column rules (between <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-cell" id="ref-for-table-cell①">table-cells</a>) collide with cells that have + a column <span id="ref-for-span①">span</span> crossing it. <span class="css">allow-overlap</span> can be used to create rules that + extend over such spanning cells.</p> + <aside class="example" id="example-2d35e879"> + <a class="self-link" href="#example-2d35e879"></a> This <a href="examples/table-row-group-rules-001.html">example</a> illustrates rules between + table rows and cells. And also what happens when the table rules from + the last example is also applied. + <figure> + <img height="784" src="media/table-row-group-rules-001.png" width="879"> + <figcaption> Example of table row and cell rules. </figcaption> + </figure> + </aside> + <p><span class="css">visibility:collapse</span> on <a data-link-type="dfn">table-cells</a> does not affect the rules in any way.</p> + <h4 class="heading settled" data-level="6.1.5" id="rule-extent-multicol"><span class="secno">6.1.5. </span><span class="content">Multi-Column Containers</span><a class="self-link" href="#rule-extent-multicol"></a></h4> + <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⑥">Multi-column containers</a> already support rendering column rules between their columns. + That’s now extended with all the new features described above. The changes described + above are backwards-compatible with existing web content that use <i>valid</i> <span class="css">column-rule</span> style values. Some previously <i>invalid</i> <span class="css">column-rule</span> values are now <i>valid</i> though, which could cause problems. For example, <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width④">column-rule-width: 100%</a>, which + previously would not parse, will now start doing something.</p> + <p>The <span class="css">row-rule-*</span> properties apply to <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⑦">multi-column containers</a>, and create + row rules between <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-line">multicol lines</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#spanner" id="ref-for-spanner">spanners</a>, + separating them in the block axis.</p> + <p>The <a data-link-type="dfn" href="#segment" id="ref-for-segment">segments</a> are the columns and the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-box-4/#valdef-box-margin-box" id="ref-for-valdef-box-margin-box">margin-box</a> of <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#spanner" id="ref-for-spanner①">spanners</a>.</p> + <p class="issue" id="issue-409a7220"><a class="self-link" href="#issue-409a7220"></a> this proposal makes the assumption that the related proposal that <span class="css">row-gap</span> should apply to multi-column containers is also adopted + (<a href="https://github.com/w3c/csswg-drafts/issues/6746">issue #6746</a>).</p> + <aside class="example" id="example-b0c3427d"> + <a class="self-link" href="#example-b0c3427d"></a> This <a href="examples/multicol-row-rule-001.html">example</a> illustrates rules in + a multi-column container. + <figure> + <img height="854" src="media/multicol-row-rule-001.png" width="827"> + <figcaption> Example of column and row rules in a multi-column. </figcaption> + </figure> + </aside> + <aside class="example" id="example-1f836c9e"> + <a class="self-link" href="#example-1f836c9e"></a> If <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⑧">multi-column containers</a> add support for + 'column-span: <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value"><integer></a>' some time in the future, + this is how row rules will work: + <figure> + <img height="195" src="media/multicol-colspan-2.png" width="808"> + <figcaption> Example of <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-2/#propdef-column-span" id="ref-for-propdef-column-span">column-span: 2</a> in a multi-column with column and row rules. </figcaption> + </figure> + </aside> + <h2 class="heading settled" data-level="7" id="rule-containing-rectangle"><span class="secno">7. </span><span class="content">The Rule Containing Rectangle</span><a class="self-link" href="#rule-containing-rectangle"></a></h2> + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="rule-containing-rectangle①">rule containing rectangle</dfn> is formed by the <a href="#rule-extent">rule extent</a> and <a href="#rule-align">alignment</a> in the <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis⑦">longitudinal axis</a>, and by the size of the <a href="https://drafts.csswg.org/css-align/#gutter">gutter</a> in the <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis④">lateral axis</a>. + (For clarity, the size of the gutter is calculated from the <a href="https://drafts.csswg.org/css-align/#gaps">gap</a> properties plus any extra space contributed by <a href="https://drafts.csswg.org/css-align/#distribution-values">alignment distribution</a> but does not include any item margins.)</p> + <p>It is important to note that the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①④">rule containing rectangle’s</a> size in an axis isn’t affected by any of + the <a href="#column-rule-lateral-inset">inset properties</a> <i>in the same axis</i> as that would lead to a circular + dependency when resolving inset percentage values. (The <span id="ref-for-rule-containing-rectangle①①⑤">rule containing rectangle</span> is the percentage basis + for all the rule properties which take percentage values.) However, a rule that uses <a class="css" data-link-type="propdesc" href="#propdef-column-rule-align" id="ref-for-propdef-column-rule-align①">column-rule-align: rule | rule-center | rule-over</a> is affected by the <a href="#column-rule-lateral-inset">lateral inset properties</a> of the rule it aligns to in the <i>opposite axis</i>.</p> + <p>Here’s an illustration of the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①⑥">rule containing rectangle</a> (the dashed green rectangle) for the top blue rule. + This is a 2x2 grid using the default extent, so the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①⑤">extent size</a> is the row’s block size. + It has the following non-default rule properties:</p> +<pre class="language-css highlight"> <c- k>column-rule</c-><c- p>:</c-> <c- m>14</c-><c- k>px</c-> solid blue<c- p>;</c-> + <c- k>column-rule-align</c-><c- p>:</c-> rule<c- p>;</c-> + <c- k>column-rule-edge-align</c-><c- p>:</c-> gap-center<c- p>;</c-> + <c- k>column-rule-longitudinal-inset-end</c-><c- p>:</c-> <c- m>8</c-><c- k>px</c-><c- p>;</c-> + + <c- k>row-rule</c-><c- p>:</c-> <c- m>6</c-><c- k>px</c-> solid black<c- p>;</c-> + <c- k>row-rule-lateral-inset-start</c-><c- p>:</c-> <c- m>20</c-><c- k>px</c-><c- p>;</c-> +</pre> + <figure> + <img height="584" src="media/rule-containing-rectangle.png" width="620"> + <figcaption> The Rule Containing Rectangle </figcaption> + </figure> + <p>Note that the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①⑦">rule containing rectangle</a> extends to the start of the black horizontal rule, which has a <span class="css">20px</span> lateral inset (making it non-centered). We align to its start with <a class="css" data-link-type="propdesc" href="#propdef-column-rule-align" id="ref-for-propdef-column-rule-align②">column-rule-align: rule</a>. From there, + we move the bottom edge of the blue rule up by <span class="css">8px</span> with <a class="css" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset-end" id="ref-for-propdef-column-rule-longitudinal-inset-end①">column-rule-longitudinal-inset-end: 8px</a>. + The default <a class="css" data-link-type="propdesc" href="#propdef-column-rule-length" id="ref-for-propdef-column-rule-length①">column-rule-length: auto</a> then fills the resulting area. If we were to use <span class="css" id="ref-for-propdef-column-rule-length②">column-rule-length: 100%</span> here instead, then the rule would fill the <span id="ref-for-rule-containing-rectangle①①⑧">rule containing rectangle</span> vertically, since that’s its percentage basis. (The end inset would then be ignored since the start inset + is zero by default so the situation is over-constrained, and we resolve by ignoring the end inset, per the <a href="#rule-sizing">sizing rules</a>.)</p> + <h2 class="heading settled" data-level="8" id="rule-painting-order"><span class="secno">8. </span><span class="content">Rule Painting Order</span><a class="self-link" href="#rule-painting-order"></a></h2> + <p>Column and row rules are painted in the same layer as the element’s border. + They are painted after (on top of) the element’s border. + All column rules for an element are painted first, then all of its row rules. + The rules for an axis are painted in the order they were generated by + the <a href="#rule-extent">rule extent</a> algorithms described above. + Typically from the logical start to the end of the axis.</p> + <p>For table layout, all the <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①⑦">table</a> rules (in both axes) + are painted before the rules for the row-groups. The painting order between + multiple row-groups is whatever the <a href="https://drafts.csswg.org/css-tables">table spec</a> specifies. For an individual row-group, the rules are painted in logical + start to end order in both axes.</p> + <p>Again, note that for a specific fragment, <strong>all the column rules are painted before all the row rules</strong>, + the above merely tries to clarify the painting order of the rules for + a specific axis.</p> + <h2 class="heading settled" data-level="9" id="rule-overflow"><span class="secno">9. </span><span class="content">Rule Overflow</span><a class="self-link" href="#rule-overflow"></a></h2> + <p>The column and row rule areas contributes to a fragment’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow" id="ref-for-ink-overflow">ink overflow</a>. + Note that they can overflow an fragment’s border-box due to negative inset + values etc.</p> + <aside class="example" id="example-13dcb258"> + <a class="self-link" href="#example-13dcb258"></a> Here’s an <a href="examples/grid-longitudinal-003.html">example</a> showing + rules that overflow their container and how they are clipped. + Both grids have large negative insets to extend the rules outside of the container. + The right grid has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow: hidden</a> which clips its rules at the padding area edge. + <figure> + <img height="680" src="media/grid-longitudinal-003.png" width="771"> + <figcaption> Examples of rule overflow and clipping. </figcaption> + </figure> + </aside> + <p>For clarity, none of the properties in this spec affects layout in any way. + Column and row rules are purely a painting effect.</p> + </main> + <h2 class="no-ref no-num heading settled" id="w3c-conformance"><span class="content"> Conformance</span><a class="self-link" href="#w3c-conformance"></a></h2> + <h3 class="no-ref heading settled" id="w3c-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#w3c-conventions"></a></h3> + <p>Conformance requirements are expressed with a combination of + descriptive assertions and RFC 2119 terminology. The key words “MUST”, + “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, + “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this + document are to be interpreted as described in RFC 2119. + However, for readability, these words do not appear in all uppercase + letters in this specification. </p> + <p>All of the text of this specification is normative except sections + explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p> + <p>Examples in this specification are introduced with the words “for example” + or are set apart from the normative text with <code>class="example"</code>, + like this: </p> + <div class="example" id="w3c-example"> + <a class="self-link" href="#w3c-example"></a> + <p>This is an example of an informative example.</p> + </div> + <p>Informative notes begin with the word “Note” and are set apart from the + normative text with <code>class="note"</code>, like this: </p> + <p class="note" role="note">Note, this is an informative note.</p> + <p> + Advisements are normative sections styled to evoke special attention and are + set apart from other normative text with <code><strong class="advisement"></code>, like + this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> + <details class="wpt-tests-block" dir="ltr" lang="en" open> + <summary>Tests</summary> + <p>Tests relating to the content of this specification + may be documented in “Tests” blocks like this one. + Any such block is non-normative.</p> + <ul class="wpt-tests-list"></ul> + <hr> + </details> + </p> + <h3 class="no-ref heading settled" id="w3c-conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#w3c-conformance-classes"></a></h3> + <p>Conformance to this specification + is defined for three conformance classes: </p> + <dl> + <dt>style sheet + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS + style sheet</a>. + <dt>renderer + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders + documents that use them. + <dt>authoring tool + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. + </dl> + <p>A style sheet is conformant to this specification + if all of its statements that use syntax defined in this module are valid + according to the generic CSS grammar and the individual grammars of each + feature defined in this module. </p> + <p>A renderer is conformant to this specification + if, in addition to interpreting the style sheet as defined by the + appropriate specifications, it supports all the features defined + by this specification by parsing them correctly + and rendering the document accordingly. However, the inability of a + UA to correctly render a document due to limitations of the device + does not make the UA non-conformant. (For example, a UA is not + required to render color on a monochrome monitor.) </p> + <p>An authoring tool is conformant to this specification + if it writes style sheets that are syntactically correct according to the + generic CSS grammar and the individual grammars of each feature in + this module, and meet all other conformance requirements of style sheets + as described in this module. </p> + <h3 class="no-ref heading settled" id="w3c-partial"><span class="content"> Partial implementations</span><a class="self-link" href="#w3c-partial"></a></h3> + <p>So that authors can exploit the forward-compatible parsing rules to + assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore + as appropriate</a>) any at-rules, properties, property values, keywords, + and other syntactic constructs for which they have no usable level of + support. In particular, user agents <strong>must not</strong> selectively + ignore unsupported component values and honor supported values in a single + multi-value property declaration: if any value is considered invalid + (as unsupported values must be), CSS requires that the entire declaration + be ignored.</p> + <h4 class="heading settled" id="w3c-conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#w3c-conform-future-proofing"></a></h4> + <p>To avoid clashes with future stable CSS features, + the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p> + <h3 class="no-ref heading settled" id="w3c-testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#w3c-testing"></a></h3> + <p>Once a specification reaches the Candidate Recommendation stage, + non-experimental implementations are possible, and implementors should + release an unprefixed implementation of any CR-level feature they + can demonstrate to be correctly implemented according to spec. </p> + <p>To establish and maintain the interoperability of CSS across + implementations, the CSS Working Group requests that non-experimental + CSS renderers submit an implementation report (and, if necessary, the + testcases used for that implementation report) to the W3C before + releasing an unprefixed implementation of any CSS features. Testcases + submitted to W3C are subject to review and correction by the CSS + Working Group. </p> + <p>Further information on submitting testcases and implementation reports + can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. + Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list.</p> +<script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> + <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> + <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> + <ul class="index"> + <li><a href="#valdef-row-rule-extent-all-end">all-end</a><span>, in § 6.1.1</span> + <li><a href="#valdef-row-rule-extent-all-long">all-long</a><span>, in § 6.1.1</span> + <li><a href="#valdef-row-rule-extent-allow-overlap">allow-overlap</a><span>, in § 6.1.1</span> + <li><a href="#valdef-row-rule-extent-all-short">all-short</a><span>, in § 6.1.1</span> + <li><a href="#valdef-row-rule-extent-all-start">all-start</a><span>, in § 6.1.1</span> + <li><a href="#propdef-column-rule-align">column-rule-align</a><span>, in § 5.1</span> + <li><a href="#propdef-column-rule-edge-align">column-rule-edge-align</a><span>, in § 5.2</span> + <li><a href="#propdef-column-rule-extent">column-rule-extent</a><span>, in § 6.1</span> + <li><a href="#propdef-column-rule-image">column-rule-image</a><span>, in § 2.4</span> + <li><a href="#propdef-column-rule-image-repeat">column-rule-image-repeat</a><span>, in § 2.3</span> + <li><a href="#propdef-column-rule-image-slice">column-rule-image-slice</a><span>, in § 2.2</span> + <li><a href="#propdef-column-rule-image-source">column-rule-image-source</a><span>, in § 2.1</span> + <li><a href="#propdef-column-rule-lateral-inset">column-rule-lateral-inset</a><span>, in § 3.5</span> + <li><a href="#propdef-column-rule-lateral-inset-end">column-rule-lateral-inset-end</a><span>, in § 3.3</span> + <li><a href="#propdef-column-rule-lateral-inset-start">column-rule-lateral-inset-start</a><span>, in § 3.3</span> + <li><a href="#propdef-column-rule-length">column-rule-length</a><span>, in § 3.2</span> + <li><a href="#propdef-column-rule-longitudinal-edge-inset">column-rule-longitudinal-edge-inset</a><span>, in § 3.9</span> + <li><a href="#propdef-column-rule-longitudinal-edge-inset-end">column-rule-longitudinal-edge-inset-end</a><span>, in § 3.8</span> + <li><a href="#propdef-column-rule-longitudinal-edge-inset-start">column-rule-longitudinal-edge-inset-start</a><span>, in § 3.8</span> + <li><a href="#propdef-column-rule-longitudinal-inset">column-rule-longitudinal-inset</a><span>, in § 3.7</span> + <li><a href="#propdef-column-rule-longitudinal-inset-end">column-rule-longitudinal-inset-end</a><span>, in § 3.6</span> + <li><a href="#propdef-column-rule-longitudinal-inset-start">column-rule-longitudinal-inset-start</a><span>, in § 3.6</span> + <li><a href="#valdef-row-rule-extent-end">end</a><span>, in § 6.1.1</span> + <li><a href="#extent-size">extent size</a><span>, in § 6.1</span> + <li><a href="#lateral-axis">lateral axis</a><span>, in § 1.3</span> + <li><a href="#valdef-row-rule-extent-long">long</a><span>, in § 6.1.1</span> + <li><a href="#longitudinal-axis">longitudinal axis</a><span>, in § 1.3</span> + <li><a href="#next-flex-line-item">next flex line item</a><span>, in § 6.1.2</span> + <li><a href="#next-grid-cell-span">next grid cell span</a><span>, in § 6.1.1</span> + <li><a href="#valdef-column-rule-image-slice-number-0"><number [0,∞]></a><span>, in § 2.2</span> + <li><a href="#valdef-column-rule-image-slice-percentage-0"><percentage [0,∞]></a><span>, in § 2.2</span> + <li><a href="#valdef-column-rule-image-repeat-repeat">repeat</a><span>, in § 2.3</span> + <li><a href="#valdef-column-rule-image-repeat-round">round</a><span>, in § 2.3</span> + <li><a href="#propdef-row-rule">row-rule</a><span>, in § 4.2</span> + <li><a href="#propdef-row-rule-align">row-rule-align</a><span>, in § 5.1</span> + <li><a href="#propdef-row-rule-color">row-rule-color</a><span>, in § 4.1</span> + <li><a href="#propdef-row-rule-edge-align">row-rule-edge-align</a><span>, in § 5.2</span> + <li><a href="#propdef-row-rule-extent">row-rule-extent</a><span>, in § 6.1</span> + <li><a href="#propdef-row-rule-image">row-rule-image</a><span>, in § 2.4</span> + <li><a href="#propdef-row-rule-image-repeat">row-rule-image-repeat</a><span>, in § 2.3</span> + <li><a href="#propdef-row-rule-image-slice">row-rule-image-slice</a><span>, in § 2.2</span> + <li><a href="#propdef-row-rule-image-source">row-rule-image-source</a><span>, in § 2.1</span> + <li><a href="#propdef-row-rule-lateral-inset">row-rule-lateral-inset</a><span>, in § 3.5</span> + <li><a href="#propdef-row-rule-lateral-inset-end">row-rule-lateral-inset-end</a><span>, in § 3.3</span> + <li><a href="#propdef-row-rule-lateral-inset-start">row-rule-lateral-inset-start</a><span>, in § 3.3</span> + <li><a href="#propdef-row-rule-length">row-rule-length</a><span>, in § 3.2</span> + <li><a href="#propdef-row-rule-longitudinal-edge-inset">row-rule-longitudinal-edge-inset</a><span>, in § 3.9</span> + <li><a href="#propdef-row-rule-longitudinal-edge-inset-end">row-rule-longitudinal-edge-inset-end</a><span>, in § 3.8</span> + <li><a href="#propdef-row-rule-longitudinal-edge-inset-start">row-rule-longitudinal-edge-inset-start</a><span>, in § 3.8</span> + <li><a href="#propdef-row-rule-longitudinal-inset">row-rule-longitudinal-inset</a><span>, in § 3.7</span> + <li><a href="#propdef-row-rule-longitudinal-inset-end">row-rule-longitudinal-inset-end</a><span>, in § 3.6</span> + <li><a href="#propdef-row-rule-longitudinal-inset-start">row-rule-longitudinal-inset-start</a><span>, in § 3.6</span> + <li><a href="#propdef-row-rule-style">row-rule-style</a><span>, in § 4.1</span> + <li><a href="#propdef-row-rule-width">row-rule-width</a><span>, in § 3.1</span> + <li><a href="#rule-containing-rectangle①">rule containing rectangle</a><span>, in § 7</span> + <li><a href="#rule-length">rule length</a><span>, in § 1.3</span> + <li> + segment + <ul> + <li><a href="#segment">definition of</a><span>, in § 6.1</span> + <li><a href="#valdef-row-rule-extent-segment">value for row-rule-extent</a><span>, in § 6.1.1</span> + </ul> + <li><a href="#valdef-row-rule-extent-short">short</a><span>, in § 6.1.1</span> + <li><a href="#valdef-column-rule-image-repeat-space">space</a><span>, in § 2.3</span> + <li><a href="#valdef-row-rule-extent-start">start</a><span>, in § 6.1.1</span> + <li><a href="#valdef-column-rule-image-repeat-stretch">stretch</a><span>, in § 2.3</span> + </ul> + <aside class="dfn-panel" data-for="term-for-typedef-line-style"> + <a href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-style">https://drafts.csswg.org/css-backgrounds-3/#typedef-line-style</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-typedef-line-style">4.1. The row-rule-style and row-rule-color Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-typedef-line-width"> + <a href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width">https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-typedef-line-width">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-typedef-line-width①">(2)</a> <a href="#ref-for-typedef-line-width②">(3)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-border-style"> + <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-border-style">2. Rule Images and Gradients</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-valdef-margin-trim-all"> + <a href="https://drafts.csswg.org/css-box-4/#valdef-margin-trim-all">https://drafts.csswg.org/css-box-4/#valdef-margin-trim-all</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-valdef-margin-trim-all">6.1. The column-rule-extent and row-rule-extent Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-valdef-box-margin-box"> + <a href="https://drafts.csswg.org/css-box-4/#valdef-box-margin-box">https://drafts.csswg.org/css-box-4/#valdef-box-margin-box</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-valdef-box-margin-box">6.1.5. Multi-Column Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-used-value"> + <a href="https://drafts.csswg.org/css-cascade-5/#used-value">https://drafts.csswg.org/css-cascade-5/#used-value</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-used-value">3.1. The column-rule-width and row-rule-width Properties</a> + <li><a href="#ref-for-used-value①">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-used-value②">3.3. The Rule Lateral Inset Properties</a> + <li><a href="#ref-for-used-value③">3.6. The Rule Longitudinal Inset Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-typedef-color"> + <a href="https://drafts.csswg.org/css-color-4/#typedef-color">https://drafts.csswg.org/css-color-4/#typedef-color</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-typedef-color">4.1. The row-rule-style and row-rule-color Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-opacity"> + <a href="https://drafts.csswg.org/css-color-4/#propdef-opacity">https://drafts.csswg.org/css-color-4/#propdef-opacity</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-opacity">3.6. The Rule Longitudinal Inset Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-order-modified-document-order"> + <a href="https://drafts.csswg.org/css-display-3/#order-modified-document-order">https://drafts.csswg.org/css-display-3/#order-modified-document-order</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-order-modified-document-order">6.1.2. Flex Containers</a> <a href="#ref-for-order-modified-document-order①">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-flex-container"> + <a href="https://drafts.csswg.org/css-flexbox-1/#flex-container">https://drafts.csswg.org/css-flexbox-1/#flex-container</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-flex-container">1.1. Overview</a> + <li><a href="#ref-for-flex-container①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> + <li><a href="#ref-for-flex-container②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + <li><a href="#ref-for-flex-container③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> + <li><a href="#ref-for-flex-container④">2.4. The column-rule-image and row-rule-image Shorthands</a> + <li><a href="#ref-for-flex-container⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-flex-container⑥">(2)</a> + <li><a href="#ref-for-flex-container⑦">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-flex-container⑧">3.3. The Rule Lateral Inset Properties</a> + <li><a href="#ref-for-flex-container⑨">3.6. The Rule Longitudinal Inset Properties</a> + <li><a href="#ref-for-flex-container①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> + <li><a href="#ref-for-flex-container①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-flex-container①②">(2)</a> + <li><a href="#ref-for-flex-container①③">5.1. The column-rule-align and row-rule-align Properties</a> + <li><a href="#ref-for-flex-container①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + <li><a href="#ref-for-flex-container①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-collapsed-track"> + <a href="https://drafts.csswg.org/css-grid-2/#collapsed-track">https://drafts.csswg.org/css-grid-2/#collapsed-track</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-collapsed-track">6.1.1. Grid Containers</a> <a href="#ref-for-collapsed-track①">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-grid"> + <a href="https://drafts.csswg.org/css-grid-2/#grid">https://drafts.csswg.org/css-grid-2/#grid</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-grid">6.1.1. Grid Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-grid-cell"> + <a href="https://drafts.csswg.org/css-grid-2/#grid-cell">https://drafts.csswg.org/css-grid-2/#grid-cell</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-grid-cell">6.1.1. Grid Containers</a> <a href="#ref-for-grid-cell①">(2)</a> <a href="#ref-for-grid-cell②">(3)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-grid-container"> + <a href="https://drafts.csswg.org/css-grid-2/#grid-container">https://drafts.csswg.org/css-grid-2/#grid-container</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-grid-container">1.1. Overview</a> + <li><a href="#ref-for-grid-container①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> + <li><a href="#ref-for-grid-container②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + <li><a href="#ref-for-grid-container③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> + <li><a href="#ref-for-grid-container④">2.4. The column-rule-image and row-rule-image Shorthands</a> + <li><a href="#ref-for-grid-container⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-grid-container⑥">(2)</a> + <li><a href="#ref-for-grid-container⑦">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-grid-container⑧">3.3. The Rule Lateral Inset Properties</a> + <li><a href="#ref-for-grid-container⑨">3.6. The Rule Longitudinal Inset Properties</a> + <li><a href="#ref-for-grid-container①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> + <li><a href="#ref-for-grid-container①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-grid-container①②">(2)</a> + <li><a href="#ref-for-grid-container①③">5.1. The column-rule-align and row-rule-align Properties</a> + <li><a href="#ref-for-grid-container①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + <li><a href="#ref-for-grid-container①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> + <li><a href="#ref-for-grid-container①⑥">6.1.1. Grid Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-grid-column"> + <a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-column">https://drafts.csswg.org/css-grid-2/#propdef-grid-column</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-grid-column">6.1.1. Grid Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-grid-row"> + <a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-row">https://drafts.csswg.org/css-grid-2/#propdef-grid-row</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-grid-row">6.1.1. Grid Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-implicit-grid"> + <a href="https://drafts.csswg.org/css-grid-2/#implicit-grid">https://drafts.csswg.org/css-grid-2/#implicit-grid</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-implicit-grid">6.1.1. Grid Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-subgrid"> + <a href="https://drafts.csswg.org/css-grid-2/#subgrid">https://drafts.csswg.org/css-grid-2/#subgrid</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-subgrid">6.1.1.2. Masonry</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-masonry-axis"> + <a href="https://drafts.csswg.org/css-grid-3/#masonry-axis">https://drafts.csswg.org/css-grid-3/#masonry-axis</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-masonry-axis">6.1.1. Grid Containers</a> + <li><a href="#ref-for-masonry-axis①">6.1.1.2. Masonry</a> <a href="#ref-for-masonry-axis②">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-typedef-image"> + <a href="https://drafts.csswg.org/css-images-3/#typedef-image">https://drafts.csswg.org/css-images-3/#typedef-image</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-typedef-image">2.1. The column-rule-image-source and row-rule-image-source Properties</a> <a href="#ref-for-typedef-image①">(2)</a> <a href="#ref-for-typedef-image②">(3)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-default-object-size"> + <a href="https://drafts.csswg.org/css-images-3/#default-object-size">https://drafts.csswg.org/css-images-3/#default-object-size</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-default-object-size">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-specified-size"> + <a href="https://drafts.csswg.org/css-images-3/#specified-size">https://drafts.csswg.org/css-images-3/#specified-size</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-specified-size">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-column-rule-width"> + <a href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width">https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-width">1.1. Overview</a> + <li><a href="#ref-for-propdef-column-rule-width①">1.2. Module Interactions</a> + <li><a href="#ref-for-propdef-column-rule-width②">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-propdef-column-rule-width③">(2)</a> + <li><a href="#ref-for-propdef-column-rule-width④">6.1.5. Multi-Column Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-multi-column-container"> + <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-container">https://drafts.csswg.org/css-multicol-1/#multi-column-container</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-multi-column-container">1.1. Overview</a> + <li><a href="#ref-for-multi-column-container①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> + <li><a href="#ref-for-multi-column-container②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + <li><a href="#ref-for-multi-column-container③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> + <li><a href="#ref-for-multi-column-container④">2.4. The column-rule-image and row-rule-image Shorthands</a> + <li><a href="#ref-for-multi-column-container⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-multi-column-container⑥">(2)</a> + <li><a href="#ref-for-multi-column-container⑦">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-multi-column-container⑧">3.3. The Rule Lateral Inset Properties</a> + <li><a href="#ref-for-multi-column-container⑨">3.6. The Rule Longitudinal Inset Properties</a> + <li><a href="#ref-for-multi-column-container①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> + <li><a href="#ref-for-multi-column-container①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-multi-column-container①②">(2)</a> + <li><a href="#ref-for-multi-column-container①③">5.1. The column-rule-align and row-rule-align Properties</a> + <li><a href="#ref-for-multi-column-container①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + <li><a href="#ref-for-multi-column-container①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> + <li><a href="#ref-for-multi-column-container①⑥">6.1.5. Multi-Column Containers</a> <a href="#ref-for-multi-column-container①⑦">(2)</a> <a href="#ref-for-multi-column-container①⑧">(3)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-multi-column-layout"> + <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-layout">https://drafts.csswg.org/css-multicol-1/#multi-column-layout</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-multi-column-layout">3.6. The Rule Longitudinal Inset Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-spanner"> + <a href="https://drafts.csswg.org/css-multicol-1/#spanner">https://drafts.csswg.org/css-multicol-1/#spanner</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-spanner">6.1.5. Multi-Column Containers</a> <a href="#ref-for-spanner①">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-column-span"> + <a href="https://drafts.csswg.org/css-multicol-2/#propdef-column-span">https://drafts.csswg.org/css-multicol-2/#propdef-column-span</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-span">6.1.5. Multi-Column Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-ink-overflow"> + <a href="https://drafts.csswg.org/css-overflow-3/#ink-overflow">https://drafts.csswg.org/css-overflow-3/#ink-overflow</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-ink-overflow">9. Rule Overflow</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-overflow"> + <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-overflow">9. Rule Overflow</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-left"> + <a href="https://drafts.csswg.org/css-position-3/#propdef-left">https://drafts.csswg.org/css-position-3/#propdef-left</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-left">3.3. The Rule Lateral Inset Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-right"> + <a href="https://drafts.csswg.org/css-position-3/#propdef-right">https://drafts.csswg.org/css-position-3/#propdef-right</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-right">3.3. The Rule Lateral Inset Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-outer-size"> + <a href="https://drafts.csswg.org/css-sizing-3/#outer-size">https://drafts.csswg.org/css-sizing-3/#outer-size</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-outer-size">6.1.2. Flex Containers</a> <a href="#ref-for-outer-size①">(2)</a> <a href="#ref-for-outer-size②">(3)</a> <a href="#ref-for-outer-size③">(4)</a> <a href="#ref-for-outer-size④">(5)</a> <a href="#ref-for-outer-size⑤">(6)</a> <a href="#ref-for-outer-size⑥">(7)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-width"> + <a href="https://drafts.csswg.org/css-sizing-3/#propdef-width">https://drafts.csswg.org/css-sizing-3/#propdef-width</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-width">3.3. The Rule Lateral Inset Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-span"> + <a href="https://drafts.csswg.org/css-tables-3/#span">https://drafts.csswg.org/css-tables-3/#span</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-span">6.1.4. Table Row Group Containers</a> <a href="#ref-for-span①">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-table"> + <a href="https://drafts.csswg.org/css-tables-3/#table">https://drafts.csswg.org/css-tables-3/#table</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-table">1.1. Overview</a> + <li><a href="#ref-for-table①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> + <li><a href="#ref-for-table②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + <li><a href="#ref-for-table③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> + <li><a href="#ref-for-table④">2.4. The column-rule-image and row-rule-image Shorthands</a> + <li><a href="#ref-for-table⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-table⑥">(2)</a> + <li><a href="#ref-for-table⑦">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-table⑧">3.3. The Rule Lateral Inset Properties</a> + <li><a href="#ref-for-table⑨">3.6. The Rule Longitudinal Inset Properties</a> + <li><a href="#ref-for-table①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> + <li><a href="#ref-for-table①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-table①②">(2)</a> + <li><a href="#ref-for-table①③">5.1. The column-rule-align and row-rule-align Properties</a> + <li><a href="#ref-for-table①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + <li><a href="#ref-for-table①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> + <li><a href="#ref-for-table①⑥">6.1.3. Table Containers</a> + <li><a href="#ref-for-table①⑦">8. Rule Painting Order</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-table-cell"> + <a href="https://drafts.csswg.org/css-tables-3/#table-cell">https://drafts.csswg.org/css-tables-3/#table-cell</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-table-cell">6.1.4. Table Row Group Containers</a> <a href="#ref-for-table-cell①">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-table-column"> + <a href="https://drafts.csswg.org/css-tables-3/#table-column">https://drafts.csswg.org/css-tables-3/#table-column</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-table-column">6.1.4. Table Row Group Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-table-column-group"> + <a href="https://drafts.csswg.org/css-tables-3/#table-column-group">https://drafts.csswg.org/css-tables-3/#table-column-group</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-table-column-group">6.1.3. Table Containers</a> <a href="#ref-for-table-column-group①">(2)</a> <a href="#ref-for-table-column-group②">(3)</a> <a href="#ref-for-table-column-group③">(4)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-table-row"> + <a href="https://drafts.csswg.org/css-tables-3/#table-row">https://drafts.csswg.org/css-tables-3/#table-row</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-table-row">6.1.4. Table Row Group Containers</a> <a href="#ref-for-table-row①">(2)</a> <a href="#ref-for-table-row②">(3)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-table-row-group"> + <a href="https://drafts.csswg.org/css-tables-3/#table-row-group">https://drafts.csswg.org/css-tables-3/#table-row-group</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-table-row-group">1.1. Overview</a> + <li><a href="#ref-for-table-row-group①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> + <li><a href="#ref-for-table-row-group②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + <li><a href="#ref-for-table-row-group③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> + <li><a href="#ref-for-table-row-group④">2.4. The column-rule-image and row-rule-image Shorthands</a> + <li><a href="#ref-for-table-row-group⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-table-row-group⑥">(2)</a> + <li><a href="#ref-for-table-row-group⑦">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-table-row-group⑧">3.3. The Rule Lateral Inset Properties</a> + <li><a href="#ref-for-table-row-group⑨">3.6. The Rule Longitudinal Inset Properties</a> + <li><a href="#ref-for-table-row-group①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> + <li><a href="#ref-for-table-row-group①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-table-row-group①②">(2)</a> + <li><a href="#ref-for-table-row-group①③">5.1. The column-rule-align and row-rule-align Properties</a> + <li><a href="#ref-for-table-row-group①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + <li><a href="#ref-for-table-row-group①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> + <li><a href="#ref-for-table-row-group①⑥">6.1.3. Table Containers</a> <a href="#ref-for-table-row-group①⑦">(2)</a> <a href="#ref-for-table-row-group①⑧">(3)</a> <a href="#ref-for-table-row-group①⑨">(4)</a> + <li><a href="#ref-for-table-row-group②⓪">6.1.4. Table Row Group Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-integer-value"> + <a href="https://drafts.csswg.org/css-values-4/#integer-value">https://drafts.csswg.org/css-values-4/#integer-value</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-integer-value">6.1.5. Multi-Column Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-typedef-length-percentage"> + <a href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">https://drafts.csswg.org/css-values-4/#typedef-length-percentage</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-typedef-length-percentage">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-typedef-length-percentage①">3.3. The Rule Lateral Inset Properties</a> + <li><a href="#ref-for-typedef-length-percentage②">3.6. The Rule Longitudinal Inset Properties</a> + <li><a href="#ref-for-typedef-length-percentage③">3.8. The Rule Longitudinal Edge Inset Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-number-value"> + <a href="https://drafts.csswg.org/css-values-4/#number-value">https://drafts.csswg.org/css-values-4/#number-value</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-number-value">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> <a href="#ref-for-number-value①">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-percentage-value"> + <a href="https://drafts.csswg.org/css-values-4/#percentage-value">https://drafts.csswg.org/css-values-4/#percentage-value</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-percentage-value">1.2. Module Interactions</a> + <li><a href="#ref-for-percentage-value①">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> <a href="#ref-for-percentage-value②">(2)</a> + <li><a href="#ref-for-percentage-value③">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-percentage-value④">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-mult-opt"> + <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-mult-opt">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> <a href="#ref-for-mult-opt①">(2)</a> + <li><a href="#ref-for-mult-opt②">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> <a href="#ref-for-mult-opt③">(2)</a> + <li><a href="#ref-for-mult-opt④">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a> <a href="#ref-for-mult-opt⑤">(2)</a> + <li><a href="#ref-for-mult-opt⑥">6.1. The column-rule-extent and row-rule-extent Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-mult-num-range"> + <a href="https://drafts.csswg.org/css-values-4/#mult-num-range">https://drafts.csswg.org/css-values-4/#mult-num-range</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-mult-num-range">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + <li><a href="#ref-for-mult-num-range①">5.1. The column-rule-align and row-rule-align Properties</a> + <li><a href="#ref-for-mult-num-range②">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-comb-one"> + <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-comb-one">2.1. The column-rule-image-source and row-rule-image-source Properties</a> + <li><a href="#ref-for-comb-one①">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + <li><a href="#ref-for-comb-one②">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> <a href="#ref-for-comb-one③">(2)</a> <a href="#ref-for-comb-one④">(3)</a> + <li><a href="#ref-for-comb-one⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-comb-one⑥">(2)</a> <a href="#ref-for-comb-one⑦">(3)</a> + <li><a href="#ref-for-comb-one⑧">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-comb-one⑨">3.3. The Rule Lateral Inset Properties</a> + <li><a href="#ref-for-comb-one①⓪">3.6. The Rule Longitudinal Inset Properties</a> + <li><a href="#ref-for-comb-one①①">3.8. The Rule Longitudinal Edge Inset Properties</a> + <li><a href="#ref-for-comb-one①②">5.1. The column-rule-align and row-rule-align Properties</a> <a href="#ref-for-comb-one①③">(2)</a> <a href="#ref-for-comb-one①④">(3)</a> <a href="#ref-for-comb-one①⑤">(4)</a> <a href="#ref-for-comb-one①⑥">(5)</a> + <li><a href="#ref-for-comb-one①⑦">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> <a href="#ref-for-comb-one①⑧">(2)</a> + <li><a href="#ref-for-comb-one①⑨">6.1. The column-rule-extent and row-rule-extent Properties</a> <a href="#ref-for-comb-one②⓪">(2)</a> <a href="#ref-for-comb-one②①">(3)</a> <a href="#ref-for-comb-one②②">(4)</a> <a href="#ref-for-comb-one②③">(5)</a> <a href="#ref-for-comb-one②④">(6)</a> <a href="#ref-for-comb-one②⑤">(7)</a> <a href="#ref-for-comb-one②⑥">(8)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-comb-any"> + <a href="https://drafts.csswg.org/css-values-4/#comb-any">https://drafts.csswg.org/css-values-4/#comb-any</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-comb-any">2.4. The column-rule-image and row-rule-image Shorthands</a> <a href="#ref-for-comb-any①">(2)</a> + <li><a href="#ref-for-comb-any②">4.2. The row-rule Shorthand</a> <a href="#ref-for-comb-any③">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="term-for-propdef-writing-mode"> + <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-writing-mode">1.3. Definitions</a> + </ul> + </aside> + <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> + <ul class="index"> + <li> + <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-typedef-line-style"><line-style></span> + <li><span class="dfn-paneled" id="term-for-typedef-line-width"><line-width></span> + <li><span class="dfn-paneled" id="term-for-propdef-border-style">border-style</span> + </ul> + <li> + <a data-link-type="biblio">[css-box-4]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-valdef-margin-trim-all">all</span> + <li><span class="dfn-paneled" id="term-for-valdef-box-margin-box">margin-box</span> + </ul> + <li> + <a data-link-type="biblio">[css-cascade-5]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-used-value">used value</span> + </ul> + <li> + <a data-link-type="biblio">[css-color-4]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-typedef-color"><color></span> + <li><span class="dfn-paneled" id="term-for-propdef-opacity">opacity</span> + </ul> + <li> + <a data-link-type="biblio">[css-display-3]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-order-modified-document-order">order-modified document order</span> + </ul> + <li> + <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-flex-container">flex container</span> + </ul> + <li> + <a data-link-type="biblio">[css-grid-2]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-collapsed-track">collapsed track</span> + <li><span class="dfn-paneled" id="term-for-grid">grid</span> + <li><span class="dfn-paneled" id="term-for-grid-cell">grid cell</span> + <li><span class="dfn-paneled" id="term-for-grid-container">grid container</span> + <li><span class="dfn-paneled" id="term-for-propdef-grid-column">grid-column</span> + <li><span class="dfn-paneled" id="term-for-propdef-grid-row">grid-row</span> + <li><span class="dfn-paneled" id="term-for-implicit-grid">implicit grid</span> + <li><span class="dfn-paneled" id="term-for-subgrid">subgrid</span> + </ul> + <li> + <a data-link-type="biblio">[css-grid-3]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-masonry-axis">masonry axis</span> + </ul> + <li> + <a data-link-type="biblio">[css-images-3]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-typedef-image"><image></span> + <li><span class="dfn-paneled" id="term-for-default-object-size">default object size</span> + <li><span class="dfn-paneled" id="term-for-specified-size">specified size</span> + </ul> + <li> + <a data-link-type="biblio">[css-multicol-1]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-propdef-column-rule-width">column-rule-width</span> + <li><span class="dfn-paneled" id="term-for-multi-column-container">multi-column container</span> + <li><span class="dfn-paneled" id="term-for-multi-column-layout">multi-column layout</span> + <li><span class="dfn-paneled" id="term-for-spanner">spanner</span> + </ul> + <li> + <a data-link-type="biblio">[css-multicol-2]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-propdef-column-span">column-span</span> + </ul> + <li> + <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-ink-overflow">ink overflow</span> + <li><span class="dfn-paneled" id="term-for-propdef-overflow">overflow</span> + </ul> + <li> + <a data-link-type="biblio">[css-position-3]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-propdef-left">left</span> + <li><span class="dfn-paneled" id="term-for-propdef-right">right</span> + </ul> + <li> + <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-outer-size">outer size</span> + <li><span class="dfn-paneled" id="term-for-propdef-width">width</span> + </ul> + <li> + <a data-link-type="biblio">[css-tables-3]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-span">span</span> + <li><span class="dfn-paneled" id="term-for-table">table</span> + <li><span class="dfn-paneled" id="term-for-table-cell">table-cell</span> + <li><span class="dfn-paneled" id="term-for-table-column">table-column</span> + <li><span class="dfn-paneled" id="term-for-table-column-group">table-column-group</span> + <li><span class="dfn-paneled" id="term-for-table-row">table-row</span> + <li><span class="dfn-paneled" id="term-for-table-row-group">table-row-group</span> + </ul> + <li> + <a data-link-type="biblio">[css-values-4]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-integer-value"><integer></span> + <li><span class="dfn-paneled" id="term-for-typedef-length-percentage"><length-percentage></span> + <li><span class="dfn-paneled" id="term-for-number-value"><number></span> + <li><span class="dfn-paneled" id="term-for-percentage-value"><percentage></span> + <li><span class="dfn-paneled" id="term-for-mult-opt">?</span> + <li><span class="dfn-paneled" id="term-for-mult-num-range">{a,b}</span> + <li><span class="dfn-paneled" id="term-for-comb-one">|</span> + <li><span class="dfn-paneled" id="term-for-comb-any">||</span> + </ul> + <li> + <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms: + <ul> + <li><span class="dfn-paneled" id="term-for-propdef-writing-mode">writing-mode</span> + </ul> + </ul> + <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> + <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> + <dl> + <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] + <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. 26 July 2021. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a> + <dt id="biblio-css-box-4">[CSS-BOX-4] + <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. 21 April 2020. WD. URL: <a href="https://www.w3.org/TR/css-box-4/">https://www.w3.org/TR/css-box-4/</a> + <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] + <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. 15 October 2021. WD. URL: <a href="https://www.w3.org/TR/css-cascade-5/">https://www.w3.org/TR/css-cascade-5/</a> + <dt id="biblio-css-color-4">[CSS-COLOR-4] + <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. 1 June 2021. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a> + <dt id="biblio-css-display-3">[CSS-DISPLAY-3] + <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/"><cite>CSS Display Module Level 3</cite></a>. 3 September 2021. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a> + <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1] + <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/"><cite>CSS Flexible Box Layout Module Level 1</cite></a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a> + <dt id="biblio-css-grid-2">[CSS-GRID-2] + <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-2/"><cite>CSS Grid Layout Module Level 2</cite></a>. 18 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-grid-2/">https://www.w3.org/TR/css-grid-2/</a> + <dt id="biblio-css-grid-3">[CSS-GRID-3] + <dd>CSS Grid Layout Level 3 URL: <a href="https://drafts.csswg.org/css-grid-3/">https://drafts.csswg.org/css-grid-3/</a> + <dt id="biblio-css-images-3">[CSS-IMAGES-3] + <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. 17 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-images-3/">https://www.w3.org/TR/css-images-3/</a> + <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1] + <dd>Florian Rivoal; Rachel Andrew. <a href="https://www.w3.org/TR/css-multicol-1/"><cite>CSS Multi-column Layout Module Level 1</cite></a>. 12 October 2021. CR. URL: <a href="https://www.w3.org/TR/css-multicol-1/">https://www.w3.org/TR/css-multicol-1/</a> + <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] + <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. 3 June 2020. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a> + <dt id="biblio-css-sizing-3">[CSS-SIZING-3] + <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. 17 March 2021. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a> + <dt id="biblio-css-tables-3">[CSS-TABLES-3] + <dd>François Remy; Greg Whitworth; David Baron. <a href="https://www.w3.org/TR/css-tables-3/"><cite>CSS Table Module Level 3</cite></a>. 27 July 2019. WD. URL: <a href="https://www.w3.org/TR/css-tables-3/">https://www.w3.org/TR/css-tables-3/</a> + <dt id="biblio-css-values-4">[CSS-VALUES-4] + <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 16 October 2021. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> + <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] + <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. 30 July 2019. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a> + <dt id="biblio-rfc2119">[RFC2119] + <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> + </dl> + <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3> + <dl> + <dt id="biblio-css-multicol-2">[CSS-MULTICOL-2] + <dd>CSS Multi-column Layout Module Level 2 URL: <a href="https://drafts.csswg.org/css-multicol-2/">https://drafts.csswg.org/css-multicol-2/</a> + <dt id="biblio-css-position-3">[CSS-POSITION-3] + <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. 19 May 2020. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a> + </dl> + <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> + <div class="big-element-wrapper"> + <table class="index"> + <thead> + <tr> + <th scope="col">Name + <th scope="col">Value + <th scope="col">Initial + <th scope="col">Applies to + <th scope="col">Inh. + <th scope="col">%ages + <th scope="col">Animation type + <th scope="col">Canonical order + <th scope="col">Computed value + <tbody> + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-align" id="ref-for-propdef-column-rule-align③">column-rule-align</a> + <td>[gap | gap-center | gap-over | rule | rule-center | rule-over]{1,2} + <td>gap + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-edge-align" id="ref-for-propdef-column-rule-edge-align②">column-rule-edge-align</a> + <td>[gap | gap-center | gap-over]{1,2} + <td>gap + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent④">column-rule-extent</a> + <td>[segment | start | end | short | long | all-start | all-end | all-short | all-long ] allow-overlap? + <td>long + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-image" id="ref-for-propdef-column-rule-image①">column-rule-image</a> + <td><'column-rule-image-source'> || <'column-rule-image-slice'> || <'column-rule-image-repeat'> + <td>see individual properties + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>per grammar + <td>see individual properties + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-image-repeat" id="ref-for-propdef-column-rule-image-repeat②">column-rule-image-repeat</a> + <td>stretch | repeat | round | space + <td>stretch + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the specified keyword + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice④">column-rule-image-slice</a> + <td>[<number [0,∞]> | <percentage [0,∞]>]{1,2} + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to image size in the rule’s longitudinal axis + <td>discrete + <td>per grammar + <td>one or two values, each either a number or percentage + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-image-source" id="ref-for-propdef-column-rule-image-source②">column-rule-image-source</a> + <td>none | <image> + <td>none + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the keyword none or the computed <image> + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-lateral-inset" id="ref-for-propdef-column-rule-lateral-inset①">column-rule-lateral-inset</a> + <td><'column-rule-lateral-inset-start'> <'column-rule-lateral-inset-end'>? + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>per grammar + <td>see individual properties + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-lateral-inset-end" id="ref-for-propdef-column-rule-lateral-inset-end①">column-rule-lateral-inset-end</a> + <td><length-percentage> | auto + <td>auto + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s lateral axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-lateral-inset-start" id="ref-for-propdef-column-rule-lateral-inset-start①">column-rule-lateral-inset-start</a> + <td><length-percentage> | auto + <td>auto + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s lateral axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-length" id="ref-for-propdef-column-rule-length③">column-rule-length</a> + <td><length-percentage> | auto + <td>auto + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-edge-inset" id="ref-for-propdef-column-rule-longitudinal-edge-inset①">column-rule-longitudinal-edge-inset</a> + <td><'column-rule-longitudinal-edge-inset-start'> <'column-rule-longitudinal-edge-inset-end'>? + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>per grammar + <td>see individual properties + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-edge-inset-end" id="ref-for-propdef-column-rule-longitudinal-edge-inset-end①">column-rule-longitudinal-edge-inset-end</a> + <td><length-percentage> | auto + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-edge-inset-start" id="ref-for-propdef-column-rule-longitudinal-edge-inset-start①">column-rule-longitudinal-edge-inset-start</a> + <td><length-percentage> | auto + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-inset" id="ref-for-propdef-column-rule-longitudinal-inset①">column-rule-longitudinal-inset</a> + <td><'column-rule-longitudinal-inset-start'> <'column-rule-longitudinal-inset-end'>? + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>per grammar + <td>see individual properties + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-inset-end" id="ref-for-propdef-column-rule-longitudinal-inset-end②">column-rule-longitudinal-inset-end</a> + <td><length-percentage> | auto + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-inset-start" id="ref-for-propdef-column-rule-longitudinal-inset-start①">column-rule-longitudinal-inset-start</a> + <td><length-percentage> | auto + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule" id="ref-for-propdef-row-rule①">row-rule</a> + <td><'row-rule-width'> || <'row-rule-style'> || <'row-rule-color'> + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>per grammar + <td>see individual properties + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-align" id="ref-for-propdef-row-rule-align③">row-rule-align</a> + <td>[gap | gap-center | gap-over | rule | rule-center | rule-over]{1,2} + <td>gap + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-color" id="ref-for-propdef-row-rule-color②">row-rule-color</a> + <td><color> + <td>currentcolor + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>by computed value type + <td>per grammar + <td>computed color + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-edge-align" id="ref-for-propdef-row-rule-edge-align①">row-rule-edge-align</a> + <td>[gap | gap-center | gap-over]{1,2} + <td>gap + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent⑥">row-rule-extent</a> + <td>[segment | start | end | short | long | all-start | all-end | all-short | all-long ] allow-overlap? + <td>long + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-image" id="ref-for-propdef-row-rule-image①">row-rule-image</a> + <td><'column-rule-image-source'> || <'column-rule-image-slice'> || <'column-rule-image-repeat'> + <td>see individual properties + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>per grammar + <td>see individual properties + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-image-repeat" id="ref-for-propdef-row-rule-image-repeat①">row-rule-image-repeat</a> + <td>stretch | repeat | round | space + <td>stretch + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the specified keyword + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-image-slice" id="ref-for-propdef-row-rule-image-slice①">row-rule-image-slice</a> + <td>[<number [0,∞]> | <percentage [0,∞]>]{1,2} + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to image size in the rule’s longitudinal axis + <td>discrete + <td>per grammar + <td>one or two values, each either a number or percentage + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-image-source" id="ref-for-propdef-row-rule-image-source①">row-rule-image-source</a> + <td>none | <image> + <td>none + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>the keyword none or the computed <image> + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-lateral-inset" id="ref-for-propdef-row-rule-lateral-inset①">row-rule-lateral-inset</a> + <td><'row-rule-lateral-inset-start'> <'row-rule-lateral-inset-end'>? + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>per grammar + <td>see individual properties + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-lateral-inset-end" id="ref-for-propdef-row-rule-lateral-inset-end①">row-rule-lateral-inset-end</a> + <td><length-percentage> | auto + <td>auto + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s lateral axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-lateral-inset-start" id="ref-for-propdef-row-rule-lateral-inset-start①">row-rule-lateral-inset-start</a> + <td><length-percentage> | auto + <td>auto + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s lateral axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-length" id="ref-for-propdef-row-rule-length①">row-rule-length</a> + <td><length-percentage> | auto + <td>auto + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-edge-inset" id="ref-for-propdef-row-rule-longitudinal-edge-inset①">row-rule-longitudinal-edge-inset</a> + <td><'row-rule-longitudinal-edge-inset-start'> <'row-rule-longitudinal-edge-inset-end'>? + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>per grammar + <td>see individual properties + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-edge-inset-end" id="ref-for-propdef-row-rule-longitudinal-edge-inset-end①">row-rule-longitudinal-edge-inset-end</a> + <td><length-percentage> | auto + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-edge-inset-start" id="ref-for-propdef-row-rule-longitudinal-edge-inset-start①">row-rule-longitudinal-edge-inset-start</a> + <td><length-percentage> | auto + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-inset" id="ref-for-propdef-row-rule-longitudinal-inset①">row-rule-longitudinal-inset</a> + <td><'row-rule-longitudinal-inset-start'> <'row-rule-longitudinal-inset-end'>? + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>see individual properties + <td>per grammar + <td>see individual properties + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-inset-end" id="ref-for-propdef-row-rule-longitudinal-inset-end①">row-rule-longitudinal-inset-end</a> + <td><length-percentage> | auto + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-inset-start" id="ref-for-propdef-row-rule-longitudinal-inset-start①">row-rule-longitudinal-inset-start</a> + <td><length-percentage> | auto + <td>0 + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis + <td>by computed value type + <td>per grammar + <td>the specified value + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-style" id="ref-for-propdef-row-rule-style②">row-rule-style</a> + <td><line-style> + <td>none + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>N/A + <td>discrete + <td>per grammar + <td>specified keyword + <tr> + <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-width" id="ref-for-propdef-row-rule-width②">row-rule-width</a> + <td><line-width> | <percentage> | auto + <td>medium + <td>multi-column containers, flex containers, grid containers, table and table-row-group containers + <td>no + <td>refer to the rule containing rectangle’s size in the rule’s lateral axis + <td>by computed value type + <td>per grammar + <td>absolute length if the specified value is <line-width>; 0px if the column rule style is none or hidden. Otherwise, the specified value. + </table> + </div> + <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2> + <div style="counter-reset:issue"> + <div class="issue"> lots of new possible shorthands... we now have many + properties (and shorthands) with a <span class="css">column-rule</span> and <span class="css">row-rule</span> prefix. + Should we add shorthands for some of those with a <a class="property" data-link-type="propdesc">rule</a> prefix to specify + both axes, like so: 'rule-foo: <span class="production"><row-rule-foo></span> <span class="production"><column-rule-foo></span>?'. + As usual, we have to be careful with the separator though, to make it + forward-compatible with any changes we might want to make... <a class="issue-return" href="#issue-53073ff7" title="Jump to section">↵</a></div> + <div class="issue"> Are there use cases for other box-related edge attachment points? + e.g. 'padding | padding-center | padding-over | border...' <a class="issue-return" href="#issue-13842b6f" title="Jump to section">↵</a></div> + <div class="issue"> perhaps make <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-box-4/#valdef-margin-trim-all">all</a> a separate keyword? like so: <span class="css">[segment | [[start | end | short | long] all?] ] allow-overlap?</span> <a class="issue-return" href="#issue-70dc1ba4" title="Jump to section">↵</a></div> + <div class="issue"> TODO: add definition list and algorithm here... <a class="issue-return" href="#issue-b6f1d65c" title="Jump to section">↵</a></div> + <div class="issue"> is it useful to be able to create a rule extent for the <i>intersection</i> or <i>union</i> between two tracks, like so: <img height="435" src="media/masonry-all-shorter.png" style="display:block" width="701">It’s pretty easy to implement, fwiw... (I accidently implemented <span class="css">short</span>/<span class="css">long</span> like that before I realized it was inconsistent with how they work elsewhere). I think it’s a case that is unique to a masonry axis though, at least <i>currently</i>... <a class="issue-return" href="#issue-3e9abc31" title="Jump to section">↵</a></div> + <div class="issue"> sort out if non-collapsed column-groups that only contain collapsed columns should generate rules, ditto row-groups/rows <a class="issue-return" href="#issue-0ca7394a" title="Jump to section">↵</a></div> + <div class="issue"> this proposal makes the assumption that the related proposal that <span class="css">row-gap</span> should apply to multi-column containers is also adopted + (<a href="https://github.com/w3c/csswg-drafts/issues/6746">issue #6746</a>). <a class="issue-return" href="#issue-409a7220" title="Jump to section">↵</a></div> + </div> + <aside class="dfn-panel" data-for="lateral-axis"> + <b><a href="#lateral-axis">#lateral-axis</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-lateral-axis">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-lateral-axis①">(2)</a> + <li><a href="#ref-for-lateral-axis②">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-lateral-axis③">3.3. The Rule Lateral Inset Properties</a> + <li><a href="#ref-for-lateral-axis④">7. The Rule Containing Rectangle</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="longitudinal-axis"> + <b><a href="#longitudinal-axis">#longitudinal-axis</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-longitudinal-axis">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-longitudinal-axis①">3.6. The Rule Longitudinal Inset Properties</a> + <li><a href="#ref-for-longitudinal-axis②">3.8. The Rule Longitudinal Edge Inset Properties</a> <a href="#ref-for-longitudinal-axis③">(2)</a> + <li><a href="#ref-for-longitudinal-axis④">5.1. The column-rule-align and row-rule-align Properties</a> + <li><a href="#ref-for-longitudinal-axis⑤">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + <li><a href="#ref-for-longitudinal-axis⑥">6.1. The column-rule-extent and row-rule-extent Properties</a> + <li><a href="#ref-for-longitudinal-axis⑦">7. The Rule Containing Rectangle</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="rule-length"> + <b><a href="#rule-length">#rule-length</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-rule-length">3.2. The column-rule-length and row-rule-length Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-image-source"> + <b><a href="#propdef-column-rule-image-source">#propdef-column-rule-image-source</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-image-source">2.1. The column-rule-image-source and row-rule-image-source Properties</a> + <li><a href="#ref-for-propdef-column-rule-image-source①">2.4. The column-rule-image and row-rule-image Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-image-source"> + <b><a href="#propdef-row-rule-image-source">#propdef-row-rule-image-source</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-image-source">2.1. The column-rule-image-source and row-rule-image-source Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-image-slice"> + <b><a href="#propdef-column-rule-image-slice">#propdef-column-rule-image-slice</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-image-slice">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> <a href="#ref-for-propdef-column-rule-image-slice①">(2)</a> <a href="#ref-for-propdef-column-rule-image-slice②">(3)</a> + <li><a href="#ref-for-propdef-column-rule-image-slice③">2.4. The column-rule-image and row-rule-image Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-image-slice"> + <b><a href="#propdef-row-rule-image-slice">#propdef-row-rule-image-slice</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-image-slice">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-image-repeat"> + <b><a href="#propdef-column-rule-image-repeat">#propdef-column-rule-image-repeat</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-image-repeat">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> + <li><a href="#ref-for-propdef-column-rule-image-repeat①">2.4. The column-rule-image and row-rule-image Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-image-repeat"> + <b><a href="#propdef-row-rule-image-repeat">#propdef-row-rule-image-repeat</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-image-repeat">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-image"> + <b><a href="#propdef-column-rule-image">#propdef-column-rule-image</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-image">2.4. The column-rule-image and row-rule-image Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-image"> + <b><a href="#propdef-row-rule-image">#propdef-row-rule-image</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-image">2.4. The column-rule-image and row-rule-image Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-width"> + <b><a href="#propdef-row-rule-width">#propdef-row-rule-width</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-width">3.1. The column-rule-width and row-rule-width Properties</a> + <li><a href="#ref-for-propdef-row-rule-width①">4.2. The row-rule Shorthand</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-length"> + <b><a href="#propdef-column-rule-length">#propdef-column-rule-length</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-length">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-propdef-column-rule-length①">7. The Rule Containing Rectangle</a> <a href="#ref-for-propdef-column-rule-length②">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-length"> + <b><a href="#propdef-row-rule-length">#propdef-row-rule-length</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-length">3.2. The column-rule-length and row-rule-length Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-lateral-inset-start"> + <b><a href="#propdef-column-rule-lateral-inset-start">#propdef-column-rule-lateral-inset-start</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-lateral-inset-start">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-lateral-inset-end"> + <b><a href="#propdef-column-rule-lateral-inset-end">#propdef-column-rule-lateral-inset-end</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-lateral-inset-end">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-lateral-inset-start"> + <b><a href="#propdef-row-rule-lateral-inset-start">#propdef-row-rule-lateral-inset-start</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-lateral-inset-start">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-lateral-inset-end"> + <b><a href="#propdef-row-rule-lateral-inset-end">#propdef-row-rule-lateral-inset-end</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-lateral-inset-end">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-lateral-inset"> + <b><a href="#propdef-column-rule-lateral-inset">#propdef-column-rule-lateral-inset</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-lateral-inset">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-lateral-inset"> + <b><a href="#propdef-row-rule-lateral-inset">#propdef-row-rule-lateral-inset</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-lateral-inset">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-inset-start"> + <b><a href="#propdef-column-rule-longitudinal-inset-start">#propdef-column-rule-longitudinal-inset-start</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-longitudinal-inset-start">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-inset-end"> + <b><a href="#propdef-column-rule-longitudinal-inset-end">#propdef-column-rule-longitudinal-inset-end</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-longitudinal-inset-end">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> + <li><a href="#ref-for-propdef-column-rule-longitudinal-inset-end①">7. The Rule Containing Rectangle</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-inset-start"> + <b><a href="#propdef-row-rule-longitudinal-inset-start">#propdef-row-rule-longitudinal-inset-start</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-longitudinal-inset-start">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-inset-end"> + <b><a href="#propdef-row-rule-longitudinal-inset-end">#propdef-row-rule-longitudinal-inset-end</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-longitudinal-inset-end">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-inset"> + <b><a href="#propdef-column-rule-longitudinal-inset">#propdef-column-rule-longitudinal-inset</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-longitudinal-inset">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-inset"> + <b><a href="#propdef-row-rule-longitudinal-inset">#propdef-row-rule-longitudinal-inset</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-longitudinal-inset">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-edge-inset-start"> + <b><a href="#propdef-column-rule-longitudinal-edge-inset-start">#propdef-column-rule-longitudinal-edge-inset-start</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-longitudinal-edge-inset-start">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-edge-inset-end"> + <b><a href="#propdef-column-rule-longitudinal-edge-inset-end">#propdef-column-rule-longitudinal-edge-inset-end</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-longitudinal-edge-inset-end">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-edge-inset-start"> + <b><a href="#propdef-row-rule-longitudinal-edge-inset-start">#propdef-row-rule-longitudinal-edge-inset-start</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-longitudinal-edge-inset-start">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-edge-inset-end"> + <b><a href="#propdef-row-rule-longitudinal-edge-inset-end">#propdef-row-rule-longitudinal-edge-inset-end</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-longitudinal-edge-inset-end">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-edge-inset"> + <b><a href="#propdef-column-rule-longitudinal-edge-inset">#propdef-column-rule-longitudinal-edge-inset</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-longitudinal-edge-inset">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-edge-inset"> + <b><a href="#propdef-row-rule-longitudinal-edge-inset">#propdef-row-rule-longitudinal-edge-inset</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-longitudinal-edge-inset">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-style"> + <b><a href="#propdef-row-rule-style">#propdef-row-rule-style</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-style">4.1. The row-rule-style and row-rule-color Properties</a> + <li><a href="#ref-for-propdef-row-rule-style①">4.2. The row-rule Shorthand</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-color"> + <b><a href="#propdef-row-rule-color">#propdef-row-rule-color</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-color">4.1. The row-rule-style and row-rule-color Properties</a> + <li><a href="#ref-for-propdef-row-rule-color①">4.2. The row-rule Shorthand</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule"> + <b><a href="#propdef-row-rule">#propdef-row-rule</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule">4.2. The row-rule Shorthand</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-align"> + <b><a href="#propdef-column-rule-align">#propdef-column-rule-align</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-align">5.1. The column-rule-align and row-rule-align Properties</a> + <li><a href="#ref-for-propdef-column-rule-align①">7. The Rule Containing Rectangle</a> <a href="#ref-for-propdef-column-rule-align②">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-align"> + <b><a href="#propdef-row-rule-align">#propdef-row-rule-align</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-align">5.1. The column-rule-align and row-rule-align Properties</a> <a href="#ref-for-propdef-row-rule-align①">(2)</a> + <li><a href="#ref-for-propdef-row-rule-align②">6.1.1.1. Subgrid</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-edge-align"> + <b><a href="#propdef-column-rule-edge-align">#propdef-column-rule-edge-align</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-edge-align">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + <li><a href="#ref-for-propdef-column-rule-edge-align①">6.1.1.2. Masonry</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-edge-align"> + <b><a href="#propdef-row-rule-edge-align">#propdef-row-rule-edge-align</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-edge-align">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-column-rule-extent"> + <b><a href="#propdef-column-rule-extent">#propdef-column-rule-extent</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-column-rule-extent">6.1. The column-rule-extent and row-rule-extent Properties</a> + <li><a href="#ref-for-propdef-column-rule-extent①">6.1.1.2. Masonry</a> + <li><a href="#ref-for-propdef-column-rule-extent②">6.1.2. Flex Containers</a> <a href="#ref-for-propdef-column-rule-extent③">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="propdef-row-rule-extent"> + <b><a href="#propdef-row-rule-extent">#propdef-row-rule-extent</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-propdef-row-rule-extent">6.1. The column-rule-extent and row-rule-extent Properties</a> + <li><a href="#ref-for-propdef-row-rule-extent①">6.1.2. Flex Containers</a> <a href="#ref-for-propdef-row-rule-extent②">(2)</a> <a href="#ref-for-propdef-row-rule-extent③">(3)</a> <a href="#ref-for-propdef-row-rule-extent④">(4)</a> <a href="#ref-for-propdef-row-rule-extent⑤">(5)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="segment"> + <b><a href="#segment">#segment</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-segment">6.1.5. Multi-Column Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="extent-size"> + <b><a href="#extent-size">#extent-size</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-extent-size">6.1.1. Grid Containers</a> <a href="#ref-for-extent-size①">(2)</a> <a href="#ref-for-extent-size②">(3)</a> <a href="#ref-for-extent-size③">(4)</a> <a href="#ref-for-extent-size④">(5)</a> <a href="#ref-for-extent-size⑤">(6)</a> <a href="#ref-for-extent-size⑥">(7)</a> <a href="#ref-for-extent-size⑦">(8)</a> <a href="#ref-for-extent-size⑧">(9)</a> <a href="#ref-for-extent-size⑨">(10)</a> <a href="#ref-for-extent-size①⓪">(11)</a> <a href="#ref-for-extent-size①①">(12)</a> + <li><a href="#ref-for-extent-size①②">6.1.2. Flex Containers</a> <a href="#ref-for-extent-size①③">(2)</a> <a href="#ref-for-extent-size①④">(3)</a> + <li><a href="#ref-for-extent-size①⑤">7. The Rule Containing Rectangle</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="valdef-row-rule-extent-short"> + <b><a href="#valdef-row-rule-extent-short">#valdef-row-rule-extent-short</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-valdef-row-rule-extent-short">6.1.2. Flex Containers</a> <a href="#ref-for-valdef-row-rule-extent-short①">(2)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="valdef-row-rule-extent-long"> + <b><a href="#valdef-row-rule-extent-long">#valdef-row-rule-extent-long</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-valdef-row-rule-extent-long">6.1.2. Flex Containers</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="next-grid-cell-span"> + <b><a href="#next-grid-cell-span">#next-grid-cell-span</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-next-grid-cell-span">6.1.1. Grid Containers</a> <a href="#ref-for-next-grid-cell-span①">(2)</a> <a href="#ref-for-next-grid-cell-span②">(3)</a> <a href="#ref-for-next-grid-cell-span③">(4)</a> <a href="#ref-for-next-grid-cell-span④">(5)</a> <a href="#ref-for-next-grid-cell-span⑤">(6)</a> <a href="#ref-for-next-grid-cell-span⑥">(7)</a> <a href="#ref-for-next-grid-cell-span⑦">(8)</a> <a href="#ref-for-next-grid-cell-span⑧">(9)</a> <a href="#ref-for-next-grid-cell-span⑨">(10)</a> <a href="#ref-for-next-grid-cell-span①⓪">(11)</a> <a href="#ref-for-next-grid-cell-span①①">(12)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="next-flex-line-item"> + <b><a href="#next-flex-line-item">#next-flex-line-item</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-next-flex-line-item">6.1.2. Flex Containers</a> <a href="#ref-for-next-flex-line-item①">(2)</a> <a href="#ref-for-next-flex-line-item②">(3)</a> <a href="#ref-for-next-flex-line-item③">(4)</a> <a href="#ref-for-next-flex-line-item④">(5)</a> <a href="#ref-for-next-flex-line-item⑤">(6)</a> <a href="#ref-for-next-flex-line-item⑥">(7)</a> <a href="#ref-for-next-flex-line-item⑦">(8)</a> + </ul> + </aside> + <aside class="dfn-panel" data-for="rule-containing-rectangle①"> + <b><a href="#rule-containing-rectangle①">#rule-containing-rectangle①</a></b><b>Referenced in:</b> + <ul> + <li><a href="#ref-for-rule-containing-rectangle①">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> + <li><a href="#ref-for-rule-containing-rectangle①①">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-rule-containing-rectangle①②">(2)</a> + <li><a href="#ref-for-rule-containing-rectangle①③">3.2. The column-rule-length and row-rule-length Properties</a> + <li><a href="#ref-for-rule-containing-rectangle①④">3.3. The Rule Lateral Inset Properties</a> <a href="#ref-for-rule-containing-rectangle①⑤">(2)</a> + <li><a href="#ref-for-rule-containing-rectangle①⑥">3.4. Resolving a rule’s position and size</a> <a href="#ref-for-rule-containing-rectangle①⑦">(2)</a> + <li><a href="#ref-for-rule-containing-rectangle①⑧">3.6. The Rule Longitudinal Inset Properties</a> <a href="#ref-for-rule-containing-rectangle①⑨">(2)</a> <a href="#ref-for-rule-containing-rectangle①①⓪">(3)</a> + <li><a href="#ref-for-rule-containing-rectangle①①①">3.8. The Rule Longitudinal Edge Inset Properties</a> + <li><a href="#ref-for-rule-containing-rectangle①①②">5.1. The column-rule-align and row-rule-align Properties</a> + <li><a href="#ref-for-rule-containing-rectangle①①③">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> + <li><a href="#ref-for-rule-containing-rectangle①①④">7. The Rule Containing Rectangle</a> <a href="#ref-for-rule-containing-rectangle①①⑤">(2)</a> <a href="#ref-for-rule-containing-rectangle①①⑥">(3)</a> <a href="#ref-for-rule-containing-rectangle①①⑦">(4)</a> <a href="#ref-for-rule-containing-rectangle①①⑧">(5)</a> + </ul> + </aside> +<script>/* script-dfn-panel */ + +document.body.addEventListener("click", function(e) { + var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); } + // Find the dfn element or panel, if any, that was clicked on. + var el = e.target; + var target; + var hitALink = false; + while(el.parentElement) { + if(el.tagName == "A") { + // Clicking on a link in a <dfn> shouldn't summon the panel + hitALink = true; + } + if(el.classList.contains("dfn-paneled")) { + target = "dfn"; + break; + } + if(el.classList.contains("dfn-panel")) { + target = "dfn-panel"; + break; + } + el = el.parentElement; + } + if(target != "dfn-panel") { + // Turn off any currently "on" or "activated" panels. + queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){ + el.classList.remove("on"); + el.classList.remove("activated"); + }); + } + if(target == "dfn" && !hitALink) { + // open the panel + var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']"); + if(dfnPanel) { + dfnPanel.classList.add("on"); + var rect = el.getBoundingClientRect(); + dfnPanel.style.left = window.scrollX + rect.right + 5 + "px"; + dfnPanel.style.top = window.scrollY + rect.top + "px"; + var panelRect = dfnPanel.getBoundingClientRect(); + var panelWidth = panelRect.right - panelRect.left; + if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) { + // Reposition, because the panel is overflowing + dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px"; + } + } else { + console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']"); + } + } else if(target == "dfn-panel") { + // Switch it to "activated" state, which pins it. + el.classList.add("activated"); + el.style.left = null; + el.style.top = null; + } + +}); +</script> +<script>/* script-wpt */ +let wptPath = "/"; +"use strict"; + +document.addEventListener("DOMContentLoaded", async ()=>{ + if(wptPath == "/") return; + + const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge"; + const runs = await (await fetch(runsUrl)).json(); + + const testResults = await( await fetch("https://wpt.fyi/api/search", { + method:"POST", + headers:{ + "Content-Type":"application/json", + }, + body: JSON.stringify({ + "run_ids": runs.map(x=>x.id), + "query": {"path": wptPath}, + }) + })).json(); + + const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0})); + const resultsFromPath = new Map(testResults.results.map(result=>{ + const testPath = result.test; + const passes = result.legacy_status.map(x=>[x.passes, x.total]); + return [testPath, passes]; + })); + document.querySelectorAll(".wpt-name").forEach(nameEl=>{ + const passData = resultsFromPath.get("/" + nameEl.getAttribute("title")); + const numTests = passData[0][1]; + if(numTests > 1) { + nameEl.insertAdjacentElement("beforeend", + el("small", {}, ` (${numTests} tests)`)); + } + if(passData == undefined) return; + passData.forEach((p,i) => { + browsers[i].passes += p[0]; + browsers[i].total += p[1]; + }) + const resultsEl = el("span",{"class":"wpt-results"}, + ...passData.map((p,i) => el("span", + { + "title": `${browsers[i].name} ${p[0]}/${p[1]}`, + "class": "wpt-result", + "style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`, + })), + ); + nameEl.insertAdjacentElement("afterend", resultsEl); + }); + const overview = document.querySelector(".wpt-overview"); + if(overview) { + overview.appendChild(el('ul',{}, ...browsers.map(formatWptResult))); + document.head.appendChild(el('style', {}, + `.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;} + .wpt-overview li { padding: .25em 1em; color: black; text-align: center; } + .wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; } + .wpt-overview .browser { font-weight: bold; } + .wpt-overview .passes-none { background: #e57373; } + .wpt-overview .passes-hardly { background: #ffb74d; } + .wpt-overview .passes-a-few { background: #ffd54f; } + .wpt-overview .passes-half { background: #fff176; } + .wpt-overview .passes-lots { background: #dce775; } + .wpt-overview .passes-most { background: #aed581; } + .wpt-overview .passes-all { background: #81c784; }`)); + } +}); +function el(name, attrs, ...content) { + const x = document.createElement(name); + for(const [k,v] of Object.entries(attrs)) { + x.setAttribute(k, v); + } + for(let child of content) { + if(typeof child == "string") child = document.createTextNode(child); + try { + x.appendChild(child); + } catch(e) { console.log({x, child}); } + } + return x; +} +function formatWptResult({name, version, passes, total}) { + const passRate = passes/total; + let passClass = ""; + if(passRate == 0) passClass = "passes-none"; + else if(passRate < .2) passClass = "passes-hardly"; + else if(passRate < .4) passClass = "passes-a-few"; + else if(passRate < .6) passClass = "passes-half"; + else if(passRate < .8) passClass = "passes-lots"; + else if(passRate < 1) passClass = "passes-most"; + else passClass = "passes-all"; + + name = name[0].toUpperCase() + name.slice(1); + const shortVersion = /^\d+/.exec(version); + const icon = [] + + if(name == "Chrome") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/chrome-dev_64x64.png"})); + if(name == "Edge") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/edge-dev_64x64.png"})); + if(name == "Safari") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/safari-preview_64x64.png"})); + if(name == "Firefox") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/firefox-nightly_64x64.png"})); + + return el('li', {"class":passClass}, + el('nobr', {'class':'browser'}, ...icon, ` ${name} ${shortVersion}`), + el('br', {}), + el('nobr', {'class':'pass-rate'}, `${passes}/${total}`) + ); +}</script>
\ No newline at end of file diff --git a/layout/docs/css-gap-decorations/examples/flexbox-coupon-rule.html b/layout/docs/css-gap-decorations/examples/flexbox-coupon-rule.html new file mode 100644 index 0000000000..505ad756dd --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/flexbox-coupon-rule.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="zh-cn"> +<head> + <meta charset="utf-8"> + <title>Coupon example</title> + <style> + div { + display: inline-flex; + column-gap: .8em; + column-rule: 12px solid; + column-rule-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVCAYAAAByrA%2B0AAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACEklEQVQ4y5WTsUtbURTGf%2Bf1vrwY2ywWQeMgTi4OXf0fwhtLwTFChg4Kzi7OnSwiyKNQFMxSKRQ62HRw0D4c%2Bi%2FIGywlItZEE1%2BS93VoElpoK35w4HLvOd853zn3IOmjpK7ux62k2Ov3%2B28BA8T%2F8QN4Q5IkTyW9ltSTlP2DvSnpHQBbW1tBo9GYkVSTdCWpPQjuD84NSbuSxgG8IAjY3t7%2BbmbPJb2U9AmoA5%2BBD0DZzJbM7EYSDmB6etrb29vLe563C%2Bz%2BTYAkzAxveNHpdBRFkb%2Bzs%2BMnSeJL8jY3N0fvZgbAozAM3S8CZWamSqXSc875p6en3traWg%2FAOUeWZQA4IAOyubm5rNlsusvLy%2FEgCB63220rl8s3x8fHt9VqNR1mckA2Pz%2Bv1dVVxXHsAzPAs0KhwMTExFfnXOL7ftrtdgHwAC0uLmplZcUDAmAWCAc2WywWg42NDTfM4A0nHMcxwB1wBrwf2Nn19fVdmqbZqF1RFNn%2B%2Fr5J4vDw0Jf0RNKUpKmLi4viwcGBn8vl%2BF0DrVaLWq3GyclJVq%2FX22EY3kri6OhIaZqSpumfAWZGq9ViYWGhX6lUKBQKDtD6%2BnoGkM%2Fn6XQ6Iw05IDc2NpY3M6IoolQq9UqlUn9Q8sgZwKIoCs7Pz7PJycnu8vLyEvDczHIDsivgVRAEX0ZlPfS3Pnwfer3ei3uch%2FgmqcpDd%2Fonp%2B72kBTcCEsAAAAASUVORK5CYII%3D) 6 round; + font-size: large; + padding: 0 .5em; + border-radius: 0.2em; + min-block-size: 3em; + align-items: center; + background-image: linear-gradient(270deg, #FFA329 3%, #F56C34); + color: #fff; + } + </style> +</head> + +<div><x>满 100</x><x>减 20</x></div> diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-001.html new file mode 100644 index 0000000000..76de01fe8d --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>A 'row-rule-extent: end' example</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} + +.flex { + display: flex; + flex-wrap: wrap; + gap: 16px; + + column-rule: 8px solid orange; + row-rule: 60% solid blue; + row-rule-extent: end; + + place-content: center; + border: 5px solid; + margin: 2em; + block-size: 6em; + inline-size: 200px; + background: lightgrey; +} + +x { + inline-size: 50px; + block-size: 2em; + background: grey; + opacity: .6; +} +x:nth-child(1) { order: 2; } +x:nth-child(2) { inline-size: 45px; } +x:nth-child(3) { inline-size: 35px; } +x:nth-child(4) { inline-size: 60px; } + +</style> + +<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-001.html new file mode 100644 index 0000000000..92f5075882 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>An example of 'row-rule-extent: all-long'</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} + +.flex { + display: flex; + flex-wrap: wrap; + gap: 16px; + + column-rule: 8px solid orange; + row-rule: 60% solid blue; + row-rule-extent: all-long; + + place-content: center; + border: 5px solid; + margin: 2em; + block-size: 6em; + inline-size: 200px; + background: lightgrey; +} + +x { + inline-size: 50px; + block-size: 2em; + background: grey; + opacity: .6; +} +x:nth-child(1) { order: 2; } +x:nth-child(2) { inline-size: 45px; } +x:nth-child(3) { inline-size: 35px; } +x:nth-child(4) { inline-size: 60px; } + +</style> + +<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-allow-overlap-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-allow-overlap-001.html new file mode 100644 index 0000000000..80404c44da --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-allow-overlap-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>An example of 'column-rule-extent: all-long allow-overlap'</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} + +.flex { + display: flex; + flex-wrap: wrap; + gap: 16px; + + column-rule: 8px solid orange; + column-rule-extent: all-long allow-overlap; + row-rule: 60% solid blue; + + place-content: center; + border: 5px solid; + margin: 2em; + block-size: 6em; + inline-size: 200px; + background: lightgrey; +} + +x { + inline-size: 50px; + block-size: 2em; + background: grey; + opacity: .6; +} +x:nth-child(1) { order: 2; } +x:nth-child(2) { inline-size: 45px; } +x:nth-child(3) { inline-size: 35px; } +x:nth-child(4) { inline-size: 60px; } + +</style> + +<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-all-short-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-short-001.html new file mode 100644 index 0000000000..211e7d0bd1 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-short-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>An example of 'row-rule-extent: all-short'</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} + +.flex { + display: flex; + flex-wrap: wrap; + gap: 16px; + + column-rule: 8px solid orange; + row-rule: 60% solid blue; + row-rule-extent: all-short; + + place-content: center; + border: 5px solid; + margin: 2em; + block-size: 6em; + inline-size: 200px; + background: lightgrey; +} + +x { + inline-size: 50px; + block-size: 2em; + background: grey; + opacity: .6; +} +x:nth-child(1) { order: 2; } +x:nth-child(2) { inline-size: 45px; } +x:nth-child(3) { inline-size: 35px; } +x:nth-child(4) { inline-size: 60px; } + +</style> + +<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-end-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-end-001.html new file mode 100644 index 0000000000..e049ec632b --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-end-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>An example of 'row-rule-extent: end'</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} + +.flex { + display: flex; + flex-wrap: wrap; + gap: 16px; + + column-rule: 8px solid orange; + row-rule: 60% solid blue; + row-rule-extent: end; + + place-content: center; + border: 5px solid; + margin: 2em; + block-size: 6em; + inline-size: 200px; + background: lightgrey; +} + +x { + inline-size: 50px; + block-size: 2em; + background: grey; + opacity: .6; +} +x:nth-child(1) { order: 2; } +x:nth-child(2) { inline-size: 45px; } +x:nth-child(3) { inline-size: 35px; } +x:nth-child(4) { inline-size: 60px; } + +</style> + +<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-long-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-long-001.html new file mode 100644 index 0000000000..e29274eda9 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-long-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>An example of 'row-rule-extent: long'</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} + +.flex { + display: flex; + flex-wrap: wrap; + gap: 16px; + + column-rule: 8px solid orange; + row-rule: 60% solid blue; + row-rule-extent: long; + + place-content: center; + border: 5px solid; + margin: 2em; + block-size: 6em; + inline-size: 200px; + background: lightgrey; +} + +x { + inline-size: 50px; + block-size: 2em; + background: grey; + opacity: .6; +} +x:nth-child(1) { order: 2; } +x:nth-child(2) { inline-size: 45px; } +x:nth-child(3) { inline-size: 35px; } +x:nth-child(4) { inline-size: 60px; } + +</style> + +<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-start-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-start-001.html new file mode 100644 index 0000000000..06688a6605 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-start-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>An example of 'row-rule-extent: start'</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} + +.flex { + display: flex; + flex-wrap: wrap; + gap: 16px; + + column-rule: 8px solid orange; + row-rule: 60% solid blue; + row-rule-extent: start; + + place-content: center; + border: 5px solid; + margin: 2em; + block-size: 6em; + inline-size: 200px; + background: lightgrey; +} + +x { + inline-size: 50px; + block-size: 2em; + background: grey; + opacity: .6; +} +x:nth-child(1) { order: 2; } +x:nth-child(2) { inline-size: 45px; } +x:nth-child(3) { inline-size: 35px; } +x:nth-child(4) { inline-size: 60px; } + +</style> + +<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> diff --git a/layout/docs/css-gap-decorations/examples/grid-align-001.html b/layout/docs/css-gap-decorations/examples/grid-align-001.html new file mode 100644 index 0000000000..c334785183 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-align-001.html @@ -0,0 +1,83 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of 'row-rule-align' values.</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 1ch 2ch 2ch; + gap: 10px 30px; + block-size: calc(2em + 30px); + inline-size: calc(10ch + 30px); + place-content: center; + + column-rule: 6px solid cyan; + column-rule-extent: all-long; + column-rule-lateral-inset-start: 20%; + + row-rule: 6px solid purple; + row-rule-longitudinal-inset: 1px; + + border: 2px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; +} + +.test1 { row-rule-align: gap-center; } +.test2 { row-rule-align: gap gap-over; } +.test3 { row-rule-align: rule; } +.test4 { row-rule-align: rule-center; } +.test5 { row-rule-align: gap rule-over; } +.test6 { row-rule-align: gap-over gap; } + +x { + background: grey; +} +x:nth-child(3) { + grid-row: span 2; +} + +.grid::after { + position: absolute; + bottom: -1.5em; + width: 400px; + font-size: 10px; + vertical-align: top; + content: attr(test); +} +pre { font-size: 10px; } +</style> + +<pre>Note that the row rules all have a 1px longitudinal inset +to separate the individual rule segments. ('rule-center', +for example, would otherwise look like one long rule) + +Note also that the column rule is intentionally not centered in +the gap (to separate 'rule-center' from 'gap-center'). +</pre> + +<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> +<div class="grid test2"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> +<div class="grid test3"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> +<div class="grid test4"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> +<div class="grid test5"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> +<div class="grid test6"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> + +<script> +window.onload = function() { + [...document.querySelectorAll('div')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + elm.setAttribute("test", + "row-rule-align:" + cs.rowRuleAlign + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/grid-extent-001.html b/layout/docs/css-gap-decorations/examples/grid-extent-001.html new file mode 100644 index 0000000000..c5576bb995 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-extent-001.html @@ -0,0 +1,80 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of 'column-rule-extent' on a grid container</title> + +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + position: relative; + display: inline-grid; + grid: auto auto / repeat(7, 2ch); + gap: 10px 3px; + + row-rule: 4px solid purple; + + border: 2px solid; + margin-right: 10px; + margin-bottom: 30px; + background: lightgrey; +} +.segment { row-rule-extent: segment; } +.segment-allow-overlap { row-rule-extent: segment allow-overlap; } +.short-allow-overlap { row-rule-extent: short allow-overlap; } +.short { row-rule-extent: short; } +.long-allow-overlap { row-rule-extent: long allow-overlap; } +.long { row-rule-extent: long; } +.start { row-rule-extent: start; } +.end { row-rule-extent: end; } +.all-long-allow-overlap { row-rule-extent: all-long allow-overlap; } +.all-long { row-rule-extent: all-long; } + +x { + background: grey; + opacity: .5; +} +x:nth-child(1) { grid-column: span 2; } +x:nth-child(3) { grid-row: 1 / span 2; grid-column: 4;} +x:nth-child(4) { grid-column: span 2; } +x:nth-child(6) { } +x:nth-child(7) { grid-row: 2; grid-column: 2 / span 3; } +x:nth-child(8) { grid-column: span 3; } + +.grid::after { + position: absolute; + bottom: -1.5em; + font-size: 10px; + vertical-align: top; + content: attr(test); +} +pre { font-size: 10px; } +</style> + +<pre>Test of various 'row-rule-extent' values:</pre> + +<div class="grid segment-allow-overlap"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> +<div class="grid segment"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> +<div class="grid short-allow-overlap"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> +<div class="grid short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> +<div class="grid long-allow-overlap"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> +<div class="grid long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> +<div class="grid start"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> +<div class="grid end"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> +<div class="grid all-long-allow-overlap"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> +<div class="grid all-long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> + +<script> +window.onload = function() { + [...document.querySelectorAll('.grid')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + elm.setAttribute("test", + "'" + cs.rowRuleExtent + "'" + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/grid-gradient-001.html b/layout/docs/css-gap-decorations/examples/grid-gradient-001.html new file mode 100644 index 0000000000..52240f4025 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-gradient-001.html @@ -0,0 +1,45 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Example of a gradient rule image</title> + +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + display: inline-grid; + grid-template-columns: repeat(3, 50px); + width: 300px; + height: 240px; + place-content: space-around; + + column-rule: min(100%, max(16px, 50%)) solid; + column-rule-image: linear-gradient(#f008,#fc08); + column-rule-align: rule; + column-rule-extent: all-long; + + row-rule: min(16px, 100%) solid; + row-rule-image: linear-gradient(90deg,#f008,#fc08); + row-rule-align: rule; + row-rule-extent: long; + + border: 2px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; +} + +x { + block-size: 48px; + background: grey; +} +x:nth-child(2), x:nth-child(6) { + grid-column: span 2; +} +</style> + +<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div> diff --git a/layout/docs/css-gap-decorations/examples/grid-gradient-002.html b/layout/docs/css-gap-decorations/examples/grid-gradient-002.html new file mode 100644 index 0000000000..0a39053ed4 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-gradient-002.html @@ -0,0 +1,60 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of rule image properties</title> + +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +@keyframes w { + 0%, 33% { width:180px } + 33%, 50% { width:400px } + 50%, 100% { width:180px } +} +@keyframes h { + 0%, 33% { height:150px } + 33%, 50% { height:300px } + 50%, 100% { height:150px } +} + +.grid { + display: inline-grid; + grid-template-columns: repeat(3, 50px); + width: 200px; + height: 240px; + place-content: space-around; + + animation: w 5s infinite, h 5s infinite; + + column-rule: min(100%, max(16px, 50%)) solid; + column-rule-image: linear-gradient(#f008,#fc08); + column-rule-align: rule; + column-rule-extent: all-long; + + row-rule: min(16px, 100%) solid; + row-rule-image: url(h-diagonal-blue-16.png) 16 space; + row-rule-image: linear-gradient(90deg,#f008,#fc08); + row-rule-align: rule; + row-rule-extent: long; + + border: 2px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; +} + +x { + block-size: 48px; + background: grey; +} +x:nth-child(2), x:nth-child(6) { + grid-column: span 2; +} + +</style> + +<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div> diff --git a/layout/docs/css-gap-decorations/examples/grid-image-001.html b/layout/docs/css-gap-decorations/examples/grid-image-001.html new file mode 100644 index 0000000000..5d265ef9e7 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-image-001.html @@ -0,0 +1,49 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Example of rule image properties</title> + +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + display: inline-grid; + grid-template-columns: repeat(3, 50px); + gap: 16px; + width: 300px; + height: 240px; + place-content: space-around; + + column-rule: 16px solid blue; + column-rule-image: url(v-diagonal-blue-16.png) 16 space; + column-rule-extent: segment; + column-rule-align: rule-center; + column-rule-longitudinal-inset: -8px; + + row-rule: 16px solid purple; + row-rule-image: url(h-diagonal-blue-16.png) 16 space; + row-rule-extent: segment; + row-rule-align: rule-center; + row-rule-longitudinal-inset: -8px; + + border: 2px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; +} + +x { + block-size: 48px; + background: grey; +} +x:nth-child(2), x:nth-child(6) { + grid-column: span 2; +} + +</style> + +<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div> diff --git a/layout/docs/css-gap-decorations/examples/grid-image-002.html b/layout/docs/css-gap-decorations/examples/grid-image-002.html new file mode 100644 index 0000000000..2f1b7eb56a --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-image-002.html @@ -0,0 +1,62 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Example of rule image with animated container size</title> + +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +@keyframes w { + 0%, 33% { width:200px } + 33%, 50% { width:400px } + 50%, 100% { width:200px } +} +@keyframes h { + 0%, 33% { height:200px } + 33%, 50% { height:300px } + 50%, 100% { height:200px } +} + +.grid { + display: inline-grid; + grid-template-columns: repeat(3, 50px); + gap: 16px; + width: 200px; + height: 240px; + place-content: space-around; + + animation: w 5s infinite, h 5s infinite; + + column-rule: 16px solid blue; + column-rule-image: url(v-diagonal-blue-16.png) 16; + column-rule-extent: segment; + column-rule-align: rule-center; + column-rule-longitudinal-inset: -8px; + + row-rule: 16px solid purple; + row-rule-image: url(h-diagonal-blue-16.png) 16; + row-rule-extent: segment; + row-rule-align: rule-center; + row-rule-longitudinal-inset: -8px; + + border: 2px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; +} + +x { + block-size: 48px; + background: grey; +} +x:nth-child(2), x:nth-child(6) { + grid-column: span 2; +} + +</style> + +<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div> diff --git a/layout/docs/css-gap-decorations/examples/grid-lateral-001.html b/layout/docs/css-gap-decorations/examples/grid-lateral-001.html new file mode 100644 index 0000000000..05f80265f6 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-lateral-001.html @@ -0,0 +1,103 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of rule lateral properties</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + position: relative; + display: inline-grid; + grid-template-columns: auto auto; + gap: 4px 16px; + + column-rule: 8px solid blue; + + row-rule: 2px solid purple; + row-rule-align: rule; + row-rule-extent: end; + row-rule-longitudinal-inset: 2px; + + border: 5px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; + padding: 10px; +} + +x { + inline-size: 50px; + block-size: 1.5em; + background: grey; +} + +.test1 { + column-rule-width: auto; + column-rule-lateral-inset: 2px 6px; +} +.test2 { + column-rule-width: auto; + column-rule-lateral-inset: auto 3px; +} +.test3 { + column-rule-width: auto; + column-rule-lateral-inset: auto; +} +.test4 { + column-rule-width: 2px; + column-rule-lateral-inset: 3px auto; +} +.test5 { + column-rule-width: 2px; + column-rule-lateral-inset: 10px 100px; +} +.test6 { + column-rule-width: auto; + column-rule-lateral-inset: 12px 100px; +} +.test7 { + column-rule-width: auto; + column-rule-lateral-inset: auto 30px; +} + +.grid::after { + position: absolute; + width: 200px; + bottom: -2em; + content: attr(test); + font-size: 10px; +} +pre { + font-size: 10px; +} +</style> + +<pre> +The triplet of values below each grid container are: +column-rule-lateral-inset-start, column-rule-width, column-rule-lateral-inset-end +</pre> +<div class="grid test1"><x>1</x><x>2</x></div> +<div class="grid test2"><x>1</x><x>2</x></div> +<div class="grid test3"><x>1</x><x>2</x></div><br> +<div class="grid test4"><x>1</x><x>2</x></div> +<div class="grid test5"><x>1</x><x>2</x></div><br> +<div class="grid test6"><x>1</x><x>2</x><x>3</x><x>4</x></div> +<div class="grid test7"><x>1</x><x>2</x><x>3</x><x>4</x></div> + + +<script> +window.onload = function() { + [...document.querySelectorAll('.grid')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + elm.setAttribute("test", + cs.columnRuleLateralInsetStart + ", " + + cs.columnRuleWidth + ", " + + cs.columnRuleLateralInsetEnd + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/grid-lateral-002.html b/layout/docs/css-gap-decorations/examples/grid-lateral-002.html new file mode 100644 index 0000000000..66ea9c2a38 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-lateral-002.html @@ -0,0 +1,66 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of column-rule-lateral-inset-start</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + position: relative; + display: inline-grid; + grid-template-columns: auto auto; + gap: 4px 16px; + + column-rule: solid blue; + + margin-right: 8ch; + background: lightgrey; + padding: 10px; +} + +x { + inline-size: 50px; + block-size: 1.5em; + background: grey; +} + +.test1 { + column-rule-lateral-inset-start: 0; +} +.test2 { + column-rule-lateral-inset-start: 3px; +} + +.grid::after { + position: absolute; + white-space: pre; + bottom: -2em; + content: attr(test); + font-size: 10px; +} +pre { + font-size: 10px; +} +</style> + +<pre> +Examples of aligning a rule at the start of the gap with a lateral offset: +</pre> +<div class="grid test1"><x>1</x><x>2</x></div> +<div class="grid test2"><x>1</x><x>2</x></div> + + +<script> +window.onload = function() { + [...document.querySelectorAll('.grid')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + elm.setAttribute("test", + "column-rule-lateral-inset-start: " + cs.columnRuleLateralInsetStart + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/grid-lateral-003.html b/layout/docs/css-gap-decorations/examples/grid-lateral-003.html new file mode 100644 index 0000000000..f478280820 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-lateral-003.html @@ -0,0 +1,66 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of column-rule-lateral-inset-end</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + position: relative; + display: inline-grid; + grid-template-columns: auto auto; + gap: 4px 16px; + + column-rule: solid blue; + + margin-right: 8ch; + background: lightgrey; + padding: 10px; +} + +x { + inline-size: 50px; + block-size: 1.5em; + background: grey; +} + +.test1 { + column-rule-lateral-inset-end: 0; +} +.test2 { + column-rule-lateral-inset-end: 3px; +} + +.grid::after { + position: absolute; + white-space: pre; + bottom: -2em; + content: attr(test); + font-size: 10px; +} +pre { + font-size: 10px; +} +</style> + +<pre> +Examples of aligning a rule at the end of the gap with a lateral offset: +</pre> +<div class="grid test1"><x>1</x><x>2</x></div> +<div class="grid test2"><x>1</x><x>2</x></div> + + +<script> +window.onload = function() { + [...document.querySelectorAll('.grid')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + elm.setAttribute("test", + "column-rule-lateral-inset-end: " + cs.columnRuleLateralInsetEnd + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/grid-lateral-004.html b/layout/docs/css-gap-decorations/examples/grid-lateral-004.html new file mode 100644 index 0000000000..7c9a249085 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-lateral-004.html @@ -0,0 +1,63 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Example of default rule alignment and size</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + position: relative; + display: inline-grid; + grid-template-columns: auto auto; + gap: 4px 16px; + + column-rule: solid blue; + + margin-right: 8ch; + background: lightgrey; + padding: 10px; +} + +x { + inline-size: 50px; + block-size: 1.5em; + background: grey; +} + +.grid::after { + position: absolute; + white-space: pre; + bottom: -8em; + content: attr(test); + font-size: 10px; +} +pre { + font-size: 10px; +} +</style> + +<pre> +Example showing the default rule alignment and size: +</pre> +<div class="grid test1"><x>1</x><x>2</x></div> + + +<script> +window.onload = function() { + [...document.querySelectorAll('.grid')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + elm.setAttribute("test", + "column-rule-lateral-inset-start: " + cs.columnRuleLateralInsetStart + "\n" + + "column-rule-lateral-inset-end: " + cs.columnRuleLateralInsetEnd + "\n" + + "column-rule-width: " + cs.columnRuleWidth + "\n\n" + + "column-rule-longitudinal-inset-start: " + cs.columnRuleLongitudinalInsetStart + "\n" + + "column-rule-longitudinal-inset-end: " + cs.columnRuleLongitudinalInsetEnd + "\n" + + "column-rule-length: " + cs.columnRuleLength + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/grid-longitudinal-001.html b/layout/docs/css-gap-decorations/examples/grid-longitudinal-001.html new file mode 100644 index 0000000000..d1eea4188c --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-longitudinal-001.html @@ -0,0 +1,95 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of rule longitudinal properties</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 20px 30px 40px; + gap: 20px; + + column-rule: 6px solid blue; + + row-rule: 6px solid purple; + row-rule-extent: long; + + border: 2px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; +} + +.test1 { + column-rule-longitudinal-inset: 4px; + row-rule-longitudinal-inset: 4px; + column-rule-longitudinal-edge-inset: 4px; + row-rule-longitudinal-edge-inset: 4px; +} + +.test2 { + column-rule-length: 50%; + row-rule-length: 50%; + column-rule-longitudinal-inset: auto; + row-rule-longitudinal-inset: auto; + column-rule-longitudinal-edge-inset: auto; + row-rule-longitudinal-edge-inset: auto; +} + +.test3 { + column-rule-width: 100%; + row-rule-width: 100%; +} + +.test4 { + column-rule-width: 30%; + row-rule-width: 30%; + column-rule-lateral-inset-end: 0px; + row-rule-lateral-inset-end: 0px; +} + +.test5 { + column-rule-width: 150%; + row-rule-width: 150%; + column-rule-lateral-inset-end: 0px; + row-rule-lateral-inset-end: 0px; +} + +x { + block-size: 48px; + background: grey; + opacity: 0.5; +} +x:nth-child(2), x:nth-child(6) { + grid-column: span 2; +} + +.grid::after { + position: absolute; + top: 120px; + width: 500px; + font-size: 10px; + vertical-align: top; + white-space: pre; +} +pre { font-size: 10px; } + +.test1::after { content: "*-rule-length: auto;\0Alongitudinal insets: 4px"; } +.test2::after { content: "*-rule-length: 50%;\0Alongitudinal insets: auto"; } +.test3::after { content: "*-rule-width: 100%"; } +.test4::after { content: "*-rule-width: 30%;\0Alateral end insets: 0px"; } +.test5::after { content: "*-rule-width: 150%;\0Alateral end insets: 0px"; } +</style> +<pre>Note that the grid items have 'opacity: 0.5' to show +any rules underneath them.</pre> +<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> +<div class="grid test2"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> +<div class="grid test3"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> +<div class="grid test4"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> +<div class="grid test5"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> diff --git a/layout/docs/css-gap-decorations/examples/grid-longitudinal-002.html b/layout/docs/css-gap-decorations/examples/grid-longitudinal-002.html new file mode 100644 index 0000000000..750fd24a70 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-longitudinal-002.html @@ -0,0 +1,57 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of rule longitudinal properties</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +@keyframes lat { + 0%, 33% { column-rule-lateral-inset-start: 0px; row-rule-lateral-inset-end: 0px; } + 33%, 50% { column-rule-lateral-inset-start: calc(100% - 6px); row-rule-lateral-inset-end: calc(100% - 6px); } + 50%, 100% { column-rule-lateral-inset-start: 0px; row-rule-lateral-inset-end: 0; } +} + +.grid { + display: inline-grid; + grid-template-columns: repeat(3, 50px); + gap: 10px; + width: 250px; + height: 200px; + place-content: space-around; + + animation: lat 5s infinite; + + column-rule: 6px solid blue; + column-rule-align: rule; + column-rule-longitudinal-inset: 3px; + column-rule-edge-align: gap-over; + column-rule-longitudinal-edge-inset: 10px; + + row-rule: 6px solid purple; + row-rule-align: rule; + row-rule-edge-align: gap-over; + row-rule-longitudinal-inset: 1px; + row-rule-longitudinal-edge-inset: -2px; + row-rule-extent: long; + + border: 2px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; +} + +x { + block-size: 48px; + background: grey; +} +x:nth-child(2), x:nth-child(6) { + grid-column: span 2; +} + +</style> + +<div class="grid"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div> diff --git a/layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html b/layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html new file mode 100644 index 0000000000..925ce3018b --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html @@ -0,0 +1,46 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of rule overflow and clipping.</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 2ch 2ch; + gap: 20px; + + column-rule: 6px solid blue; + column-rule-longitudinal-edge-inset: min(-100vw, -100vh); + + row-rule: 6px solid lime; + row-rule-longitudinal-edge-inset: min(-100vw, -100vh); + + border: 4px dotted; + margin: 30px; + padding: 1ch; + background: lightgrey; +} + +.test2 { overflow: hidden; } + +x { + block-size: 48px; + background: grey; +} + +pre { + font-size: 10px; +} +</style> +<body> +<pre>Both grids have '*-edge-inset: min(-100vw, -100vh)'. +The right grid has 'overflow: hidden' which clips its rules at the padding edge.</pre> + <div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x></div> + <div class="grid test2" style="top:100px "><x>1</x><x>2</x><x>3</x><x>4</x></div> +</body> diff --git a/layout/docs/css-gap-decorations/examples/grid-masonry-001.html b/layout/docs/css-gap-decorations/examples/grid-masonry-001.html new file mode 100644 index 0000000000..e47dfae1fb --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-masonry-001.html @@ -0,0 +1,77 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of 'column-rule-extent' values in a Masonry grid layout.</title> +<style> +.grid { + position: relative; + display: inline-grid; + grid: masonry / 3ch 4ch 5ch; + gap: 20px; + margin-right: 20px; + margin-bottom: 40px; + background: lightgrey; + + block-size: 160px; + align-content: center; + + column-rule: solid blue; + column-rule-align: rule; + column-rule-edge-align: gap-over; + row-rule: 6px solid purple; + row-rule-extent: all-long; +} +.segment { column-rule-extent: segment; } +.segment-allow-overlap { column-rule-extent: segment allow-overlap; } +.short-allow-overlap { column-rule-extent: short allow-overlap; } +.short { column-rule-extent: short; } +.long-allow-overlap { column-rule-extent: long allow-overlap; } +.long { column-rule-extent: long; } +.start { column-rule-extent: start; } +.end { column-rule-extent: end; } +.all-long-allow-overlap { column-rule-extent: all-long allow-overlap; } +.all-long { column-rule-extent: all-long; } + +x { + background: grey; + opacity: 0.5; +} +x:nth-child(1) { padding-block-start: 30px; } +x:nth-child(2) { grid-column:span 2 } +x:nth-child(3) { padding-block-end: 20px; } +x:nth-child(7) { grid-column: span 2; } +x:nth-child(8) { padding-block-end: 10px; } + +.grid::after { + position: absolute; + bottom: -3em; + font-size: 10px; + font-style: italic; + vertical-align: top; + content: attr(test); + white-space: pre; +} +pre { font-size: 10px; } +</style> + +<pre>All have <i>'column-rule-edge-align: gap-over'</i> to extend +the edge rules out to the content-box edge.</pre> + +<div class="grid short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> +<div class="grid long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> +<div class="grid start"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> +<div class="grid end"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> + +<script> +window.onload = function() { + [...document.querySelectorAll('.grid')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + elm.setAttribute("test", + "'column-rule-extent: " + cs.columnRuleExtent + "' \n" + + "'column-rule-align: " + cs.columnRuleAlign + "'" + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/grid-masonry-002.html b/layout/docs/css-gap-decorations/examples/grid-masonry-002.html new file mode 100644 index 0000000000..f984ea36aa --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-masonry-002.html @@ -0,0 +1,78 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of 'column-rule-extent: all-*' values in a Masonry grid layout.</title> +<style> +.grid { + position: relative; + display: inline-grid; + grid: masonry / 3ch 4ch 5ch; + gap: 20px; + margin-right: 20px; + margin-bottom: 40px; + background: lightgrey; + + block-size: 160px; + align-content: center; + align-tracks: center; + + column-rule: solid blue; + column-rule-align: rule; + row-rule: 6px solid purple; + row-rule-align: rule; +} + +.all-start { column-rule-extent: all-start; column-rule-lateral-inset-start: 0; } +.all-end { column-rule-extent: all-end; column-rule-lateral-inset-end: 0; } +.all-short { column-rule-extent: all-short; } +.all-long { column-rule-extent: all-long; } + +x { + background: grey; + opacity: 0.5; +} +x:nth-child(1) { } +x:nth-child(2) { } +x:nth-child(3) { padding-block-end: 30px; } +x:nth-child(7) { } +x:nth-child(8) { padding-block-end: 20px; } + +.grid::after { + position: absolute; + bottom: -2.5em; + font-size: 10px; + font-style: italic; + vertical-align: top; + content: attr(test); + white-space: pre; +} +pre { font-size: 10px; } +</style> + +<pre>All have 'row-rule-align: rule' to make the purple rules +align with the nearest edge of the blue column rules. + +In the bottom two grids, 'column-rule-lateral-inset-start/end' +is zero, respectively, to make the blue rule attach to the side +of the track that it used for its longitudinal sizing. +</pre> + +<div class="grid all-short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> +<div class="grid all-long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> +<div class="grid all-start"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> +<div class="grid all-end"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> + +<script> +window.onload = function() { + [...document.querySelectorAll('.grid')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + var inset = cs.columnRuleLateralInsetStart + " " + cs.columnRuleLateralInsetEnd; + inset = inset != "auto auto" ? ("\n" + "'column-rule-lateral-inset: " + inset) : ""; + elm.setAttribute("test", + "'column-rule-extent: " + cs.columnRuleExtent + inset + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/grid-masonry-003.html b/layout/docs/css-gap-decorations/examples/grid-masonry-003.html new file mode 100644 index 0000000000..aa0e0c5f6a --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-masonry-003.html @@ -0,0 +1,70 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of 'column-rule-extent' values in a Masonry grid layout.</title> +<style> +.grid { + position: relative; + display: inline-grid; + grid: masonry / 3ch 4ch 5ch; + gap: 20px; + margin-right: 20px; + margin-bottom: 40px; + background: lightgrey; + + block-size: 180px; + align-tracks: start, center, end; + + column-rule: solid blue; + column-rule-align: rule; + row-rule: 6px solid purple; + row-rule-extent: all-long; + row-rule-align: rule; + row-rule-longitudinal-inset: 2px; +} + +.all-short { column-rule-extent: all-short; } +.all-start { column-rule-extent: all-start; } +.all-end { column-rule-extent: all-end; } +.all-long { column-rule-extent: all-long; } + +x { + background: grey; + opacity: 0.5; +} +x:nth-child(1) { padding-block-start: 30px; } +x:nth-child(2) { } +x:nth-child(3) { padding-block-end: 20px; } +x:nth-child(7) { } +x:nth-child(8) { padding-block-end: 20px; } + +.grid::after { + position: absolute; + bottom: -3em; + font-size: 10px; + font-style: italic; + vertical-align: top; + content: attr(test); + white-space: pre; +} +pre { font-size: 10px; } +</style> + +<pre></pre> + +<div class="grid all-short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div> +<div class="grid all-long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div><br> + +<script> +window.onload = function() { + [...document.querySelectorAll('.grid')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + elm.setAttribute("test", + "'column-rule-extent: " + cs.columnRuleExtent + "' \n" + + "'column-rule-align: " + cs.columnRuleAlign + "'" + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/grid-segment-001.html b/layout/docs/css-gap-decorations/examples/grid-segment-001.html new file mode 100644 index 0000000000..8be5060d58 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-segment-001.html @@ -0,0 +1,35 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Example of 'column-rule-extent: segment' on a grid container</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + display: inline-grid; + grid: repeat(3, 30px) / auto 20px 40px; + gap: 10px 16px; + + column-rule: solid blue; + column-rule-extent: segment; + row-rule: solid purple; + row-rule-extent: segment; + + border: 2px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; +} + +x { + grid-column: 1; + background: grey; +} + +</style> + +<div class="grid"><x>row 1</x><x>row 2</x><x>row 3</x></div> diff --git a/layout/docs/css-gap-decorations/examples/grid-segment-002.html b/layout/docs/css-gap-decorations/examples/grid-segment-002.html new file mode 100644 index 0000000000..2e64062c4a --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-segment-002.html @@ -0,0 +1,38 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Example of 'column-rule-extent: segment' on a grid container with collapsed tracks</title> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; +} + +.grid { + display: inline-grid; + grid: repeat(3, 30px) / repeat(auto-fit, minmax(0,1fr) 100px minmax(0,1fr)); + width: 300px; + gap: 10px 16px; + + column-rule: solid blue; + column-rule-extent: segment; + row-rule: solid purple; + row-rule-extent: segment; + + border: 2px solid; + margin-right: 15px; + margin-bottom: 30px; + background: lightgrey; +} + +x { + grid-column: 1; + place-self: start; + background: grey; +} +x:nth-child(4) { grid-column: 3; } + +</style> + +<div class="grid"><x>row 1</x><x>row 2</x><x>row 3</x><x>column 3</x></div> diff --git a/layout/docs/css-gap-decorations/examples/grid-subgrid-001.html b/layout/docs/css-gap-decorations/examples/grid-subgrid-001.html new file mode 100644 index 0000000000..7c34e9e938 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/grid-subgrid-001.html @@ -0,0 +1,73 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of subgrid rules.</title> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 30px 50px 70px; + inline-size: 200px; + gap: 8px; + place-content: center; + border: 2px solid; + + column-rule: auto solid; + column-rule-image: linear-gradient(#f008,#fc08); + column-rule-extent: all-long allow-overlap; + row-rule: 6px solid purple; + row-rule-extent: all-long; +} + +.subgrid { + display: grid; + grid: subgrid / subgrid; + grid-column: 1 / span 2; + grid-row: 2 / span 2; + border: 1px dashed; + margin: 6px; + + column-rule: 2px solid red; + row-rule: solid blue; + row-rule-align: rule; + row-rule-edge-align: gap-over; +} + +.subgrid.larger { + gap: 16px; + row-rule-lateral-inset-start: 1px; +} + +.subgrid.smaller { + gap: 4px; + row-rule-width: 100%; +} + +x { + background: grey; + opacity: 0.5; +} + +.grid::after { + position: absolute; + bottom: -3em; + font-size: 10px; + font-style: italic; + vertical-align: top; + content: attr(test); +} +</style> + +<div class="grid" test="A subgrid with a larger gap than the parent."> + <x>1</x><x>2</x><x>3</x> + <div class="subgrid larger"><x>4</x><x>5</x><x>6</x></div> + <x>7</x><x>8</x> +</div> + +<div class="grid" test="A subgrid with a smaller gap than the parent."> + <x>1</x><x>2</x><x>3</x> + <div class="subgrid smaller"><x>4</x><x>5</x><x>6</x></div> + <x>7</x><x>8</x> +</div> diff --git a/layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.png b/layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.png Binary files differnew file mode 100644 index 0000000000..5478ae2e28 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.png diff --git a/layout/docs/css-gap-decorations/examples/multicol-row-rule-001.html b/layout/docs/css-gap-decorations/examples/multicol-row-rule-001.html new file mode 100644 index 0000000000..f44cd2c906 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/multicol-row-rule-001.html @@ -0,0 +1,72 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Examples of column and row rules in a multi-column container</title> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; +} + +.columns { + column-width: 6ch; + gap: 16px 10px; + + column-rule: 4px solid blue; + row-rule: 4px solid purple; + row-rule-align: rule; + + inline-size: 30ch; + background: lightgrey; +} +.test1 { row-rule-extent: short; } +.test2 { row-rule-extent: long; } +.test3 { row-rule-extent: start; } +.test4 { row-rule-extent: end; } +.test5 { row-rule-extent: all-short; } +.test6 { row-rule-extent: all-start; } +.test7 { row-rule-extent: all-end; } +.test8 { block-size: calc(32px + 3em); row-rule-extent: all-long; } +.test9 { block-size: calc(32px + 3em); row-rule-extent: long; } + +x,a { + display: block; + background: grey; +} +a { column-span: all; } + +wrapper { + position: relative; + display: inline-block; + margin-bottom: 2.5em; +} +wrapper::after { + position: absolute; + bottom: -1.5em; + font-size: 10px; + vertical-align: top; + content: attr(test); + white-space: pre; +} +</style> +<wrapper><div class="columns test1"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper> +<wrapper><div class="columns test2"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper><br> +<wrapper><div class="columns test3"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper> +<wrapper><div class="columns test4"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper><br> +<wrapper><div class="columns test5"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper> +<wrapper><div class="columns test6"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper><br> +<wrapper><div class="columns test7"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper> +<wrapper><div class="columns test8"><x>1</x><x>2</x><a>column-span: all</a><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div></wrapper><br> +<wrapper><div class="columns test9"><x>1</x><x>2</x><a>column-span: all</a><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div></wrapper><br> + +<script> +window.onload = function() { + [...document.querySelectorAll('.columns')].forEach(function(elm) { + const cs = window.getComputedStyle(elm); + elm.parentNode.setAttribute("test", + "row-rule-extent: " + cs.rowRuleExtent + ); + }); +} +</script> diff --git a/layout/docs/css-gap-decorations/examples/table-row-group-rules-001.html b/layout/docs/css-gap-decorations/examples/table-row-group-rules-001.html new file mode 100644 index 0000000000..b5a693f0ab --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/table-row-group-rules-001.html @@ -0,0 +1,105 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Example of rules between table-rows and table-cells</title> +<style> +table { + display: inline-table; + border-spacing: 10px 20px; + background-color: lightgrey; + caption-side: bottom; +} + +thead, tfoot, tbody { + column-rule: solid magenta; + column-rule-extent: long; + + row-rule: solid orange; + row-rule-extent: long; + row-rule-align: rule; +} + +thead { + column-rule-color: brown; +} + +table > .all-long { + column-rule-extent: all-long; + row-rule-extent: all-long; + row-rule-align: rule-over; +} + +table.rules { + column-rule: 6px solid blue; + column-rule-extent: long; + column-rule-align: rule; + + row-rule: 3px solid green; + row-rule-longitudinal-inset: 1px; + row-rule-align: rule; +} +table.rules.all-long { + column-rule-extent: all-long; + column-rule-edge-align: gap-over; +} + +pre,caption { font-size: 10px; text-align: start; } +</style> + +<table> + <caption>*-rule-extent: long</caption> + <colgroup><col><col></colgroup> + <colgroup><col width=100><col></colgroup> + <thead> + <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> + </thead> + <tbody> + <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td> + <tr><td colspan=2>1,2</td><td>3</td><td>4</td> + </tbody> +</table> + +<table> + <caption>*-rule-extent: all-long;<br>row-rule-align: rule-over<br></caption> + <colgroup><col><col></colgroup> + <colgroup><col width=100><col></colgroup> + <thead class="all-long"> + <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> + </thead> + <tbody class="all-long"> + <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td> + <tr><td colspan=2>1,2</td><td>3</td><td>4</td> + </tbody> +</table> + +<br> +<br> +<pre>Same thing, now with table rules from the last example also applied:</pre> + +<table class="rules"> + <caption>*-rule-extent: long</caption> + <colgroup><col><col></colgroup> + <colgroup><col width=100><col></colgroup> + <thead> + <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> + </thead> + <tbody> + <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td> + <tr><td colspan=2>1,2</td><td>3</td><td>4</td> + </tbody> +</table> + +<table class="rules all-long"> + <caption>*-rule-extent: all-long;<br>row-rule-align: rule-over<br></caption> + <colgroup><col><col></colgroup> + <colgroup><col width=100><col></colgroup> + <thead class="all-long"> + <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> + </thead> + <tbody class="all-long"> + <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td> + <tr><td colspan=2>1,2</td><td>3</td><td>4</td> + </tbody> +</table> diff --git a/layout/docs/css-gap-decorations/examples/table-rules-001.html b/layout/docs/css-gap-decorations/examples/table-rules-001.html new file mode 100644 index 0000000000..f909a19839 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/table-rules-001.html @@ -0,0 +1,66 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<title>Example of rules between table-column-groups and table-row-groups</title> +<style> +table { + display: inline-table; + border-spacing: 10px 20px; + + column-rule: 6px solid blue; + column-rule-extent: long; + column-rule-align: rule; + + row-rule: 3px solid green; + row-rule-longitudinal-inset: 1px; + row-rule-align: rule; + + background-color: lightgrey; + caption-side: bottom; +} + +table:nth-of-type(2) { + column-rule-extent: all-long; + column-rule-edge-align: gap-over; +} + +pre,caption { font-size: 10px; text-align: start; } +</style> + +<pre>Note: column 2 is collapsed.</pre> + +<table> + <caption>column-rule-extent: long</caption> + <colgroup> + <col> + <col style="visibility:collapse"> + </colgroup> + <colgroup><col width=100></colgroup> + <colgroup><col><col></colgroup> + <thead> + <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> + </thead> + <tbody> + <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> + <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> + </tbody> +</table> + +<table> + <caption>column-rule-extent: all-long;<br>column-rule-edge-align: gap-over</caption> + <colgroup> + <col> + <col style="visibility:collapse"> + </colgroup> + <colgroup><col width=100></colgroup> + <colgroup><col><col></colgroup> + <thead> + <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> + </thead> + <tbody> + <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> + <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> + </tbody> +</table> diff --git a/layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.png b/layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.png Binary files differnew file mode 100644 index 0000000000..420a9a0ccc --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.png diff --git a/layout/docs/css-gap-decorations/media/flexbox-coupon-rule.png b/layout/docs/css-gap-decorations/media/flexbox-coupon-rule.png Binary files differnew file mode 100644 index 0000000000..033f15c002 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/flexbox-coupon-rule.png diff --git a/layout/docs/css-gap-decorations/media/flexbox-extent-all-long-001.png b/layout/docs/css-gap-decorations/media/flexbox-extent-all-long-001.png Binary files differnew file mode 100644 index 0000000000..53b45068c9 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/flexbox-extent-all-long-001.png diff --git a/layout/docs/css-gap-decorations/media/flexbox-extent-all-long-allow-overlap-001.png b/layout/docs/css-gap-decorations/media/flexbox-extent-all-long-allow-overlap-001.png Binary files differnew file mode 100644 index 0000000000..dd8e220582 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/flexbox-extent-all-long-allow-overlap-001.png diff --git a/layout/docs/css-gap-decorations/media/flexbox-extent-all-short-001.png b/layout/docs/css-gap-decorations/media/flexbox-extent-all-short-001.png Binary files differnew file mode 100644 index 0000000000..dd01a6a9e3 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/flexbox-extent-all-short-001.png diff --git a/layout/docs/css-gap-decorations/media/flexbox-extent-end-001.png b/layout/docs/css-gap-decorations/media/flexbox-extent-end-001.png Binary files differnew file mode 100644 index 0000000000..595ea211bd --- /dev/null +++ b/layout/docs/css-gap-decorations/media/flexbox-extent-end-001.png diff --git a/layout/docs/css-gap-decorations/media/flexbox-extent-long-001.png b/layout/docs/css-gap-decorations/media/flexbox-extent-long-001.png Binary files differnew file mode 100644 index 0000000000..b6a46cc2d1 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/flexbox-extent-long-001.png diff --git a/layout/docs/css-gap-decorations/media/flexbox-extent-start-001.png b/layout/docs/css-gap-decorations/media/flexbox-extent-start-001.png Binary files differnew file mode 100644 index 0000000000..faccd739c4 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/flexbox-extent-start-001.png diff --git a/layout/docs/css-gap-decorations/media/grid-align-001.png b/layout/docs/css-gap-decorations/media/grid-align-001.png Binary files differnew file mode 100644 index 0000000000..40d32c37c0 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-align-001.png diff --git a/layout/docs/css-gap-decorations/media/grid-extent-001.png b/layout/docs/css-gap-decorations/media/grid-extent-001.png Binary files differnew file mode 100644 index 0000000000..d2a229ee51 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-extent-001.png diff --git a/layout/docs/css-gap-decorations/media/grid-gradient-001.png b/layout/docs/css-gap-decorations/media/grid-gradient-001.png Binary files differnew file mode 100644 index 0000000000..0999f16269 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-gradient-001.png diff --git a/layout/docs/css-gap-decorations/media/grid-image-001.png b/layout/docs/css-gap-decorations/media/grid-image-001.png Binary files differnew file mode 100644 index 0000000000..7b59b9eb3e --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-image-001.png diff --git a/layout/docs/css-gap-decorations/media/grid-image-002.webm b/layout/docs/css-gap-decorations/media/grid-image-002.webm Binary files differnew file mode 100644 index 0000000000..4548a73d2c --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-image-002.webm diff --git a/layout/docs/css-gap-decorations/media/grid-lateral-001.png b/layout/docs/css-gap-decorations/media/grid-lateral-001.png Binary files differnew file mode 100644 index 0000000000..366f3d7d43 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-lateral-001.png diff --git a/layout/docs/css-gap-decorations/media/grid-lateral-002.png b/layout/docs/css-gap-decorations/media/grid-lateral-002.png Binary files differnew file mode 100644 index 0000000000..e706b9106f --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-lateral-002.png diff --git a/layout/docs/css-gap-decorations/media/grid-lateral-003.png b/layout/docs/css-gap-decorations/media/grid-lateral-003.png Binary files differnew file mode 100644 index 0000000000..57a2aede39 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-lateral-003.png diff --git a/layout/docs/css-gap-decorations/media/grid-lateral-004.png b/layout/docs/css-gap-decorations/media/grid-lateral-004.png Binary files differnew file mode 100644 index 0000000000..57fcf28f36 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-lateral-004.png diff --git a/layout/docs/css-gap-decorations/media/grid-longitudinal-001.png b/layout/docs/css-gap-decorations/media/grid-longitudinal-001.png Binary files differnew file mode 100644 index 0000000000..0b9d20cae2 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-longitudinal-001.png diff --git a/layout/docs/css-gap-decorations/media/grid-longitudinal-002.webm b/layout/docs/css-gap-decorations/media/grid-longitudinal-002.webm Binary files differnew file mode 100644 index 0000000000..ae81b079ca --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-longitudinal-002.webm diff --git a/layout/docs/css-gap-decorations/media/grid-longitudinal-003.png b/layout/docs/css-gap-decorations/media/grid-longitudinal-003.png Binary files differnew file mode 100644 index 0000000000..2a588dec54 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-longitudinal-003.png diff --git a/layout/docs/css-gap-decorations/media/grid-masonry-001.png b/layout/docs/css-gap-decorations/media/grid-masonry-001.png Binary files differnew file mode 100644 index 0000000000..c7eb0add9a --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-masonry-001.png diff --git a/layout/docs/css-gap-decorations/media/grid-masonry-002.png b/layout/docs/css-gap-decorations/media/grid-masonry-002.png Binary files differnew file mode 100644 index 0000000000..1b7cd1a779 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-masonry-002.png diff --git a/layout/docs/css-gap-decorations/media/grid-segment-001.png b/layout/docs/css-gap-decorations/media/grid-segment-001.png Binary files differnew file mode 100644 index 0000000000..b6551e4805 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-segment-001.png diff --git a/layout/docs/css-gap-decorations/media/grid-segment-002.png b/layout/docs/css-gap-decorations/media/grid-segment-002.png Binary files differnew file mode 100644 index 0000000000..ed0c07ac5c --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-segment-002.png diff --git a/layout/docs/css-gap-decorations/media/grid-subgrid-001.png b/layout/docs/css-gap-decorations/media/grid-subgrid-001.png Binary files differnew file mode 100644 index 0000000000..0cd819d9ea --- /dev/null +++ b/layout/docs/css-gap-decorations/media/grid-subgrid-001.png diff --git a/layout/docs/css-gap-decorations/media/masonry-all-shorter.png b/layout/docs/css-gap-decorations/media/masonry-all-shorter.png Binary files differnew file mode 100644 index 0000000000..04c17f051c --- /dev/null +++ b/layout/docs/css-gap-decorations/media/masonry-all-shorter.png diff --git a/layout/docs/css-gap-decorations/media/multicol-colspan-2.png b/layout/docs/css-gap-decorations/media/multicol-colspan-2.png Binary files differnew file mode 100644 index 0000000000..4ba57b8c71 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/multicol-colspan-2.png diff --git a/layout/docs/css-gap-decorations/media/multicol-row-rule-001.png b/layout/docs/css-gap-decorations/media/multicol-row-rule-001.png Binary files differnew file mode 100644 index 0000000000..eba8394add --- /dev/null +++ b/layout/docs/css-gap-decorations/media/multicol-row-rule-001.png diff --git a/layout/docs/css-gap-decorations/media/rule-alignment-values.png b/layout/docs/css-gap-decorations/media/rule-alignment-values.png Binary files differnew file mode 100644 index 0000000000..ffcbad9d46 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/rule-alignment-values.png diff --git a/layout/docs/css-gap-decorations/media/rule-containing-rectangle.png b/layout/docs/css-gap-decorations/media/rule-containing-rectangle.png Binary files differnew file mode 100644 index 0000000000..a7e306eb75 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/rule-containing-rectangle.png diff --git a/layout/docs/css-gap-decorations/media/table-row-group-rules-001.png b/layout/docs/css-gap-decorations/media/table-row-group-rules-001.png Binary files differnew file mode 100644 index 0000000000..0586f3fc70 --- /dev/null +++ b/layout/docs/css-gap-decorations/media/table-row-group-rules-001.png diff --git a/layout/docs/css-gap-decorations/media/table-rules-001.png b/layout/docs/css-gap-decorations/media/table-rules-001.png Binary files differnew file mode 100644 index 0000000000..19cc58f3ac --- /dev/null +++ b/layout/docs/css-gap-decorations/media/table-rules-001.png diff --git a/layout/docs/index.rst b/layout/docs/index.rst new file mode 100644 index 0000000000..16d9df8b05 --- /dev/null +++ b/layout/docs/index.rst @@ -0,0 +1,15 @@ +Layout & CSS +============ + +Here contains design documents for the Gecko's style system and layout engine. +They live in the mozilla-central repository under layout/docs directory. + +`Layout page <https://wiki.mozilla.org/Platform/Layout>`__ on mozilla wiki +contains general information about layout and the layout team at Mozilla. + +.. toctree:: + :maxdepth: 1 + + AccessibleCaret + Reftest + LayoutDebugger |
