# Dynamic inline styles causes test server to crash

**URL:** https://discuss.emberjs.com/t/dynamic-inline-styles-causes-test-server-to-crash/21818
**Category:** Performance
**Created:** [October 29, 2025, 12:37pm UTC](https://discuss.emberjs.com/t/dynamic-inline-styles-causes-test-server-to-crash/21818 "2025-10-29T12:37:40Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Ashik\_T](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ashik_t/32/18662_2.png) [@Ashik\_T](https://discuss.emberjs.com/u/Ashik_T)
#### Post date: [October 29, 2025, 12:37pm UTC](https://discuss.emberjs.com/t/dynamic-inline-styles-causes-test-server-to-crash/21818/1 "2025-10-29T12:37:40Z")

</div>

When using **dynamic value for a `style` attribute** (e.g. `style="border: 3px solid {{this.borderColor}}"`) particularly inside an `{{#each}}` block, the test suite **hangs** and **CPU usage spikes to 100%** —but only during testing (`ember test --server`). This issue becomes **worse when multiple tests visit the same page repeatedly** , as each visit seems to increase memory or DOM processing load.

* * *

Tested even in Ember’s official Super Rentals example. [https://github.com/ember-learn/super-rentals/tree/super-rentals-tutorial-output](https://github.com/ember-learn/super-rentals/tree/super-rentals-tutorial-output)

Controller:

```javascript
export default class IndexController {
  arrayOfNames = [
    'apple white', 'aqua', 'aqua marine', 'bisque', 'black',
    'blanched almond', 'blue', 'blue violet', 'brown', 'chocolate',
    'crimson red', 'cyan', 'dark blue', 'dark cyan', 'dark green',
    'fire brick', 'floral white', 'ghost white', 'grey', 'yellow green'
  ];

  borderColor = 'red';
}

```

Template:

```auto
<ul>
  {{#each this.arrayOfNames as |name|}}
    <li style="border: 3px solid {{this.borderColor}}">{{name}}</li>
  {{/each}}
</ul>

```

Acceptance Test:

```auto
module('Acceptance | repeated visit', function(hooks) {
  setupApplicationTest(hooks);

  test('checking all li elements are present', async function (assert) {
    await visit('/');
    assert.dom('li').exists({ count: 20 });
  });

  test('checking li element - apple white', async function (assert) {
    await visit('/');
    assert.dom('li').containsText('apple white');
  });

  test('checking li element - aqua', async function (assert) {
    await visit('/');
    assert.dom('li').containsText('aqua');
  });

  // ... similar tests for remaining items
});

```

Run using:

```bash
ember test --server

```

* * *

### **Once the tests starts running**

- Test server hangs after running all test cases.

- CPU usage spikes to 100%.

- Manual kill required (`Ctrl+C` may not respond).

**How I fixed it**

- Applying the style with an ember render modifier resolves this issue

Im not sure how this does not cause the same problem.

Example: [https://stackblitz.com/edit/github-yu36hthb?file=tests%2Facceptance%2Findex-test.js](https://stackblitz.com/edit/github-yu36hthb?file=tests%2Facceptance%2Findex-test.js)

You can run `ember t -s` in this app to replicate this issue.

Once the test is completed you can see the test suite hangs. To confirm try rerunning the tests.

screen shot:

 ![image](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/6/b/6be78c890ec03715886a8896929ae2c10d4350aa.jpeg)

Please share your thoughts and knowledge on this topic