diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html | 216 |
1 files changed, 216 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html new file mode 100644 index 0000000000..d65696428c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html @@ -0,0 +1,216 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions"> +<style> + +.holder { + width: 300px; + height: 20px; + border-bottom: 2px solid #cfbfcf; +} + +.holder > :nth-child(2) { + clear: left; /* Forces the div to a new line to simulate a new grid row. */ + padding-top: 2px; /* Simulates the grid row gap. */ +} + +.grid-container > * { float: left; height: 8px; } + +.grid-container > :nth-child(3n) { background: sienna; } +.grid-container > :nth-child(3n+1) { background: gold; } +.grid-container > :nth-child(3n+2) { background: orange; } + +.alt-color > :nth-child(2n) { background: sienna; } +.alt-color > :nth-child(2n+1) { background: orange; } + +.invis { width: 0px; visibility: none; } + +</style> + +<p>The test passes if it has the same visual effect as reference.</p> + +<div class="holder"> + <div class="grid-container"> + <div style="width:30px; margin-left:30px"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:50px; margin-left:170px"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:30px; margin-left:30px"></div> + <div style="width:30px; margin-left:40px"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:30px; margin-left:20px"></div> + <div style="width:30px; margin-left:40px"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:30px; margin-left:30px"></div> + <div style="width:50px; margin-left:110px"></div> + <div style="width:60px;"></div> + </div> + <div class="grid-container"> + <div style="width:10px"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:30px; margin-left:20px"></div> + <div style="width:50px; margin-left:110px"></div> + <div style="width:60px;"></div> + </div> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:50px; margin-left:10px;"></div> + <div style="width:40px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:90px; margin-left:10px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:90px;"></div> + <div class="invis"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div style="width:120px;"></div> + <div style="width:40px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:90px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:50px;"></div> + <div class="invis"></div> + <div style="width:40px;"></div> + <div style="width:30px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div style="width:90px;"></div> + <div style="width:30px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:50px;"></div> + <div style="width:40px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:20px;"></div> + <div style="width:140px;"></div> + <div style="width:50px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:20px;"></div> + <div class="invis"></div> + <div style="width:140px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div style="width:30px;"></div> + <div style="width:140px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:140px; margin-left:20px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:210px;"></div> + </div> +</div> + |