Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix sizing of orthogonal elements with percentage margins #10091

Merged
merged 1 commit into from Mar 19, 2018
Merged

Fix sizing of orthogonal elements with percentage margins #10091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 25 additions & 0 deletions css/css-writing-modes/sizing-orthogonal-percentage-margin-001-ref.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-001.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-002-ref.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-002.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-003-ref.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-003.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-004.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-005-ref.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-005.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-006-ref.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-006.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-007-ref.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-007.html
View file
Open in desktop
@@ -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 css/css-writing-modes/sizing-orthogonal-percentage-margin-008.html
View file
Open in desktop
@@ -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>