CSS tests and experiments
The pages listed here contain tests and experiments about features, possibilities, browsers’ bugs concerning CSS.
That is, over 200 experiments.
Related cards:
How to test print stylesheets with Cucumber and Capybara
A print stylesheet is easy to create. Choose a font suited for paper, hide some elements, done. Unfortunately print stylesheets often break as the application is developed further, because they are quickly forgotten and nobody bothers to check if ...
Test-Driven Development with integration and unit tests: a pragmatic approach
Test-Driven Development (TDD) in its most dogmatic form (red-green-refactor in micro-iterations) can be tedious. It does not have to be this way! This guide shows a pragmatic approach with integration and unit tests, that works in practice and imp...
Capybara: Most okayest helper to download and inspect files
Testing file download links in an end-to-end test can be painful, especially with Selenium.
The attached download_helpers.rb provides a download_link method for your Capybara tests. It returns a hash describing the download...
Test your CSS rendering output with GreenOnion
No one wants to cry over regression issues in views; does testing HTML and CSS have to be such a back and forth between designers and devs? Why is it that the rest of the stack can have TDD and BDD but not the presentation layer? Well, GreenOnion ...
Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools
tl;dr
In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:
- Display size and lines along with labels
- Changing their attributes
- Change how overlay is colored and fastl...
Cross-Domain Data with Rack and Rails | Union Station
Asynchronous JavaScript and CSS, also known as CSSHttpRequest, is a method of URI-encoding data in 2KB chunks split over several CSS rules with a modified data URI scheme. Because CSS is not subject to the same-origin policy, no service proxy is r...
Styling and scaling for mobile devices
If you want your application to display properly on iPad, iPhone or Android there are two things to do:
Define a stylesheet for mobile devices
Using the media attribute on stylesheet HTML tags allows you to have a CSS for mobile browsers...
How to employ and run your tests with parallel_tests to speed up test execution
When your cucumber features grow massively over time, the test execution can take a lot of time.
One easy way to speed up your test execution is to use the parallel_tests gem.
It comes along with some ...
Print-Friendly Images and Logos with CSS
The trick is this: send a low-resolution version of your image to the screen, and a high-resolution version to the printer.
How to clear cookies in Capybara tests (both Selenium and Rack::Test)
Capybara drivers will usually delete all cookies after each scenario. If you need to lose cookie data in the middle of a scenario, you can do this:
browser = Capybara.current_session.driver.browser
if browser.respond_to?(:clear_cookies)
...