grid-gap-decorations-046.html

mozilla-central/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-046.html

Enable keyboard shortcuts

Source code

File a bug in Core :: CSS Parsing and Computation

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /css/css-gaps/grid/grid-gap-decorations-046.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>

  CSS Gap Decorations: rules are painted when container contains an OOF child.

</title>

<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">

<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">

<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div style="position: relative; display: grid; grid-template-columns: 0px 0px; grid-template-rows: 100px; column-gap: 100px; column-rule: solid green 100px; width: max-content; background:red;">

  <div id="target" style="position: absolute; left: 0; top: 0;"></div>

</div>

<script>

document.body.offsetTop;

target.style.left = '10px';

</script>