forked from chromium/chromium
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CSS Grid Layout] Handle alignment with orthogonal flows
Now that grid sizing and positioning issues wrt orthogonal flows have been clarified in the last spec draft, we can adapt now our alignment logic to work with orthogonal flows. Even though basic alignment would work with orthogonal flows with this patch, we still doesn't allow stretching in that case. I'll provide a patch for that feature since it's a complex logic and better have an isolated change. BUG=556171, 445742, 376823, 249451 Review-Url: https://codereview.chromium.org/842193004 Cr-Commit-Position: refs/heads/master@{#406557}
- Loading branch information
1 parent
66323a0
commit af5c216
Showing
8 changed files
with
522 additions
and
36 deletions.
There are no files selected for viewing
103 changes: 103 additions & 0 deletions
103
...youtTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
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,103 @@ | ||
| <!DOCTYPE html> | ||
| <link href="resources/grid.css" rel="stylesheet"> | ||
| <link href="resources/grid-alignment.css" rel="stylesheet"> | ||
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet"> | ||
| <script src="../../resources/testharness.js"></script> | ||
| <script src="../../resources/testharnessreport.js"></script> | ||
| <script src="../../resources/check-layout-th.js"></script> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| } | ||
| .container { | ||
| position: relative; | ||
| } | ||
| .grid { | ||
| grid-template-columns: 100px 100px; | ||
| grid-template-rows: 150px 150px; | ||
| } | ||
| .item { | ||
| width: 50px; | ||
| height: 20px; | ||
| } | ||
| </style> | ||
| <body onload="checkLayout('.grid')"> | ||
|
|
||
| <p>This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p> | ||
|
|
||
| <p>Direction: LTR vs LTR</p> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalLR directionLTR"> | ||
| <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="100" data-offset-y="80">end</div> | ||
| <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="50" data-offset-y="140">center</div> | ||
| <div class="item secondRowFirstColumn horizontalTB selfLeft" data-offset-x="150" data-offset-y="0">left</div> | ||
| <div class="item secondRowSecondColumn horizontalTB selfRight" data-offset-x="150" data-offset-y="180">right</div> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalLR directionLTR"> | ||
| <div class="item firstRowFirstColumn horizontalTB selfSelfEnd" data-offset-x="100" data-offset-y="80">s-end</div> | ||
| <div class="item firstRowSecondColumn horizontalTB selfStart" data-offset-x="0" data-offset-y="100">start</div> | ||
| <div class="item secondRowFirstColumn horizontalTB" data-offset-x="150" data-offset-y="0">default</div> | ||
| <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="150" data-offset-y="100">s-start</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>Direction: RTL vs LTR</p> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalLR directionRTL"> | ||
| <div class="item firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="100" data-offset-y="100">end</div> | ||
| <div class="item firstRowSecondColumn directionLTR horizontalTB selfCenter" data-offset-x="50" data-offset-y="40">center</div> | ||
| <div class="item secondRowFirstColumn directionLTR horizontalTB selfLeft" data-offset-x="150" data-offset-y="100">left</div> | ||
| <div class="item secondRowSecondColumn directionLTR horizontalTB selfRight" data-offset-x="150" data-offset-y="80">right</div> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalLR directionRTL"> | ||
| <div class="item firstRowFirstColumn directionLTR horizontalTB selfSelfEnd" data-offset-x="100" data-offset-y="180">s-end</div> | ||
| <div class="item firstRowSecondColumn directionLTR horizontalTB selfStart" data-offset-x="0" data-offset-y="80">start</div> | ||
| <div class="item secondRowFirstColumn directionLTR horizontalTB" data-offset-x="150" data-offset-y="180">default</div> | ||
| <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfStart" data-offset-x="150" data-offset-y="0">s-start</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>Direction: LTR vs RTL</p> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalLR directionLTR"> | ||
| <div class="item firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="100" data-offset-y="80">end</div> | ||
| <div class="item firstRowSecondColumn directionRTL horizontalTB selfCenter" data-offset-x="50" data-offset-y="140">center</div> | ||
| <div class="item secondRowFirstColumn directionRTL horizontalTB selfLeft" data-offset-x="150" data-offset-y="0">left</div> | ||
| <div class="item secondRowSecondColumn directionRTL horizontalTB selfRight" data-offset-x="150" data-offset-y="180">right</div> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalLR directionLTR"> | ||
| <div class="item firstRowFirstColumn directionRTL horizontalTB selfSelfEnd" data-offset-x="0" data-offset-y="80">s-end</div> | ||
| <div class="item firstRowSecondColumn directionRTL horizontalTB selfStart" data-offset-x="0" data-offset-y="100">start</div> | ||
| <div class="item secondRowFirstColumn directionRTL horizontalTB" data-offset-x="150" data-offset-y="0">default</div> | ||
| <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfStart" data-offset-x="250" data-offset-y="100">s-start</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>Direction: RTL vs RTL</p> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalLR directionRTL"> | ||
| <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="100" data-offset-y="100">end</div> | ||
| <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="50" data-offset-y="40">center</div> | ||
| <div class="item secondRowFirstColumn horizontalTB selfLeft" data-offset-x="150" data-offset-y="100">left</div> | ||
| <div class="item secondRowSecondColumn horizontalTB selfRight" data-offset-x="150" data-offset-y="80">right</div> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalLR directionRTL"> | ||
| <div class="item firstRowFirstColumn horizontalTB selfSelfEnd" data-offset-x="0" data-offset-y="180">s-end</div> | ||
| <div class="item firstRowSecondColumn horizontalTB selfStart" data-offset-x="0" data-offset-y="80">start</div> | ||
| <div class="item secondRowFirstColumn horizontalTB" data-offset-x="150" data-offset-y="180">default</div> | ||
| <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="250" data-offset-y="0">s-start</div> | ||
| </div> | ||
| </div> | ||
| </body> |
104 changes: 104 additions & 0 deletions
104
...youtTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
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,104 @@ | ||
| <!DOCTYPE html> | ||
| <link href="resources/grid.css" rel="stylesheet"> | ||
| <link href="resources/grid-alignment.css" rel="stylesheet"> | ||
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet"> | ||
| <script src="../../resources/testharness.js"></script> | ||
| <script src="../../resources/testharnessreport.js"></script> | ||
| <script src="../../resources/check-layout-th.js"></script> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| } | ||
| .container { | ||
| position: relative; | ||
| } | ||
| .grid { | ||
| grid-template-columns: 100px 100px; | ||
| grid-template-rows: 150px 150px; | ||
| } | ||
| .item { | ||
| width: 50px; | ||
| height: 20px; | ||
| } | ||
| </style> | ||
| <body onload="checkLayout('.grid')"> | ||
|
|
||
| <p>This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.</p> | ||
|
|
||
| <p>Direction: LTR vs LTR</p> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalRL directionLTR"> | ||
| <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="150" data-offset-y="80">end</div> | ||
| <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="200" data-offset-y="140">center</div> | ||
| <div class="item secondRowFirstColumn horizontalTB selfLeft" data-offset-x="100" data-offset-y="0">left</div> | ||
| <div class="item secondRowSecondColumn horizontalTB selfRight" data-offset-x="100" data-offset-y="180">right</div> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalRL directionLTR"> | ||
| <div class="item firstRowFirstColumn horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="80">s-end</div> | ||
| <div class="item firstRowSecondColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="100">start</div> | ||
| <div class="item secondRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="0">default</div> | ||
| <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="100">s-start</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>Direction: RTL vs LTR</p> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalRL directionRTL"> | ||
| <div class="item firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="150" data-offset-y="100">end</div> | ||
| <div class="item firstRowSecondColumn directionLTR horizontalTB selfCenter" data-offset-x="200" data-offset-y="40">center</div> | ||
| <div class="item secondRowFirstColumn directionLTR horizontalTB selfLeft" data-offset-x="100" data-offset-y="100">left</div> | ||
| <div class="item secondRowSecondColumn directionLTR horizontalTB selfRight" data-offset-x="100" data-offset-y="80">right</div> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalRL directionRTL"> | ||
| <div class="item firstRowFirstColumn directionLTR horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="180">s-end</div> | ||
| <div class="item firstRowSecondColumn directionLTR horizontalTB selfStart" data-offset-x="250" data-offset-y="80">start</div> | ||
| <div class="item secondRowFirstColumn directionLTR horizontalTB" data-offset-x="100" data-offset-y="180">default</div> | ||
| <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="0">s-start</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>Direction: LTR vs RTL</p> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalRL directionLTR"> | ||
| <div class="item firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="150" data-offset-y="80">end</div> | ||
| <div class="item firstRowSecondColumn directionRTL horizontalTB selfCenter" data-offset-x="200" data-offset-y="140">center</div> | ||
| <div class="item secondRowFirstColumn directionRTL horizontalTB selfLeft" data-offset-x="100" data-offset-y="0">left</div> | ||
| <div class="item secondRowSecondColumn directionRTL horizontalTB selfRight" data-offset-x="100" data-offset-y="180">right</div> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalRL directionLTR"> | ||
| <div class="item firstRowFirstColumn directionRTL horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="80">s-end</div> | ||
| <div class="item firstRowSecondColumn directionRTL horizontalTB selfStart" data-offset-x="250" data-offset-y="100">start</div> | ||
| <div class="item secondRowFirstColumn directionRTL horizontalTB" data-offset-x="100" data-offset-y="0">default</div> | ||
| <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="100">s-start</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>Direction: RTL vs RTL</p> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalRL directionRTL"> | ||
| <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="150" data-offset-y="100">end</div> | ||
| <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="200" data-offset-y="40">center</div> | ||
| <div class="item secondRowFirstColumn horizontalTB selfLeft" data-offset-x="100" data-offset-y="100">left</div> | ||
| <div class="item secondRowSecondColumn horizontalTB selfRight" data-offset-x="100" data-offset-y="80">right</div> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div class="container"> | ||
| <div class="grid fit-content verticalRL directionRTL"> | ||
| <div class="item firstRowFirstColumn horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="180">s-end</div> | ||
| <div class="item firstRowSecondColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="80">start</div> | ||
| <div class="item secondRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="180">default</div> | ||
| <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="0">s-start</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> |
Oops, something went wrong.