Commit 337ca76b authored by Oskar Kalbag's avatar Oskar Kalbag
Browse files

Fixed width 100% bug in abstract-longhand. Also doesn’t write out the rule twice for longhands.

parent 168c240b
...@@ -2,6 +2,7 @@ body { ...@@ -2,6 +2,7 @@ body {
border: 1px solid #000; border: 1px solid #000;
border: 0.0625rem solid #000; border: 0.0625rem solid #000;
width: 1000px; width: 1000px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
width: 62.5rem; width: 62.5rem;
margin: 24px; margin: 24px;
margin: 1.5rem; margin: 1.5rem;
...@@ -10,10 +11,12 @@ body { ...@@ -10,10 +11,12 @@ body {
line-height: 24px; line-height: 24px;
line-height: 1.5rem; line-height: 1.5rem;
font-size: 18px; font-size: 18px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
font-size: 1.125rem; font-size: 1.125rem;
} }
div { div {
width: 500px; width: 500px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
width: 31.25rem; width: 31.25rem;
margin: 24px 0; margin: 24px 0;
margin: 1.5rem 0; margin: 1.5rem 0;
...@@ -21,18 +24,22 @@ div { ...@@ -21,18 +24,22 @@ div {
} }
h1 { h1 {
font-size: 48px; font-size: 48px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
font-size: 3rem; font-size: 3rem;
line-height: 72px; line-height: 72px;
line-height: 4.5rem; line-height: 4.5rem;
} }
h2 { h2 {
font-size: 24px; font-size: 24px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
font-size: 1.5rem; font-size: 1.5rem;
line-height: 36px; line-height: 36px;
line-height: 2.25rem; line-height: 2.25rem;
margin-top: 36px; margin-top: 36px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
margin-top: 2.25rem; margin-top: 2.25rem;
margin-bottom: 24px; margin-bottom: 24px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
border-bottom: 0.0625rem solid #000; border-bottom: 0.0625rem solid #000;
...@@ -73,18 +80,22 @@ h2 { ...@@ -73,18 +80,22 @@ h2 {
} }
#test-margin-top { #test-margin-top {
margin-top: 10px; margin-top: 10px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
margin-top: 0.625rem; margin-top: 0.625rem;
} }
#test-margin-right { #test-margin-right {
margin-right: 20px; margin-right: 20px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
margin-right: 1.25rem; margin-right: 1.25rem;
} }
#test-margin-bottom { #test-margin-bottom {
margin-bottom: 30px; margin-bottom: 30px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
} }
#test-margin-left { #test-margin-left {
margin-left: 40px; margin-left: 40px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
margin-left: 2.5rem; margin-left: 2.5rem;
} }
#test-padding-one-argument { #test-padding-one-argument {
...@@ -105,26 +116,39 @@ h2 { ...@@ -105,26 +116,39 @@ h2 {
} }
#test-padding-top { #test-padding-top {
padding-top: 10px; padding-top: 10px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
padding-top: 0.625rem; padding-top: 0.625rem;
} }
#test-padding-right { #test-padding-right {
padding-right: 20px; padding-right: 20px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
padding-right: 1.25rem; padding-right: 1.25rem;
} }
#test-padding-bottom { #test-padding-bottom {
padding-bottom: 30px; padding-bottom: 30px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
padding-bottom: 1.875rem; padding-bottom: 1.875rem;
} }
#test-padding-left { #test-padding-left {
padding-left: 40px; padding-left: 40px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
padding-left: 2.5rem; padding-left: 2.5rem;
} }
#test-font-size-inherit { #test-font-size-inherit {
font-size: 'font-size' inherit; font-size: inherit;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
} }
#test-font-size { #test-font-size {
font-size: 42px; font-size: 42px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
font-size: 2.625rem; font-size: 2.625rem;
line-height: 63px; line-height: 63px;
line-height: 3.9375rem; line-height: 3.9375rem;
} }
#test-width-hundred-percent {
width: 50px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
width: 3.125rem;
width: 100%;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
}
...@@ -195,13 +195,17 @@ abstract-shorthand(attr, originalArguments) ...@@ -195,13 +195,17 @@ abstract-shorthand(attr, originalArguments)
abstract-longhand(attr, originalArguments) abstract-longhand(attr, originalArguments)
value = originalArguments[0] value = originalArguments[0]
if value == 'inherit'
{attr} arguments fallbackifyValue = fallbackify(value)
else if unit(value) == 'px'
{attr} unit(value, 'px') {attr} fallbackifyValue
{attr} unit(value/16, 'rem')
else /* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
{attr} arguments if fallbackifyValue != 'inherit'
if fallbackifyValue != 'auto'
if fallbackifyValue != 0
if unit(fallbackifyValue) == "px"
{attr} remify(value)
/* Margin */ /* Margin */
......
...@@ -70,6 +70,10 @@ ...@@ -70,6 +70,10 @@
<div id='test-font-size' data-assert='font-size: 42px'><code>font-size 42px</code></div> <div id='test-font-size' data-assert='font-size: 42px'><code>font-size 42px</code></div>
</section> </section>
<section>
<h2>Width</h2>
<div id='test-width-hundred-percent' data-assert='width: 1000px'>width 100%</div>
</section>
<script src='dom-style-test-runner.js'></script> <script src='dom-style-test-runner.js'></script>
</body> </body>
......
...@@ -101,4 +101,10 @@ h2 ...@@ -101,4 +101,10 @@ h2
#test-font-size #test-font-size
font-size 42px font-size 42px
line-height 63px line-height 63px
\ No newline at end of file
// width
#test-width-hundred-percent
width 50px
width 100%
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment