-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[layout] 2 tests for stretch keyword
fixed-layout table and aspect ratio. Basic stuff. Bug: 41253915 Change-Id: I4c4b4ffc0966f1c1f84c84d79e4ecdbd1039f494 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5991879 Commit-Queue: David Grogan <[email protected]> Reviewed-by: David Baron <[email protected]> Cr-Commit-Position: refs/heads/main@{#1378522}
- Loading branch information
1 parent
d017b5e
commit 40792a6
Showing
2 changed files
with
73 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" | ||
| href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> | ||
| <script src='/resources/testharness.js'></script> | ||
| <script src='/resources/testharnessreport.js'></script> | ||
| <script src="/resources/check-layout-th.js"></script> | ||
| <meta name="assert" | ||
| content="stretch keyword works in the presence of aspect-ratio"> | ||
|
|
||
| <style> | ||
| p { | ||
| margin-bottom: 4px; | ||
| } | ||
|
|
||
| .grandchild { | ||
| width: 30px; | ||
| height: 40px; | ||
| } | ||
| </style> | ||
|
|
||
| <body onload="checkLayout('p + div > div')"> | ||
|
|
||
| <p>basic stretch into definite width</p> | ||
| <div style="width: 100px;"> | ||
| <div style="outline: 5px solid; aspect-ratio: 2 / 1; width: stretch;" | ||
| data-expected-height="50"> | ||
| <div class="grandchild"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>basic stretch into definite height</p> | ||
| <div style="height: 100px;"> | ||
| <div style="outline: 5px solid; aspect-ratio: 2 / 1; height: stretch;" | ||
| data-expected-width="200"> | ||
| <div class="grandchild"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>indefinite height stretch is ignored</p> | ||
| <div style="width: 100px;"> | ||
| <div style="outline: 5px solid; aspect-ratio: 2 / 1; height: stretch;" | ||
| data-expected-height="50"> | ||
| <div class="grandchild"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>indefinite min-height stretch is ignored</p> | ||
| <div style="width: 100px;"> | ||
| <div style="outline: 5px solid; aspect-ratio: 2 / 1; min-height: stretch;" | ||
| data-expected-height="50"> | ||
| <div class="grandchild"></div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" | ||
| href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10937"> | ||
| <link rel="match" | ||
| href="../../reference/ref-filled-green-100px-square-only.html"> | ||
| <meta name="assert" | ||
| content="stretch width allows fixed-layout table mode to take effect"> | ||
|
|
||
|
|
||
| <p>Test passes if there is a filled green square.</p> | ||
|
|
||
| <div style="width: 100px;"> | ||
| <div | ||
| style="display: table; table-layout: fixed; width: stretch; background: green;"> | ||
| <div style="display: table-cell; width: 100px;"> | ||
| <div style="width: 200px; height: 100px;"></div> | ||
| </div> | ||
| </div> | ||
| </div> |