Comments (2)
So, it seems that CSSStyleDeclaration.style[i]
only exposes longhands, but not the shorthands that are defined.
Upon looking at the declaration corresponding to that block, we get:
…
0: "background-image"
1: "background-position-x"
2: "background-position-y"
3: "background-size"
4: "background-repeat"
5: "background-attachment"
6: "background-origin"
7: "background-clip"
8: "background-color"
…
background: "var(--blue)"
backgroundAttachment: ""
backgroundBlendMode: ""
backgroundClip: ""
backgroundColor: ""
backgroundImage: ""
backgroundOrigin: ""
backgroundPosition: ""
backgroundPositionX: ""
backgroundPositionY: ""
backgroundRepeat: ""
backgroundSize: ""
…
So, only the longhands are indexed, but the shorthand is still correctly recorded. Since Alfa looks at the indexed properties, it does not see that the shorthand has been defined and should be grabbed instead.
When the variable is not used, and background: blue
is used instead, we get:
…
0: "background-image"
1: "background-position-x"
2: "background-position-y"
3: "background-size"
4: "background-repeat"
5: "background-attachment"
6: "background-origin"
7: "background-clip"
8: "background-color"
…
background: "blue"
backgroundAttachment: "initial"
backgroundBlendMode: ""
backgroundClip: "initial"
backgroundColor: "blue"
backgroundImage: "initial"
backgroundOrigin: "initial"
backgroundPosition: "initial"
backgroundPositionX: "initial"
backgroundPositionY: "initial"
backgroundRepeat: "initial"
backgroundSize: "initial"
…
So, the shorthand is correctly expanded (which is possible since it's not a variable that needs cascading to be resolved first), and we grab the correct value.
We might need some special handling of shorthand when grabbing style rules…
from alfa.
We will likely need to have Native.toBlock
send a JSON object with unparsed CSS text, so we can use CSSDeclaration.cssText
instead, and then Block.fromJSON
(or a new version) use alfa-css/syntax/Declaration.parse
to get the correct values.
from alfa.
Related Issues (20)
- `!important` User-Agent rules should not be overwritten by `!important` author rules.
- Handle Shadow DOM related pseudo-classes and -elements
- SIA-R83 (Text is clipped) doesn't detect invisibility due to clip-path HOT 4
- Implement SIA-R111: Target Size (1st version)
- Consider absolute `text-indent` in visibility check when layout information is present
- SIA-R14: use stronger character matching algorithm
- r111 documentation page is missing HOT 2
- R111 improvements
- r69 reports subminimum contrast of elements with sufficient contrast HOT 2
- Consider returning `CantTell` on unanswered Applicability questions
- SIA-R111 and SIA-R113 improvements HOT 3
- Modernize Typescript configuration
- Scrolling down changes the outcome of an audit HOT 1
- Accessibility Checker Reports False SIA-R113 Errors for Hidden Elements HOT 4
- Consider `<label>` for `<progress>` as invisible
- Collect constructed stylesheets in `Native.fromNode`
- SIA-R66 and SIA-R69 should (maybe) apply to submit buttons
- `Sequence` are not as transparent as they should
- Alfa components not being published to npmjs? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from alfa.