-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix sizing of orthogonal elements with percentage margins
LayoutBox::FillAvailableMeasure() was not considering the case of orthogonal elements when computing the margins. The margins ended up being properly calculated but the size of the orthogonal elements was wrong, as they considered to have more or less space than the available one. The method is modified in order to use the containing block inline size in order to resolve the percentages: https://www.w3.org/TR/css-writing-modes-3/#dimension-mapping BUG=808758 TEST=external/wpt/css/css-writing-modes/sizing-orthogonal-percentage-margin-00*.html Change-Id: Ib8c81dcd14589b3fefe806de3f8f75c000b1cac9
- Loading branch information
1 parent
c37c863
commit cc6c15e
Showing
14 changed files
with
380 additions
and
0 deletions.
There are no files selected for viewing
25 changes: 25 additions & 0 deletions
25
css/css-writing-modes/sizing-orthogonal-percentage-margin-001-ref.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,25 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 200px; | ||
| width: 500px; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 25px/1 Ahem; | ||
| margin: 50px; | ||
| height: 100px; | ||
| writing-mode: vertical-lr; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
28 changes: 28 additions & 0 deletions
28
css/css-writing-modes/sizing-orthogonal-percentage-margin-001.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,28 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping"> | ||
| <link rel="match" href="sizing-orthogonal-percentage-margin-001-ref.html"> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <meta name="assert" content="This test checks that a verticalLR element inside an horizontal container computes properly its percentage margins against the container's inline size (the container's width in this test), and the element is sized accordingly subtracting those margins from the available size."> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 200px; | ||
| width: 500px; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 25px/1 Ahem; | ||
| margin: 10%; /* This should be computed against the container's inline size (500px), so it should be 50px and element's height should be 100px. */ | ||
| writing-mode: vertical-lr; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
25 changes: 25 additions & 0 deletions
25
css/css-writing-modes/sizing-orthogonal-percentage-margin-002-ref.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,25 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 200px; | ||
| width: 500px; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 25px/1 Ahem; | ||
| margin: 50px; | ||
| height: 100px; | ||
| writing-mode: vertical-rl; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
28 changes: 28 additions & 0 deletions
28
css/css-writing-modes/sizing-orthogonal-percentage-margin-002.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,28 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping"> | ||
| <link rel="match" href="sizing-orthogonal-percentage-margin-002-ref.html"> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <meta name="assert" content="This test checks that a verticalRL element inside an horizontal container computes properly its percentage margins against the container's inline size (the container's width in this test), and the element is sized accordingly subtracting those margins from the available size."> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 200px; | ||
| width: 500px; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 25px/1 Ahem; | ||
| margin: 10%; /* This should be computed against the container's inline size (500px), so it should be 50px and element's height should be 100px. */ | ||
| writing-mode: vertical-rl; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
26 changes: 26 additions & 0 deletions
26
css/css-writing-modes/sizing-orthogonal-percentage-margin-003-ref.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,26 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 200px; | ||
| width: 500px; | ||
| writing-mode: vertical-lr; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 50px/1 Ahem; | ||
| margin: 20px; | ||
| width: 460px; | ||
| writing-mode: horizontal-tb; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
29 changes: 29 additions & 0 deletions
29
css/css-writing-modes/sizing-orthogonal-percentage-margin-003.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,29 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping"> | ||
| <link rel="match" href="sizing-orthogonal-percentage-margin-003-ref.html"> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <meta name="assert" content="This test checks that an horizontal element inside a verticalLR container computes properly its percentage margins against the container's inline size (the container's height in this test), and the element is sized accordingly subtracting those margins from the available size."> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 200px; | ||
| width: 500px; | ||
| writing-mode: vertical-lr; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 50px/1 Ahem; | ||
| margin: 10%; /* This should be computed against the container's inline size (200px), so it should be 20px and element's width should be 460px. */ | ||
| writing-mode: horizontal-tb; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
29 changes: 29 additions & 0 deletions
29
css/css-writing-modes/sizing-orthogonal-percentage-margin-004.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,29 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping"> | ||
| <link rel="match" href="sizing-orthogonal-percentage-margin-003-ref.html"> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <meta name="assert" content="This test checks that an horizontal element inside a verticalLR container computes properly its percentage margins against the container's inline size (the container's height in this test), and the element is sized accordingly subtracting those margins from the available size."> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 200px; | ||
| width: 500px; | ||
| writing-mode: vertical-rl; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 50px/1 Ahem; | ||
| margin: 10%; /* This should be computed against the container's inline size (200px), so it should be 20px and element's width should be 460px. */ | ||
| writing-mode: horizontal-tb; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
25 changes: 25 additions & 0 deletions
25
css/css-writing-modes/sizing-orthogonal-percentage-margin-005-ref.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,25 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 500px; | ||
| width: 200px; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 50px/1 Ahem; | ||
| margin: 20px; | ||
| height: 460px; | ||
| writing-mode: vertical-lr; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
28 changes: 28 additions & 0 deletions
28
css/css-writing-modes/sizing-orthogonal-percentage-margin-005.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,28 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping"> | ||
| <link rel="match" href="sizing-orthogonal-percentage-margin-005-ref.html"> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <meta name="assert" content="This test checks that a verticalLR element inside an horizontal container computes properly its percentage margins against the container's inline size (the container's width in this test), and the element is sized accordingly subtracting those margins from the available size."> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 500px; | ||
| width: 200px; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 50px/1 Ahem; | ||
| margin: 10%; /* This should be computed against the container's inline size (200px), so it should be 20px and element's height should be 460px. */ | ||
| writing-mode: vertical-lr; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
25 changes: 25 additions & 0 deletions
25
css/css-writing-modes/sizing-orthogonal-percentage-margin-006-ref.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,25 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 500px; | ||
| width: 200px; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 50px/1 Ahem; | ||
| margin: 20px; | ||
| height: 460px; | ||
| writing-mode: vertical-rl; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
28 changes: 28 additions & 0 deletions
28
css/css-writing-modes/sizing-orthogonal-percentage-margin-006.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,28 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping"> | ||
| <link rel="match" href="sizing-orthogonal-percentage-margin-006-ref.html"> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <meta name="assert" content="This test checks that a verticalRL element inside an horizontal container computes properly its percentage margins against the container's inline size (the container's width in this test), and the element is sized accordingly subtracting those margins from the available size."> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 500px; | ||
| width: 200px; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 50px/1 Ahem; | ||
| margin: 10%; /* This should be computed against the container's inline size (200px), so it should be 20px and element's height should be 460px. */ | ||
| writing-mode: vertical-rl; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
26 changes: 26 additions & 0 deletions
26
css/css-writing-modes/sizing-orthogonal-percentage-margin-007-ref.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,26 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 500px; | ||
| width: 200px; | ||
| writing-mode: vertical-lr; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 25px/1 Ahem; | ||
| margin: 50px; | ||
| width: 100px; | ||
| writing-mode: horizontal-tb; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
29 changes: 29 additions & 0 deletions
29
css/css-writing-modes/sizing-orthogonal-percentage-margin-007.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,29 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping"> | ||
| <link rel="match" href="sizing-orthogonal-percentage-margin-007-ref.html"> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <meta name="assert" content="This test checks that an horizontal element inside a verticalLR container computes properly its percentage margins against the container's inline size (the container's height in this test), and the element is sized accordingly subtracting those margins from the available size."> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 500px; | ||
| width: 200px; | ||
| writing-mode: vertical-lr; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 25px/1 Ahem; | ||
| margin: 10%; /* This should be computed against the container's inline size (500px), so it should be 50px and element's width should be 100px. */ | ||
| writing-mode: horizontal-tb; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |
29 changes: 29 additions & 0 deletions
29
css/css-writing-modes/sizing-orthogonal-percentage-margin-008.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,29 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping"> | ||
| <link rel="match" href="sizing-orthogonal-percentage-margin-007-ref.html"> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <meta name="assert" content="This test checks that an horizontal element inside a verticalLR container computes properly its percentage margins against the container's inline size (the container's height in this test), and the element is sized accordingly subtracting those margins from the available size."> | ||
| <style> | ||
| .container { | ||
| background: cyan; | ||
| border: solid thick; | ||
| height: 500px; | ||
| width: 200px; | ||
| writing-mode: vertical-rl; | ||
| } | ||
| .element { | ||
| background: magenta; | ||
| font: 25px/1 Ahem; | ||
| margin: 10%; /* This should be computed against the container's inline size (500px), so it should be 50px and element's width should be 100px. */ | ||
| writing-mode: horizontal-tb; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference.</p> | ||
|
|
||
| <div class="container"> | ||
| <div class="element">XX X X X XX X X XX X XX</div> | ||
| </div> |